jqGrid 问题笔记(2)
预览文章: jqGrid 问题笔记
永久链接: http://forestkqq.iteye.com/blog/602944
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
关于jqgrid，最好的参考是它的官网的wiki 和在线的Demo 。 另外这是 http://forestkqq.iteye.com/ 的原创，本文也会有后续的补充，转载的朋友请标明出处并及时更新。
11. UI Tab中显示jqGrid，只是首个标签中的宽度可以自动扩展
12. 动态切换 jqgrid multiselect 行多选 选项
13. 如何识别和控制自定义按钮
14. 使用 setGridParam 动态重载事件 ( 实现数据选择器 )
15. 设定 jqgrid 数据行高度
16. UI dialog 中使用 jqgrid 时 jqmodal 被遮盖
17. 限制 jqgrid 显示的最大高度( maxheight )
11. UI Tab中显示jqGrid，只是首个标签中的宽度可以自动扩展
解决的办法是在各标签显示的时候才初始化 jqgrid 。下面是 Stack Overflow 中的一段示例：
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 事件中根据需要隐藏此列。
// -----------------------------------------------------
// 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. 如何识别和控制自定义按钮 ：
下面的代码通过在分页器上添加一个按钮，切换行多选/单选。同时展示了如何识别和动态改变新添加的导航按钮属性。
// 新增一个按钮，设置 id ，以便click事件中识别。
pjqGrid.jqGrid('navButtonAdd',pPageId,{caption:"多行",title:"行单选", buttonicon :'ui-icon-close',id:'multiselect'
, 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查看出来：
<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 。或者通过触发一个自定义事件，由自定义事件的绑定者接收选中的记录。下面我们介绍下如何动态重载事件：
// --------------------------------------
// jqgrid 加载后的回调函数
// --------------------------------------
function callback_grid_after_loaded( currGrid, ppagerId )
{
var jqgridId = currGrid.attr( 'id' ); // jqgrid 的 id
currGrid.jqGrid(
'setGridParam',
{ ondblClickRow: function( id ) { // 重载 ondblClickRow 事件
var rowdata = currGrid.getRowData( id ); // 行数据
// 触发自定义事件
$( '#obj1' ).trigger(
"selected_jqgrid_CRUD",
{ jqgridId:jqgridId, selectedId:id }
);
}}
);
}
需要注意的是，对于要重载的事件，在初始化 jqgrid 的时候，需要定义事件参数：
var jqOption = {
height: "auto",
....,
ondblClickRow : function(id){ } // 定义事件
};
var currGrid = jQuery("#jqgrid1").jqGrid( jqOption );
......
callback_grid_after_loaded( currGrid, '#pagerId' );
15. 设定 jqgrid 数据行高度 ：
通过重新定义 jqgrid(3.6.4) 样式可以设定数据行的高度：
.ui-jqgrid tr.jqgrow td {
height:30px; /* row 高度 */
}
16. UI dialog 中使用 jqgrid 时 jqmodal 被遮盖 ：
在 UI dialog 中使用 jqgrid(3.6.4) , 调用 jqgrid.setColumns( { jqModal:true } ) ，即显示 jqModal 对话框，此时 jqModal 对话框将被 dialog 遮盖(见下图)。
出现这种情况自然是因为 z-index 的问题，通过 firefox 可以看出 dialog 的z-index为 1002, 而 jqmodal 的为 950。我们可以修改 grid.common.js 中设定的值：
// 原来为 950, 但在 UI dialog 中使用 jqmodal setColumns 时,z-index 较小
if(!p.zIndex) {p.zIndex = 1950;}
可以参考：JqGrid in a JqModal causes incorrect edit/delete/alertmod modal position
17. 限制 jqgrid 显示的最大高度( maxheight ) ：
通过设定jqgrid 的 height 参数，可以设定jqgrid的高度为一个特定的值或auto。
如果设定为特定的值，当 jqgrid 没有记录或记录不足时，jqgrid 仍保持此高度，页面显得不很好看。如下图：
如果设定高度为 auto，记录不足时，高度会自动变化，但记录比较多时，高度也也很大，会将 jqgrid 下的页面元素都挤到地狱下去了，也很不理想。
所以我们希望将高度设定为 auto，但同时限制一个显示的最大高度。
这可以通过 jqgrid 的 setGridHeight 方法来实现：
function jqgrid_loadComplete( pjqGrid )
{
// ---- maxHeight ----
var maxHeight = pjqGrid.getGridParam( 'maxHeight' );
var height = pjqGrid.height();
if ( height>maxHeight ) pjqGrid.setGridHeight( maxHeight );
}
在 jqgrid 的 loadComplete 事件中调用此函数。函数假定你的 jqgrid 参数有一个 maxHeight 参数。下面是一个完整的示例：
var gridUrl = '../services/grid_services.aspx'
var jqOption = {
height : 'auto',
maxHeight : 300,
url : gridUrl,
rowNum:10, rowList:[0,10,30,50],shrinkToFit:false, autowidth:true,
postData: { method : 'InceptDetail_Sample' },
colNames:['客户','送检日期','送检号'] ,
colModel:[{name:"CustomerName", width:130,align:'left' },
{name:"SponsorDate", width: 60,align:'center' },
{name:"CheckCode", width: 50,align:'center',hidden:true } ],
loadComplete: function(){ jqgrid_loadComplete( $('#id_jqGrid') ); },
viewrecords: true, pager: jQuery( '#id_jqPager' ),
rownumbers:true, multiselect: true, caption: ""
};
var $grid = $('#id_jqGrid');
$grid.jqGrid( jqOption ); // 装载 jqgrid
系列文章列表：