jqgrid 使用入门

参考文档

https://www.cnblogs.com/summay/p/5025737.html

演示Demo

http://www.trirand.com/blog/jqgrid/jqgrid.html

FAQ

jqgrid怎么设置请求方式和请求参数

1.GET请求（默认）
dataType : json
url : "../xxx" + "?xxx=xxx"
postData : {xxx : "xxx"}

2.Post请求 （少见）
mType : POST
dataType : json
url : "../xxx" + "?xxx=xxx"
postData : {xxx : "xxx"}

3.本地数据设置
dataType : local
data : [{...},{...},{...}...]
注：一般配合 setGridParam方法 和 reload来更新数据

数据异步加载问题

未找到设置同步请求的方式，可以用setTimeout来协调

jqgrid自带请求参数有哪些

rowNum : 即pageSize
page : 即pageNum
传参可以设置别名
prmNames : {"page":"page", "rows":"rows", "order":"order"}

jqgrid 如何解析服务端返回数据

服务端返回数据格式为
{
    rows : [{},{},{}],
    page : "1",
    total : "2",
    records : "6"
}

jsonReader如下设置
jsonReader : {
    root: "rows",  //数据模型
    page: "page",//数据页码
    total: "total",//数据总页码
    records: "records",//数据总记录数
}

colModel（描述如何渲染表格）

label : 表格字段名称
name : row属性名称
width : 相对长度

jqgrid 根据结果渲染表格

{ label: '任务状态', name: 'status', width: 75, formatter:
    function(value,options, row){
    if(value==10){
        return '<span class="label label-warning">未启用</span>';
    }else if (value ==20){
        return '<span class="label label-success">已启用</span>';
    }
}}

注：row是取的是 data[i]

jqgrid API

1.获取所有的数据

获取所有数据

2.设置表格数据

    jQuery("#jqGrid").jqGrid('setGridParam', {
        data: data
    }).trigger("reloadGrid");

3.删除选中行及数据

    var rowIds = $("#jqGrid").jqGrid('getGridParam', 'selarrrow');
    for (var i = 0; i < rowIds.length; i++) {
        $("#jqGrid").jqGrid('delRowData', rowIds[i]);
    }

jqGrid翻页

在html中加入div

image.png

在 构造jqgrid时加入

image.png