jQgrid问题总结

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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

1.自动换行

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

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

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

td{Word-wrap:

break-word; }

2.触发jqgrid表格重载事件

(1)不带参数的重载,其js代码如下

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

(2)触发表格重载时可以带参数,其js代码如下:

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

3.动态隐藏/显示列

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

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

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

4.隐藏水平滚动条

js代码如下:

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

5.多层分组显示

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

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

6.使表头captain内容居中

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");

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航