jqGrid 问题笔记

最新推荐文章于 2020-06-18 13:09:55 发布

峰北红

最新推荐文章于 2020-06-18 13:09:55 发布

阅读量7.9k

点赞数

文章标签： jquery dialog function scroll firebug callback

所谓问题可能不是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中记录比较少的时候，默认情况下不显示垂直滚动条，会出现标题行与数据行位置对不齐的情况，通过保持显示垂直滚动条可以解决这个问题( 目前使用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比较烂并不是空穴来风 )

Js代码

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/ 有这样的问题报告，

目前还是有这样的问题。

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

具体的说明可以参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:post_data_module

这里举个例子：当你需要根据用户的输入过滤 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 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？

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

参考 http://www.trirand.com/jqgridwiki/doku.php?id=wiki: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
);

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 问题笔记

永久链接: http://forestkqq.javaeye.com/blog/602944

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

11. UI Tab中显示jqGrid，只是首个标签中的宽度可以自动扩展

解决的办法是在各标签显示的时候才初始化 jqgrid 。下面是 Stack Overflow 中的一段示例：

Js代码

jQuery(document).ready(function() {
var initialized = [false, false];
// 原文格式 jQuery('#tabs').tabs({show: function(event, ui) 没反应
// 改为 .bind 格式
jQuery('#tabs').bind('tabsshow', function(event, ui) {
if (ui.index == 0 && !initialized[0]){
// Initialize grid on second tab page here...
jQuery(NOMBRE_GRID).jqGrid({
url: '/Idiomas/DatosGrid/',
datatype: 'json',
mtype: 'GET',
height: 'auto',
multiselect: true,
autowidth: true,
colNames: ['Id', 'Nombre'],
colModel: [
{ name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
},
{ name: 'nombre', index: 'nombre', width: 100, align: 'left' }
],
pager: jQuery(NOMBRE_AREA_PAGINACION),
rowNum: tamanoPagina,
rowList: [5, 10, 15, 20],
sortname: 'nombre',
sortorder: “asc”,
viewrecords: true,
caption: 'Idiomas'
}).navGrid(NOMBRE_AREA_PAGINACION, { edit: false, add: false, del: false, refresh: false, search: false });
});
} else if (ui.index == 1 && !initialized[1]){
// Initialize grid on second tab page here...
jQuery(NOMBRE_GRID_SELECCIONADOS).jqGrid({
url: '/Idiomas/DatosGrid/',
datatype: 'json',
mtype: 'GET',
height: 'auto',
multiselect: true,
autowidth: true,
colNames: ['Id', 'Nombre'],
colModel: [
{ name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
},
{ name: 'nombre', index: 'nombre', width: 100, align: 'left' }
],
sortname: 'nombre',
sortorder: “asc”,
viewrecords: true,
caption: 'Idiomas'
});
initialized[ ui.index ] = true;
});

12. 动态切换 jqgrid multiselect 行多选选项 ：

原先以为通过修改 multiselect 选项可以实现，后来发现行不通。现在的办法是先允许多选，在需要切换的时候，直接隐藏 multiselect 列。如果需要在装入时即不显示 multiselect 列，可以在 loadComplete 事件中根据需要隐藏此列。

Js代码

// -----------------------------------------------------
// jqgrid 重置 multiselect
// -----------------------------------------------------
function jqgrid_reset_multiselect( jqGrid, opt_multiselect )
{
// jqGrid.setGridParam( { multiselect: opt_multiselect } );
if ( opt_multiselect ) {
jqGrid.jqGrid('showCol', 'cb');
} else {
jqGrid.jqGrid('hideCol', 'cb');
}
// jqGrid.trigger( 'reloadGrid' );
}

需要说明的是，jqgrid 的 multiselect 需要先初始化为 true，才可以在以后动态切换。

参考：

stackoverflow: jqGrid with multiselect on, how to turn off checkbox checking when row is selected

stackoverflow: jqGrid with multiselect how to check all checkboxes and top one at load?

13. 如何识别和控制自定义按钮 ：

下面的代码通过在分页器上添加一个按钮，切换行多选/单选。同时展示了如何识别和动态改变新添加的导航按钮属性。

Js代码

// 新增一个按钮，设置 id ，以便click事件中识别。
pjqGrid.jqGrid('navButtonAdd',pPageId,{caption:"多行",title:"行单选", buttonicon :'ui-icon-close',<SPAN style="TEXT-DECORATION: underline"><STRONG>id:'multiselect'</STRONG>
</SPAN>
, onClickButton:function( )
{
var title = $( '#multiselect',pPageId ).attr( 'title' );
if ( title == '行多选' ) {
// 切换按钮图标
$( 'span.ui-icon-check', '#multiselect',pPageId ).removeClass().addClass( 'ui-icon ui-icon-close' );
$( '#multiselect',pPageId ).attr( 'title', '行单选' );
// 调用“问题12”中的函数
jqgrid_reset_multiselect( pjqGrid, true )
} else {
$( 'span.ui-icon-close', '#multiselect',pPageId ).removeClass().addClass( 'ui-icon ui-icon-check' );
$( '#multiselect',pPageId ).attr( 'title', '行多选' );
jqgrid_reset_multiselect( pjqGrid, false )
}
}
});

关键的是在 navButtonAdd 命令中设定可选的 id 参数。因为这样的按钮是动态添加在 pager 里的，所以可以通过 jQuery 选择器 $( '#multiselect',pPageId ) 找到它。自定义按钮的具体的Html代码可以通过 FireBug查看出来：

Html代码

<div id="..." ... >
...
<td class="ui-pg-button ui-corner-all" id="multiselect" title="行单选" style="cursor: pointer;">
<div class="ui-pg-div">
<span class="ui-icon ui-icon-close"></span>多行
</div>
</td>
...
</div>

选择器 $( 'span.ui-icon-check', '#multiselect',pPageId ) 表示 pager 中id=multiselect的元素中包含class='ui-icon-check'的 span 标签。由此可以看出，了解按钮的代码结构对于编写jQuery选择器是少不了的。

14. 使用 setGridParam 动态重载事件 ( 实现数据选择器 ) ：

使用 jqgrid 是 setGridParam 方法，可以动态的设置 jqgrid 参数，也可以动态重载定义的事件处理函数。

比如，我们可以 jqgrid 作为数据记录选择器，在双击行的时候表示选中了当前记录。具体实现可以将 jqgrid 显示在一个 dialog 中，双击行时记录当前记录，并关闭 dialog 。或者通过触发一个自定义事件，由自定义事件的绑定者接收选中的记录。下面我们介绍下如何动态重载事件：

Js代码