jqgrid一些特殊用法

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'¶m='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');   

              

            }