jqgrid 控件应用

jQuery("#grid_id").setGridParam().showCol("colname")

jQuery("#grid_id").setGridParam().hideCol("colname")

 

jQuery("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid");

jQuery("#grid_id").setGridParam().hideCol("colname").trigger("reloadGrid");

获取当前被选择的行号（单行被选择）

var rowid = $("#jqgridlist").jqGrid("getGridParam", "selrow");

 

获取当前被选择的行号（多行被选择）

var ids = $("#jqgridlist").jqGrid("getGridParam", "selarrrow");

改变当前行号的 属性 

jsonReader : {  

   id: "code"

},

根据行号获取行

 var row = jQuery("#jqgridlist").jqGrid('getRowData', id);

 

 根据当前 参数重新加载 

$('#jqGrid1').trigger('reloadGrid');

 

改变参数后 重新加载：

$("#jqGrid").jqGrid('setGridParam', {

   url: path+"/alarm/queryAlarmPage?deviceCode="+deviceCode+"&deviceName="+deviceName+"&stDt="+stDt+"&edDt="+edDt

   }).trigger("reloadGrid");

 x轴 横向滚动条：

       autoScroll: true,

                gridComplete:function (){

           $("#jqgridId").closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'auto' });

         }

 

1.格式化时间 毫秒数

一般 json化时间后 给jqgrid 这样不会有问题，有时候后台会给jqgrid毫秒数，，jqgrid主要是支持这php，而php和java在时间戳上有区别， php里面，时间戳用10位数字表示，精确到秒， java里面，时间戳用13位数字表示，精确到毫秒

解决：利用formatter 格式化数据后返回给jqgrid的行

   // jqgrid 的行 updateTimeFormatter为格式化函数
  { name: 'updateTime', index: 'updateTime', width: 200, align: "center", formatter: updateTimeFormatter  },

// js 函数
var format = function(time, format){
    var t = new Date(time);
    var tf = function(i){return (i < 10 ? '0' : '') + i};
    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
        switch(a){
            case 'yyyy':
                return tf(t.getFullYear());
                break;
            case 'MM':
                return tf(t.getMonth() + 1);
                break;
            case 'mm':
                return tf(t.getMinutes());
                break;
            case 'dd':
                return tf(t.getDate());
                break;
            case 'HH':
                return tf(t.getHours());
                break;
            case 'ss':
                return tf(t.getSeconds());
                break;
        }
    })
}
function updateTimeFormatter(cellvalue, options, rowObject){
	return format(cellvalue, 'yyyy-MM-dd HH:mm:ss');
}

二、 jqgrid的重要选项

具体的options参考，可以访问jqGrid文档关于option的章节（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有几个是比较常用的，重点介绍一下：

• url ：jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Json。
• datatype ：这个参数用于设定将要得到的数据类型。类型包括：json 、xml、xmlstring、local、javascript、function。
• mtype : 定义使用哪种方法发起请求，GET或者POST。
• height ：Grid的高度，可以接受数字、%值、auto，默认值为150。
• width ：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。
• shrinkToFit ：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。
• autowidth ：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。
• pager ：定义页码控制条Page Bar，在上面的例子中是用一个div(<div id=”pager”></div>)来放置的。
• sortname ：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端。
• viewrecords ：设置是否在Pager Bar显示所有记录的总数。
• caption ：设置Grid表格的标题，如果未设置，则标题区域不显示。
• rowNum ：用于设置Grid中一次显示的行数，默认值为20。正是这个选项将参数rows（prmNames中设置的）通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定，则Grid也只显示rowNum设定的行数。
• rowList ：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
• colNames ：字符串数组，用于指定各列的题头文本，与列的顺序是对应的。
• colModel ：最重要的数组之一，用于设定各列的参数。（稍后详述）
• prmNames ：这是一个数组，用于设置jqGrid将要向Server传递的参数名称。（稍后详述）
• jsonReader ：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

2.1 prmNames选项

prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。其默认值为：

