zoukankan      html  css  js  c++  java
  • jqgrid问题总结

    所谓问题可能不是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的宽度。通过autotrue属性可以达到目地。

    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 的显示数据,可以这样实现,

    Js代码
    1. userName = $( '#userName' ).val( );   // input 的值  
    2.   
    3. userCode =  $( '#userCode' ).val( );   // input 的值  
    4.   
    5. jQuery('#grid_user').appendPostData( { userName :userName , userCode :userCode }   
    6.   
    7. 这 样,刷新 grid 数据时,提交到服务器的数据将包含这 userName 和 userCode两项。  
    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 , 所以我们可以在这个事件里做些事情。

    Js代码
    1. // 提交前  
    2. fn_beforeSubmit = function( postdata, formid ) {   
    3.     // 添加或修改 postdata 项目值             
    4.     postdata[ 'uploadDate' ] = new Date().format("yyyy/MM/dd") ;    
    5.     postdata[ 'uploadTime' ] = new Date().format("hh:mm:ss") ;    
    6.                                           
    7.     return[true,''];   // 提交  
    8.                           
    9. };  
    10.   
    11. // 添加记录 options   
    12. Options_add = {  
    13.         500,  
    14.         height:290,  
    15.         reloadAfterSubmit:true,  
    16.         jqModal:true,   
    17.         beforeSubmit:       fn_beforeSubmit,  
    18.         ......  
    19. }  
    20.   
    21. // 配置 jqgrid nav  
    22. jQuery( pGridId ).jqGrid('navGrid',pPageId, {edit:true,add:true,del:true,search:false,refresh:true,view:true,addtext:'添加',edittext:' 修改',deltext:'删除' }, //options   
    23.         {height:290,reloadAfterSubmit:false, jqModal:true, closeOnEscape:true, bottominfo:"标记有*的字段不能为空"}, // edit options   
    24.         Options_add, // add options   
    25.         {reloadAfterSubmit:false,jqModal:true, closeOnEscape:true }, // del options   
    26.         {closeOnEscape:true}, // search options   
    27.         {height:250,jqModal:false,closeOnEscape:true} // view options   
    28.     );   
    // 提交前 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 = { 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

  • 相关阅读:
    开窗函数Over用法
    Linux文件搜索命令
    Linux更改文件或目录的所有者和所有组
    Linux权限管理
    不使用临时变量 交换两个变量值
    jQuery获取区间随机数
    jQuery对checkbox选中和取消选中操作
    MySQL优化
    MySQL中explain的用法
    MySQL中好用的GROUP_CONCAT函数
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4400315.html
Copyright © 2011-2022 走看看