[文摘]jqgrid问题总结

最新推荐文章于 2020-09-24 09:19:19 发布

weixin_33712987

最新推荐文章于 2020-09-24 09:19:19 发布

阅读量88

点赞数

文章标签： javascript php ui ViewUI

原文链接：https://my.oschina.net/leeoo/blog/37861

版权

2010-04-07 14:27

所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。

01.单元格内的文本自动换行 ：

加入样式：

.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}

具体说明可参阅： http://blog.qumsieh.ca/2009/12/03/jqgrid-textword-wrapping/

02.保持显示垂直滚动条

在IE中记录比较少的时候，默认情况下不显示垂直滚动条，会出现标题行与数据行位置对不齐的情况，通过保持显示垂直滚动条可以解决这个问题。

$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

需要保持水平滚动条，则：

$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });

03.控制列的水平宽度

当表字段比较多时，如果按照colModel指定的宽度，整个jqGrid宽度会太宽，我们通常希望控制一下grid的宽度，并同时保持各列的指定宽度。

可以指定jgrid的参数 shrinkToFit:false 。shrinkToFit属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用 colModel指定的宽度。

同时需要控制jqgrid的宽度。通过autowidth:true属性可以达到目地。

04. 高度随记录数自动变化.

使用 height: 'auto' 参数 .

不理想的是，在IE6中，当字段比较多并出现水平滚动条时，感觉会比较难受。参考保持垂直滚动条的办法，保持一个水平滚动条，高度是对了。( 使用的Firefox3.6没发现这个问题, 所以说IE比较烂并不是空穴来风 )

$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' }); // 保持水平滚动条

05. jqgrid 和 validation 插件一起使用的问题

在提交表单的时候，会报错：'settings' is null or not an object. 'setting'为空或不是对象.

http://www.trirand.com/blog/?page_id=393/help/jqgrid-validation-plugin-issue/ 有这样的问题报告，

目前还是有这样的问题。

06. 动态修改 jqgrid 提交的参数

这里举个例子：当你需要根据用户的输入过滤 jqgrid 的显示数据，可以这样实现，

Js代码

userName = $( '#userName' ).val( ); // input 的值
userCode = $( '#userCode' ).val( ); // input 的值
jQuery('#grid_user' ).appendPostData( { userName :userName , userCode :userCode }
这样，刷新 grid 数据时，提交到服务器的数据将包含这 userName 和 userCode两项。

07. Editing form 提交时，动态添加数据项

在以 Form Editing 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？

一个典型的例子是添加文章记录时，在提交的数据中添加当前时间这个项目。

在表单提交前，将触发事件 beforeSubmit ，所以我们可以在这个事件里做些事情。

Js代码

// 提交前
fn_beforeSubmit = function ( postdata, formid ) {
// 添加或修改 postdata 项目值
postdata[ 'uploadDate' ] = new Date().format( "yyyy/MM/dd" ) ;
postdata[ 'uploadTime' ] = new Date().format( "hh:mm:ss" ) ;
return [ true , '' ]; // 提交
};
// 添加记录 options
Options_add = {
width:500,
height:290,
reloadAfterSubmit:true ,
jqModal:true ,
beforeSubmit: fn_beforeSubmit,
......
}
// 配置 jqgrid nav
jQuery( pGridId ).jqGrid('navGrid' ,pPageId, {edit: true ,add: true ,del: true ,search: false ,refresh: true ,view: true ,addtext: '添加' ,edittext: ' 修改' ,deltext: '删除' }, //options
{height:290,reloadAfterSubmit:false , jqModal: true , closeOnEscape: true , bottominfo: "标记有*的字段不能为空" }, // edit options
Options_add, // add options
{reloadAfterSubmit:false ,jqModal: true , closeOnEscape: true }, // del options
{closeOnEscape:true }, // search options
{height:250,jqModal:false ,closeOnEscape: true } // view options
);