jqGrid表格实例

1.导入所需要用的js、css文件

一般jqgrid表格用这些就够了，如果你希望好看一点可以在网上下载主题包然后导入进去

<!--jqgrid引用-->
    <link rel="stylesheet" href="${ctxPath}/plugins/jqgrid/jqgrid/css/ui.jqgrid.css">
    <link rel="stylesheet" href="${ctxPath}/plugins/jqgrid/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript" src="${ctxPath}/plugins/jqgrid/jqgrid/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="${ctxPath}/plugins/jqgrid/jqgrid/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript" src="${ctxPath}/plugins/jqgrid/jqgrid/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="${ctxPath}/js/page/grid_extension.js"></script>

注意：js页面有执行顺序，本人第一次写的就因为顺序不对导致加载不出来

2.在前台页面写一个table以及div

						<table id="dataGrid"></table>
                        <div id="dataGridPage"></div>

注意：表格只能用table标签

3.编写js代码

下面是本人写的，不同应用场景所需字段不同，根据自己进行判断

function pageInit() {
    //创建jqGrid表格
    debugger

    let option=$.jgrid;
    $.extend(option,
        {
            url:'/role/JSONData.json',//组件创建完成之后请求数据的url
            datatype:"json",//请求数据返回的类型。可选json,xml,txt
            colNames:['ID','角色名字','角色类型'],//jqGrid的列显示名字。不填写，colModel里面用label也可以
            colModel:[
                //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
                { name: 'id', label: "ID", index: 'id', width: 55, hidden: true,key:true },
                { name: 'roleName', index: 'name asc, invdate', width: 90 },
                { name: 'roleType', index:'roleType', width: 100 },
            ],
            rowNum:10,//一页显示多少条
            rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
            pager : '#dataGridPage',//表格页脚的占位符(一般是div)的id
            sortname : 'id',//初始化的时候排序的字段
            sortorder : "desc",//排序方式,可选desc,asc
            mtype : "get",//向后台请求数据的ajax的类型。可选post,get
            viewrecords : true,//定义是否显示总记录数
            caption : "角色列表"//表格的标题名字
        })

    $("#dataGrid").dataGrid(option);
    //创建jqGrid的操作按钮容器,可以控制界面上增删改查的按钮是否显示
    $("#dataGrid").dataGrid('navGrid', '#dataGridPage', {edit : false,add : false,del : false});
}

写完这些之后不要忘记这时js代码还未执行，调用这个function

<script type="application/javascript">
      
        $(function () {
            //页面脚本
            pageInit();    
        });
    </script>

到此为止就可以在前台页面进行显示了
下面是我的效果图，大家可以参考。欢迎大家进行评论、补充以及纠错