prmNames : {

page:"page", // 表示请求页码的参数名称

rows:"rows", // 表示请求行数的参数名称

sort: "sidx", // 表示用于排序的列名的参数名称

order: "sord", // 表示采用的排序方式的参数名称

search:"_search", // 表示是否是搜索请求的参数名称

nd:"nd", // 表示已经发送请求的次数的参数名称

id:"id", // 表示当在编辑数据模块中发送数据时，使用的id的名称

oper:"oper", // operation参数名称

editoper:"edit", // 当在edit模式中提交数据时，操作的名称

addoper:"add", // 当在add模式中提交数据时，操作的名称

deloper:"del", // 当在delete模式中提交数据时，操作的名称

subgridid:"id", // 当点击以载入数据到子表时，传递的数据名称

npage: null,

totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal

}

2.2 jsonReader选项

jsonReader是jqGrid的一个重要选项，用于设置如何解析从Server端发回来的json数据，如果Server返回的是xml数据，则对应的使用xmlReader来解析。jsonReader的默认值为：

jsonReader : {

root: "rows", // json中代表实际模型数据的入口

page: "page", // json中代表当前页码的数据

total: "total", // json中代表页码总数的数据

records: "records", // json中代表数据行总数的数据

repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。

cell: "cell",

id: "id",

userdata: "userdata",

subgrid: {

root:"rows",

repeatitems: true,

cell:"cell"

}

}

假如有下面一个json字符串：

{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}

其对应的jsonReader为：jsonReader: {

root: "griddata",

total: "totalpages",

page: "currpage",

records: "totalrecords",

repeatitems: false

}

注：cell、id在repeatitems为true时可以用到，即每一个记录是由一对id和cell组合而成，即可以适用另一种json结构。援引文档中的例子：

repeatitems为true时：

jQuery("#gridid").jqGrid({  

     ...  

     jsonReader : {  

         root:"invdata",  

         page: "currpage",  

         total: "totalpages",  

         records: "totalrecords"

     },  

     ...  

});  

json结构为：

{   

"totalpages": "xxx",   

"currpage": "yyy",  

"totalrecords": "zzz",  

"invdata" : [  

                  {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},   // cell中不需要各列的name，只要值就OK了，但是需要保持对应

                  {"id" :"2", "cell" :["cell21", "cell22", "cell23"]},  

                  ...  

     ]  

}  

repeatitems为false时：

jQuery("#gridid").jqGrid({  

     ...  

     jsonReader : {  

         root:"invdata",  

         page: "currpage",  

         total: "totalpages",  

         records: "totalrecords",  

         repeatitems: false,  

         id: "0"

     },  

     ...  

});  

json结构为：

{   

"totalpages" : "xxx",   

"currpage" : "yyy",  

"totalrecords" : "zzz",  

"invdata" : [  

                 {"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"},  

                  ...  

     ]  

}  

 

2.3 colModel的重要选项

colModel也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。

• name ：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
• index ：设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。
• label ：当jqGrid的colNames选项数组为空时，为各列指定题头。如果colNames和此项都为空时，则name选项值会成为题头。
• width ：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
• sortable ：设置该列是否可以排序，默认为true。
• search ：设置该列是否可以被列为搜索条件，默认为true。
• resizable ：设置列是否可以变更尺寸，默认为true。
• hidden ：设置此列初始化时是否为隐藏状态，默认为false。
• formatter ：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等（具体参见文档 ）。

 问题:

1.多级表头 浏览器窗口改变大小,表头不随自动缩放

  解决:在窗口自适应 函数中 加 处理

 

 $(window).resize(function () {
        $("#jqGrid").setGridWidth(表格计算的宽度);
        $("#jqGrid").setGridHeight(表格计算的高度);
        destroyGroupHeader();
        createGroupHeaders();
    });
});
function createGroupHeaders(){
    jQuery("#jqGrid").jqGrid('setGroupHeaders', {
        useColSpanStyle: true,
        groupHeaders: centerFirstHeader(firstHeards)
    });
}
function destroyGroupHeader(){
	$("#jqGrid").jqGrid('destroyGroupHeader');
}

 原文地址:https://blog.csdn.net/u012216044/article/details/72864149