jQgrid问题总结

最近一段时间一直在使用jqgrid这个免费的插件，网上的资料也比较多、比较全，但是这里还是整理几个自己在开发过程中遇到的小问题。

1.自动换行

　　一行数据过多需要自动根据内容换行时，如果遇到在表格中的汉字换行或者空格换行的问题，可以在style标签中插入下面代码：

 .ui-jqgrid tr.jqgrow td

 {

       white-space: normal !important;

       height:auto;

       vertical-align:central;

       padding-top:2px;

  }

如果遇到一长串的英文单词，需要在英文单词内部换行（非空格处）问题时，可以在style标签中插入下面代码：

td {word-wrap:break-word ; }

2.触发jqgrid表格重载事件

（1）不带参数的重载，其js代码如下

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

（2）触发表格重载时可以带参数，其js代码如下：

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

3.动态隐藏/显示列

　　jqgrid提供API可以动态隐藏某些列，其js代码如下:

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

jqgrid同时提供API可以动态显示某些列，只要将上述代码中的'hideCol'换成'showCol'即可。

4.隐藏水平滚动条

　　js代码如下：

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

5.多层分组显示

　　jqgrid提供了分组显示功能（group），其实这个可以用来多层分组，如下面的例子就是先以col1分组后，再分好的结果中再以col2分组

 grouping: true,        //打开分组功能

 groupingView : {

     groupField : ['col1', 'col2'],

     groupColumnShow : [false, false],

     groupText : ['<div style="font-size:medium">col1:{0}</div>', '<div style="font-size:medium">col2:{0}</div>'],

     groupCollapse : false,    //不折叠

     groupOrder: ['asc', 'asc'],

     groupSummary : [false, false]

 },

6.使表头captain内容居中

　　js代码如下

 $('#list').closest("div.ui-jqgrid-view")

 .children("div.ui-jqgrid-titlebar")

 .css("text-align", "center")

 .children("span.ui-jqgrid-title")

 .css("float", "none");

巴特西

jQgrid问题总结

最新文章

热门文章