jqGrid 问题笔记(2)

forestkqq

浏览: 206146 次
性别:
来自: 合肥

最近访客更多访客>>

ningxianti

ljr1982

yzj150

simbazou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

组件、工具

jQuery jqgrid UI json Firebug

预览文章: 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' );

参考：

setGridParam 方法

jqGrid dynamic event

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

系列文章列表：

jqGrid 问题笔记(3)

jqGrid 问题笔记(2)

jqGrid 问题笔记(1)