文档章节

[文摘]jqgrid问题总结

leeoo
 leeoo
发布于 2011/12/24 13:29
字数 1033
阅读 449
收藏 0
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 的显示数据,可以这样实现,

 

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两项。  

 

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.         width: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.     );   

 

 

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

© 著作权归作者所有

leeoo
粉丝 27
博文 136
码字总数 83885
作品 0
浦东
程序员
私信 提问
解决jqGrid新增或编辑记录保存成功但提示错误的问题

在上一篇文章《》中,我们详细说明了一下如何创建一个可以使用增删改操作的jqGrid。 但是在实际的修改、新增保存中,会看到如下的错误提示:error Status:"OK".Error code: 900。实际上,修改...

yonge
2009/12/14
5.9K
1
jQuery表格插件jqgrid加载数据的问题

最近的项目使用jqgrid来显示数据, 遇到个问题, 需求:页面初始化时表格是空的,只要显示列明就好,这个通过不指定url实现了。 加载数据是跟用用户输入到DB查询,返回数据集。尝试手动将数据...

jay_
2012/01/20
3.8K
1
关于dwz使用过程中的3个问题,新手勿拍

@张慧华 你好,想跟你请教个问题: 1.如何查看当前的dwz版本是多少?在哪看? 2.为什么我每次从leftside点击链接的时候,都要点两下?第一次是把链接加载到navTab,但是却没有内容显示,第二...

Snakecn21
2012/11/16
8.1K
13
jfinal与jqgrid结合实例。

直接上代码: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <link rel="stylesheet" ......

控制自己
2013/01/05
1K
8
关于jqgrid如何点击选择一列的问题

如何实现jqgrid中点击某一列的表头colname的时候实现该列下的所有checkbox全选啊?或者如何获得jqgrid中的表头的点击事件啊,就像jqgrid自带的排序方法那样。

tangfenglyn
2014/09/01
225
1

没有更多内容

加载失败,请刷新页面

加载更多

网站安全维护公司对渗透测试php后门分析

很多想做渗透测试的朋友都想了解关于PHP后门漏洞的安全测试重点方法,以及该如何预防被中php后门,本节由我们的Sine安全高级渗透工程师进行全面的讲解,来让大家更好的理解和了解php代码的安全...

网站安全
6分钟前
2
0
在github上创建代码仓库时忘记添加.gitignore文件或修改了.gitignore该怎么办?

#清除本地缓存(改变成未track状态) #git rm -r --cached . 表示清除项目中所有文件的本地缓存 git rm -r --cached xxx #xxx表示不想版本控制的文件,比如小编可以输入test.o #.gitignore中的...

博爱飞扬
7分钟前
3
0
Fsimage 与 EditLog定义及合并过程

有很多客户端在向 hdfs 中写数据,同时有很多客户端在查数据,这就涉及到一个响应速度问题。因为只有一个 namenode ,客户端在写的时候,必须迅速记下来。 1. 向 namenode 询问可以存储到哪些...

Garphy
11分钟前
3
0
TI KeyStone C66x开发板处理器、NAND FLASH、NOR FLASH

TL6678F-EasyEVM是广州创龙基于SOM-TL6678F核心板而研发的一款多核高性能DSP+FPGA开发板。开发板采用核心板+底板方式,底板采用沉金无铅工艺的8层板设计,尺寸为247.33mm*139.8mm,它为用户提...

Tronlong创龙
28分钟前
4
0
【2019年8月版本】OCP 071认证考试最新版本的考试原题-第13题

Choose the best answer. Examine this query: SELECT TRUNC (ROUND(156.00,-2),-1) FROM DUAL; What is the result? A) 16 B) 160 C) 150 D) 200 E) 100 Answer:D (解析:关键就是 round ......

oschina_5359
38分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部