jqGrid 问题笔记(1)

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

 

关于jqgrid，最好的参考是它的官网的wiki 和在线的Demo 。 另外这是 http://forestkqq.iteye.com/ 的原创，本文也会有后续的补充，转载的朋友请标明出处并及时更新。

 

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中记录比较少的时候，默认情况下不显示垂直滚动条，会出现标题行与数据行位置对不齐的情况，通过保持显示垂直滚动条可以解决这个问题( 目前使用jqgrid3.6似乎没有这样的问题  )。

 

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

 

 

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

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

 

在目前使用的 jqgrid 3.6 版本中，当 IE 浏览器中网格宽度超过容器的水平宽度时，高度即使设置为 auto，也会同时出现水平滚动条和垂直滚动条，感觉非常难受。此时，只要保持水平滚动条，即可解决这个问题。使用前后的效果见下图:

 

 

 

 

 

 

 

03.控制列的水平宽度

 

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

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

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

 

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

 

使用 height: 'auto' 参数 .

 

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

 

 

if($.browser.msie) {    
    // 保持垂直滚动条 
    // $( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });  
    // 保持水平滚动条
    $( 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/ 有这样的问题报告，

 

目前还是有这样的问题。

 

2010/12/13 修订：现在对于这个问题，我很不确定。因为现在我的很多页面都同时应用了 jqgrid 和 validataion , 没发现有什么问题。不过我现在的提交方式是 ajax 方式。

 

 

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提供的方法一般只能取得记录的 id 号。使用 $('#jqgrid1').jqGrid('getDataIDs') 方法可以获得各行的id数组，此数组相应元素的索引号就是记录行序号了(从0开始)。

 

可以参考:

http://www.trirand.com/blog/?page_id=393/help/to-get-the-rowid-of-the-nth-row-of-the-grid/

 

Found the answer using $('#gridmain').jqGrid('getDataIDs');

It will return an array of ids for the visible grid.

So to get the nth rowid, i use:

var rids = $('#gridmain').jqGrid('getDataIDs');

var nth_row_id = rids[n-1]; //bec the row array starts from zero.

Hope it will help others, if interested.

 

 

 

 

 

其他参考：

 

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

 

 

系列文章列表：

jqGrid 问题笔记(3)

jqGrid 问题笔记(2)

jqGrid 问题笔记(1)

 

 

评论

5 楼 forestkqq 2011-09-24  

yhg7752 写道

pGrid显示未定义

pGridId 是 你的 jqgrid 的 id，我定义的是一个变量，你根据需要换成自己的。

4 楼 yhg7752 2011-09-22  

pGridId 为定义

3 楼 yhg7752 2011-09-22  

pGrid显示未定义

2 楼 yhg7752 2011-09-22  

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

不起作用怎么办？还是放错位置了？

1 楼 qkjava 2011-08-26  

写的不错。