[文摘]jqgrid问题总结

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 提交的参数    具体的说明可以参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:post_data_module     这里举个例子：当你需要根据用户的输入过滤 jqgrid 的显示数据，可以这样实现，   userName = $( '#userName' ).val( ); // input 的值 userCode = $( '#userCode' ).val( ); // input 的值 jQuery('#grid_user' ).appendPostData( { userName :userName , userCode :userCode } 这 样，刷新 grid 数据时，提交到服务器的数据将包含这 userName 和 userCode两项。   07. Editing form 提交时，动态添加数据项    在以 Form Editing 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？   一个典型的例子是添加文章记录时，在提交的数据中添加当前时间这个项目。   参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing 可以知道：   在表单提交前，将触发事件 beforeSubmit ， 所以我们可以在这个事件里做些事情。   // 提交前 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 );     08.  Editing form 中上传文件    待续 ......       09.  不显示中间的分页器或右边的记录信息    通过 FireBug可以发现 jqgrid  pager中各部分的命名规则： pager id + _left/_center/_right。   pPageId = '#pager_grid' ; $( pPageId + "_center" ).remove( );    // 删除中间分页器     另外，也可以通过控制 css 实现。   参考：  jqgrid  Tips, Tricks and Hacks -  To use the nav bar for buttons but hide the pager, using CSS 10 JQGrid Tips learned from my experience - tip5,tip6     其他参考：   10 JQGrid Tips learned from my experience http://veechand.wordpress.com/2009/07/13/10-jqgrid-tips-learned-from-my-experience/     jqGrid and JQuery UI tabs showing grids expanded only on primary tab (div)   http://stackoverflow.com/questions/2117687/jqgrid-and-jquery-ui-tabs-showing-grids-expanded-only-on-primary-tab-div

[转自：http://hi.baidu.com/danghj/blog/item/f6d85b16ce430c4620a4e9f5.html ]

------------------------------------------------------
另：如何设定jqGrid数据行的高度等问题可以参考如下这个问题解决集合！
http://forestkqq.iteye.com/blog/671380