表格控件 -- jqGrid 学习

1、基本引用

1、jquery
<script src="plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>

2、fontawesome
<link rel="stylesheet" type="text/css" href="plugins/fontawesome-5.11.2/css/all.min.css"/>

3、bootstrap
<link rel="stylesheet" type="text/css" href="plugins/bootstrap-4.3.1/css/bootstrap.min.css"/>
<script src="plugins/bootstrap-4.3.1/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

4、ui.jqgrid-bootstrap4
<link rel="stylesheet" type="text/css" href="plugins/jqGrid/css/ui.jqgrid-bootstrap4.css"/>

5、jqgrid
<script src="plugins/jqGrid/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>

2、基本使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="plugins/fontawesome-5.11.2/css/all.min.css"/>
        
        <link rel="stylesheet" type="text/css" href="plugins/bootstrap-4.3.1/css/bootstrap.min.css"/>
        <script src="plugins/bootstrap-4.3.1/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        
        <link rel="stylesheet" type="text/css" href="plugins/jqGrid/css/ui.jqgrid-bootstrap4.css"/>
        <script src="plugins/jqGrid/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
        <script src="plugins/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <table id="grid"></table>
        <div id="pager"></div>
    </body>
    <script type="text/javascript">
        $.jgrid.defaults.styleUI = 'Bootstrap4';
        $.jgrid.defaults.iconSet = 'fontAwesome';
        
        var data = [
            { name: 'Bob', phone: '232-532-6268' },
            { name: 'Jeff', phone: '365-267-8325' }
        ];
        
        $("#grid").jqGrid({
            datatype: 'local',
            data: data,
            regional: 'cn',
            colModel: [
                { name: 'name', label : '名称' },
                { name: 'phone', label : '电话' }
            ],
            height: 'auto',
            pager: '#pager'
        })
    </script>
</html>

3、自定义返回数据格式

<script type="text/javascript">
    $("#grid").jqGrid({
        //... 省略 ...
        jsonReader : {
            root: "customRows",             //列表数据根节点
            page: "customPage",             //当前页码
            total: "customTotal",           //总页数
            records: "customRecords",       //总条数
            
            id: "customId"                  //行唯一标识
        }
    })
</script>

返回数据格式
{
  "customTotal": "10",
  "customPage": "1",
  "customRecords": "20",
  "customRows" : [
    {"customId" :"111", "name": "Bob", "phone": "232-532-6268", "addres":"address 1"},
    {"customId" :"222", "name": "Jeff", "phone": "365-267-8325", "addres":"address 2"}  
  ]
}

4、自定义请求接口

<script type="text/javascript">
    $("#grid").jqGrid({
        //自定义请求
        datatype: function(postdata){
            var thegrid = this;
            $.ajax({
               url: 'data/data.json',
               dataType:"json",
               complete: function(data,stat){
                  if(stat=="success") {
                     thegrid.addJSONData(data.responseJSON);
                  }
               }
            });
        },
        //... 省略 ...
    })
</script>

5、返回携带用户数据

<script type="text/javascript">
    $("#grid").jqGrid({
        //... 省略 ...
        jsonReader : {
            //... 省略 ...
            userdata: "customUserdata"        //返回用户数据
        }
    })
</script>

返回数据格式
{
  "customTotal": "10",
  "customPage": "1",
  "customRecords": "20",
  "customUserdata": {
  	"username": "admin",
  	"password": "admin"
  },
  "customRows" : [
    {"customId" :"111", "name": "Bob", "phone": "232-532-6268", "addres":"address 1"},
    {"customId" :"222", "name": "Jeff", "phone": "365-267-8325", "addres":"address 2"}  
  ]
}

//获取方式
var customUserdata = $("#grid").jqGrid('getGridParam', 'userData');

6、事件回调

<script type="text/javascript">
//选中行事件
$("#grid").on("jqGridSelectRow", function(event, id, orgEvent) {
  
});
</script>

来源：https://blog.csdn.net/sky_eyeland/article/details/102741381

标签

jqgrid

grid

脚本

charset

css