jqgrid初始化本地模拟数据

之前忘记参考的是哪位大佬的方法了，今天写了一个本地的demo，引用都是bootcdn的资源，复制可以直接出效果。

还是先上图：

onSelectRow 是jqgrid 点击事件 ；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
    <script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
    <script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-cn.js"></script>
</head>
<body>
<div style="width: 1000px;margin: 50px auto;">
    <table id="gridTable"></table>
    <div id="gridTablepager"></div>
</div>
<script>
    $(function () {

        var dataList = [
            {"id": "1", "hnbc": "海纳百川1", "yrnd": "有容乃大1", "blqr": "壁立千仞1", "wyzg": "无欲则刚1"},
            {"id": "2", "hnbc": "海纳百川2", "yrnd": "有容乃大2", "blqr": "壁立千仞2", "wyzg": "无欲则刚2"},
            {"id": "3", "hnbc": "海纳百川3", "yrnd": "有容乃大3", "blqr": "壁立千仞3", "wyzg": "无欲则刚3"},
            {"id": "4", "hnbc": "海纳百川4", "yrnd": "有容乃大4", "blqr": "壁立千仞4", "wyzg": "无欲则刚4"},
            {"id": "5", "hnbc": "海纳百川5", "yrnd": "有容乃大5", "blqr": "壁立千仞5", "wyzg": "无欲则刚5"}
        ];

        $("#gridTable").jqGrid({
            datatype: 'local',  // 重点一定要设置为local！！！
            autowidth: true,
            autoheight: true,
            multiboxonly: true, //复选框
            multiselect: true,  //复选框
            colNames: ["ID", "海纳百川", "有容乃大", "壁立千仞", "无欲则刚"],
            colModel: [
                {name: "id", index: "id", hidden: true},
                {name: "hnbc", index: "hnbc", align: "center", sortable: false},
                {name: "yrnd", index: "yrnd", align: "center", sortable: false},
                {name: "blqr", index: "blqr", align: "center", sortable: false},
                {name: "wyzg", index: "wyzg", align: "center", search: false, sortable: false}
            ],
            pager: "#gridTablepager", //分页容器
            rowNum: 10,
            rownumbers: true, //是否显示序号
            rowList: [10, 20, 30],
            sortname: "createDate",
            sortorder: "desc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            onSelectRow: function() {
                //当前点击行id  点击触发
                selectedRowIndex = $("#" + this.id).getGridParam('selrow');
                alert(selectedRowIndex)
            },
        });
        var localData = {page: 1, total: 0, records: "0", rows: dataList};
        localData.rows = dataList;
        localData.records = dataList.length;
        localData.total = (dataList.length % 5 == 0) ? (dataList.length / 5) : (Math.floor(dataList.length / 5) + 1);
        var reader = {
            root: function (obj) {
                return localData.rows;
            },
            page: function (obj) {
                return localData.page;
            },
            total: function (obj) {
                return localData.total;
            },
            records: function (obj) {
                return localData.records;
            }, repeatitems: false
        };
        $("#gridTable").setGridParam({data: localData.rows, reader: reader}).trigger('reloadGrid');





    });
</script>

</body>
</html>

jqgrid初始化本地模拟数据

猜你喜欢