最近一段時間一直在使用jqgrid這個免費的插件，網(wǎng)上的資料也比較多、比較全，但是這里還是整理幾個自己在開發(fā)過程中遇到的小問題。

1.自動換行

　　一行數(shù)據(jù)過多需要自動根據(jù)內(nèi)容換行時，如果遇到在表格中的漢字換行或者空格換行的問題，可以在style標簽中插入下面代碼：

1 .ui-jqgrid tr.jqgrow td 2 {3       white-space: normal !important;4       height:auto;5       vertical-align:central;6       padding-top:2px;7  }

    如果遇到一長串的英文單詞，需要在英文單詞內(nèi)部換行（非空格處）問題時，可以在style標簽中插入下面代碼：

td {Word-wrap:break-word ; }

2.觸發(fā)jqgrid表格重載事件

（1）不帶參數(shù)的重載，其js代碼如下

 1 $("#list").trigger("reloadGrid"); 

（2）觸發(fā)表格重載時可以帶參數(shù)，其js代碼如下：

 1 $("#list").jqGrid('setGridParam',{url:"192.168.1.1/web?param1="+param1+"&param2="+param1+"&param3="+param3}).trigger("reloadGrid"); 

3.動態(tài)隱藏/顯示列

　　jqgrid提供API可以動態(tài)隱藏某些列，其js代碼如下:

 1 $('#list').jqGrid('setGridParam').jqGrid('hideCol',['col1','col2','col3']); 

jqgrid同時提供API可以動態(tài)顯示某些列，只要將上述代碼中的'hideCol'換成'showCol'即可。

4.隱藏水平滾動條

　　js代碼如下：

 1 $("#list").closest(".ui-jqgrid-bdiv").CSS({ 'overflow-x' : 'hidden' }); 

5.多層分組顯示

　　jqgrid提供了分組顯示功能（group），其實這個可以用來多層分組，如下面的例子就是先以col1分組后，再分好的結果中再以col2分組

1 grouping: true,        //打開分組功能2 groupingView : {3     groupField : ['col1', 'col2'],4     groupColumnShow : [false, false],5     groupText : ['<div style="font-size:medium">col1:{0}</div>', '<div style="font-size:medium">col2:{0}</div>'],6     groupCollapse : false,    //不折疊7     groupOrder: ['asc', 'asc'],8     groupSummary : [false, false]9 },

6.使表頭captain內(nèi)容居中

　　js代碼如下

1 $('#list').closest("div.ui-jqgrid-view")2 .children("div.ui-jqgrid-titlebar")3 .css("text-align", "center")4 .children("span.ui-jqgrid-title")5 .css("float", "none");