JQgrid

cccreator commented 6 years ago

<table id="list"></table>
<div id="pager"></div>

$("#list").jqGrid({
            url:'data/JSONData.json',//jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以是xml也可以是Json
            datatype:"json",//这个参数用于设定将要得到需要显示的数据，类型包括：json、xml、xmlstring、loca
            //colNames用于指定各列的题头文本，与列的顺序相对应
            colNames:['id','name','age'],
            //colMoel用于指定各列参数
            colModel:[
                      {name:'id',index:'id',width:200},
                      {name:'name',index:'invdate',width:200},
                      {name:'age',index:'name',width:300}
            ],
            rowNum:10,//用于设置Grid中一次显示的行数
            rowList:[10,20,30,40],//用于设置Grid可以接受的rowNum值
            pager:"#pager",//用于定义页码控制条
            sortname:'id',//指定默认的排序列，可以是列名也可以是数字。此参数会用于传递到server端
            sortorder:'desc',  //asc是升序
            mtype:"post",
            viewrecords:true,//设置是否在Pager Bar显示所有记录的总数。
            caption:"jqGrid_demo",
            recordpos:'right',
        });
        $("#list").jqGrid('navGrid','#pager',{
            add:true,
            del:true,
            edit:true,
            position:'left',
            addfunc:openDialog4Adding,
            editfunc:openDialog4Updating,
            delfunc:openDialog4Deleting,
            alerttext:"请选择需要操作的数据行！"
        });

url，获取数据的地址；
datatype，从服务器端返回的数据类型，默认为xml。可选为json，script等
mtype，ajax的提交方式，可选为POST或GET；
colNames，列显示名称；
colModel，常用到的属性；name列显示的名称；index传到服务器端用来排序用的列名称；width表示列宽度；align对齐方式；sortable是否可以排序；
rowNum，在grid上显示记录条数，这个参数是要被传递到后台；
rowList，一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum，参数传递到后台；
sortname，默认的拍序列。可以是名称或数字，参数传到后台；
viewrecords，定义是否要显示总记录数；
caption，表格名称；
multiselect，定义是否可以多选；
sortorder，排列顺序，升序or降序（asc或desc）；
rownumWidth，如果rownumbers为true，则可以设置column的宽度；
toolbar，表格工具栏。数组中有两个值，第一个代表是否启用，第二个代表工具栏的位置。对于第二个参数，如果工具栏在上面，则工具栏id为“t”+表格id；如果工具栏在下面，工具栏id为“tb”+表格id；
jsonReader，描述json数据格式的数组；
viewrecords，是否要显示总记录数；
xmlReader，对xml数据结构的描述；
recordtext，用于显示记录数信息。{0}为记录数开始，{1}为记录数结束。viewrecords为true时才能有效；
shrinkToFit，用来说明当初始化列宽的时候的计算类型，如果为true，则用比例初始化列宽度。如果为false，则列宽使用colModel指定的宽度；

为表格添加滚动条：shrinkToFit:false,autoScroll:true,

详细参数见此链接

cccreator commented 6 years ago

jsonReader

从server端发回来的json数据格式为：

1 {"page":"1","total":2,"records":"13",
2 "rows":[
3 {"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},
4 {"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},
5 {"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},
6 {"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},
7 {"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},
8 {"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},
9 {"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},
10 {"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},
11 {"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},
12 {"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}
13 ],
14 "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}

jsonReader用于设置如何解析从Server端发回来的json数据，表格之所以能够成功解析出来得益于jsonReader的默认设置。jsonReader的默认设置为：

1 jsonReader : {
2     root: "rows",    // json中代表实际模型数据的入口
3     page: "page",    // json中代表当前页码的数据
4     total: "total",    // json中代表页码总数的数据
5     records: "records", // json中代表数据行总数的数据
6     repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
7     cell: "cell",
8     id: "id",
9     userdata: "userdata",
10     subgrid: {
11         root:"rows", 
12         repeatitems: true, 
13         cell:"cell"
14     }
15 }

倘若Server端返回的json数据不太符合默认设置，那么就有必要修改这一设置；通常jsonReader和repeatitems是配合使用。

当repeatitems为false时

     repeatitems: false,
     jsonReader : {
         root:"rows",
         page: "page",
         total: "total",
         records: "records"
     },

json结构：

  { 
      "page" : "xxx", 
      "total" : "yyy",
      "records" : "zzz",
      "rows" : [
           {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 数据中需要各列的name，但是可以不按列的顺序
           {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
          ...
      ]
 }

json中的数据可以乱序，并且允许数据空缺。jqGrid会根据colModel中的name属性和json数据对应，根据属性名称进行解析。

当repeatitems为true时，

 jsonReader : {
     root:"rows",
     page: "page",
     total: "total",
     records: "records"
 },

json结构

{ 
  "page": "xxx", 
  "total": "yyy",
  "records": "zzz",
  "rows" : [
               {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},    // cell中不需要各列的name，但是需要与colModel一一对应
               {"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
               ...
  ]
}

参考Blog

cccreator commented 6 years ago

重新向服务器发送新的请求 $("#id").jqGrid('setGridParam',{ url:*******, datatype:"json", }).trigger('reloadGrid')

cccreator / Front

JQgrid #4

JQgrid

jsonReader