jqgrid一些特殊用法

来源：互联网发布：北京温泉知乎编辑：程序博客网时间：2024/05/15 08:47

jqgrid很多知识可以从 wiki上自学：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

1、合并多列名：

效果图：

直接看jqgrid的设置代码吧：

    jQuery("#dataGrid").jqGrid({
                url:urlStr,
                datatype: "json",
                <%

                    String colNames = "";
                    String[] colModel = new String[colList.size()];
                    int index = 0;
                    for(int i = 0; i < colList.size();i++) {
                        colNames += ",'" + colList.get(i)[0] + "'";

                        //设置 colModel 的属性，由于二级列名都相同，在colModel中的name应该设置不相同，这样可以避免相同列名的数据在点击排序后都被赋成一样的。
                        if (colList.get(i)[0].equals("search")) {
                             colModel[i] = "{name:'" + colList.get(i)[0] + ""+index+"',width: 60,align:'" + colList.get(i)[1] + "'},";
                             index++;
                        } else {
                            colModel[i] = "{name:'" + colList.get(i)[0] + ""+i+"',width: 60,align:'" + colList.get(i)[1] + "'},";
                        }
                        if(i == colList.size() && colModel[i].length() > 0) {
                            colModel[i] = colModel[i].substring(0,colModel[i].length() -1);
                        }
                    }
                    if(colNames.length() > 0) {
                        colNames = colNames.substring(1);
                    }

                    %>
                    colNames:[<%=colNames%>],
                    colModel:[
                    <%
                        for(int i = 0 ; i < colModel.length; i++) {
                    %>
                        <%=colModel[i]%>
                    <%
                        }
                    %>
                    ],
                    height:280,
                    rowNum:20,                    //默认每页记录数
                    rowList:[10,20,30],          //可选择的每页记录数

                    ……
                    });
                    jQuery("#dataGrid").jqGrid('destroyGroupHeader');
                    jQuery("#dataGrid").jqGrid('setGroupHeaders', {
                        useColSpanStyle: false,
                        groupHeaders: [

                            {startColumnName: 'search0', numberOfColumns: 3,titleText: 'qunarHotel'{color}},           //startColumnName：一级列名所属的二级列名开始的第一列（这里
                            {startColumnName: 'search1', numberOfColumns: 3,titleText: 'qunarChoice'{color}},      的名字是指colModel中的name属性），numberOfCulumns:指一级
                            {startColumnName: 'search2', numberOfColumns: 3,titleText: 'qunarChoice_1'{color}},           列名下面附属的列数，titleText：是指一级列名的名字。
                            {startColumnName: 'search3', numberOfColumns: 3,titleText: 'qunarChoice_2'}
                            {startColumnName: 'search4', numberOfColumns: 3, titleText: 'qunarChoice_3'},
                            {startColumnName: 'search5', numberOfColumns: 3,titleText: 'qunarRank'{color}},
                            {startColumnName: 'search6', numberOfColumns: 3,titleText: 'qunarRecommand'},
                            {startColumnName: 'search7', numberOfColumns: 3,titleText: 'qunarCatalog'{color}},
                            {startColumnName: 'search8', numberOfColumns: 3, titleText: '合计'{color}}
                            ]});

                    jQuery("#dataGrid").jqGrid('navGrid','#dataPager',{edit:false,add:false,del:false,autowidth:true});
                    $("#dataGrid").setGridWidth($(window).width()*0.90);
                    $("#dataGrid").setGridHeight($(window).height()*0.65);

jQuery("#dataGrid").jqGrid('setGridParam',{url:urlStr,datatype: "json"}).trigger('reloadGrid');

}

2、改变列名/列数

列名改变前：

列名改变后：

在改变前的图表中，点击 “静态酒店访问个数” 列下面的红色值，jqgrid即改变成改变后的形式。然后，在改变后的图表中点击 “返回” ，又变成列名改变前的形式。
我们看一下代码：

function search(level, param) {

         ……
       var cellfunc = null;

          if(level=='1') {                                                //根据传进来的level的值不同显示不同的列名和列数
                colNames = ['酒店seq','酒店名','访问次数','操作'];
                colModels = [{name:'酒店seq',align:'center'},{name:'酒店名',align:'center'},{name:'访问次数',align:'center'},{name:'操作',align:'center',classes:'link'}];
                cellfunc = function(rowid,iCol,cellcontent,e) {                             //定义一个方法，该方法处理点击表格中某个值的操作，这里是在列名改变前后的jqgrid进行跳转。

                    if(iCol == 3) {
                        search(0,'');
                    }
                }
            {color:#ff0000}} else {{color}
                colNames = ['城市','静态酒店访问个数','静态酒店访问次数'];
                colModels = [{name:'城市',align:'center'},{name:'静态酒店访问个数',align:'center',classes:'link'},{name:'静态酒店访问次数',align:'center'}];
                cellfunc = function(rowid,iCol,cellcontent,e) {
                    if(iCol == 1) {
                        param=jQuery("#dataGrid").getCell(rowid,0);                     //取得的 rowid 行第一列的值。
                        search(1,param);
                    }
                }
            }

            var urlStr = '<%=jspName%>?startDate='startDate'&endDate='endDate'&level='level'&param='encodeURI(param)'&action=query';
            jQuery("#dataGrid").GridUnload();                                                      //将jqgrid卸载，下面重新加载
            jQuery("#dataGrid").jqGrid({
                url:urlStr,
                datatype: "json",
                colNames:colNames,
                colModel:colModels,
                height:280,
                rowNum:20,                    //默认每页记录数
                rowList:[10,20,30],          //可选择的每页记录数
                pager: '#dataPager',
                sortname: 'id',
                emptyrecords: "暂无数据",
                viewrecords: true,
                sortorder: "desc",          //降序排序
                loadonce: true,             //一次加载
                onCellSelect:cellfunc,                                //配置cell点击的方法。
                caption: "<%=title%>"
                });
                jQuery("#dataGrid").jqGrid('navGrid','#dataPager',{edit:false,add:false,del:false,autowidth:true});
                $("#dataGrid").setGridWidth($(window).width()*0.90);
                $("#dataGrid").setGridHeight($(window).height()*0.65);

                jQuery("#dataGrid").jqGrid('setGridParam',{url:urlStr,datatype: "json"}).trigger('reloadGrid');

            }