jqgrid select 取值怎么动态控制 multiselect 属性
点击联系发帖人
时间：2016-03-29 05:18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jqGrid 问题笔记
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
01.单元格内的文本自动换行 ：
加入样式：
.ui-jqgrid tr.jqgrow td {
&&& white-space: normal !
&&& height:
&&& vertical-align:text-
&&& padding-top:2
具体说明可参阅： http://blog.qumsieh.ca//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'为空或不是对象.&
/blog/?page_id=393/help/jqgrid-validation-plugin-issue/ 有这样的问题报告，
目前还是有这样的问题。
06. 动态修改 jqgrid 提交的参数
具体的说明可以参考
/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 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？
一个典型的例子是添加文章记录时，在提交的数据中添加当前时间这个项目。
/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 实现。
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开始)。
/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
//10-jqgrid-tips-learned-from-my-experience/
jqGrid and JQuery UI tabs showing grids expanded only on primary tab (div)
/questions/2117687/jqgrid-and-jquery-ui-tabs-showing-grids-expanded-only-on-primary-tab-div
预览文章: jqGrid 问题笔记
永久链接: /blog/602944
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
11.& UI Tab中显示jqGrid，只是首个标签中的宽度可以自动扩展
解决的办法是在各标签显示的时候才初始化 jqgrid 。下面是&
Stack Overflow 中的一段示例：
jQuery(document).ready(function() {&&
var initialized = [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',&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查看出来：
id=&...& ...
class=&ui-pg-button ui-corner-all&
id=&multiselect&
title=&行单选&
style=&cursor:&&&
class=&ui-pg-div&&&
class=&ui-icon ui-icon-close&&&/span&多行&&
...&& &/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:30&&& /* 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。我们可以修改 mon.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
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid表格,使用方式如下: $(&#search_btn&).click(function(){ //此处可以添加对查询数据的合法验证 var o ...
3.2.body中的代码 &!-- jqGrid table list4 --& &table id=&list4&&&/table& &!-- jqGrid 分页 div gridPager --& &div id=&gridPager&&&/di ...
程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No { } [Required(ErrorMessage=&姓名必填&)] [StringLength(5,ErrorMe ...
据介绍,jqgrid有3种编辑数据的方式: Cell Editing 只允许修改某一个单元格内容 Inline Editing 允许在jqGrid中直接修改某一行的数据 Form Editing 弹出一个新的编辑窗口进行编辑和新增 Form Editing很方便,直接把oper参数传递给Controller进行判断是add还是edit还是del,然后相应处理 ...
排序(Sorting)分为两种:客户端排序和服务端排序 客户端排序的意思是把数据从数据库里一次性全部提取出来,然后在客户端进行排序,以后每次点击标题进行排序时,就不会给服务端传递请求了.这个“一次性”就是: loadonce: true 是的没错!在jqgird里加入这句就是客户端排序了,因为jqgrid看到loadonce:true的时候,就会自动把dat ...
实际应用中,大部分都是从数据库里获得数据,所以先建立一个数据库,Database first 或者Code first都可以,这里用Code first. 一.Model public class Member { [Key] public int No { } [Required] [MaxLength(5)] public strin ...
上回说到jqgrid的基本配置,同时演示了显示数据的一种方法——datatype: &local&.这种方法是从本地获取的,确切地说是在前端页面的javascript里写的硬编码. 本回说到的也是一种硬编码,只不过是在后台的Controller里写的,也是一种快速演示的方法,我们用ArrayList来填充数据.同时,jqgrid里要使用u ...
新建一个mvc项目后 默认scripts文件夹里的内容如下: 下面把jqgrid的东西加入项目中: jquery.jqGrid.src.js到Scripts文件夹 grid.locale-cn.js到Scripts文件夹 ui.jqgrid.css到Content文件夹 显示所有文件 把刚才添加的文件包含到项目中 添加一个Controller: 添加一个Vi ...5514人阅读
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
01.单元格内的文本自动换行 ：
加入样式：
.ui-jqgrid tr.jqgrow td {
&&& white-space: normal !
&&& height:
&&& vertical-align:text-
&&& padding-top:2
具体说明可参阅： http://blog.qumsieh.ca//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'为空或不是对象.&
/blog/?page_id=393/help/jqgrid-validation-plugin-issue/ 有这样的问题报告，
目前还是有这样的问题。
06. 动态修改 jqgrid 提交的参数
具体的说明可以参考 &&
这里举个例子：当你需要根据用户的输入过滤 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 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？
一个典型的例子是添加文章记录时，在提交的数据中添加当前时间这个项目。
可以知道：
在表单提交前，将触发事件 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 实现。
-& To use the nav bar for buttons but hide the pager, using CSS
- tip5,tip6
10.& 取得记录行序号
jqGrid提供的方法一般只能取得记录的 id 号。使用 $('#jqgrid1').jqGrid('getDataIDs') 方法可以获得各行的id数组，此数组相应元素的索引号就是记录行序号了(从0开始)。
/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/
预览文章: jqGrid 问题笔记
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
11.& UI Tab中显示jqGrid，只是首个标签中的宽度可以自动扩展
解决的办法是在各标签显示的时候才初始化 jqgrid 。下面是&
中的一段示例：
jQuery(document).ready(function() {&&
var initialized = [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，才可以在以后动态切换。
13. 如何识别和控制自定义按钮 ：
下面的代码通过在分页器上添加一个按钮，切换行多选/单选。同时展示了如何识别和动态改变新添加的导航按钮属性。
// 新增一个按钮，设置 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查看出来：
id=&...& ...
class=&ui-pg-button ui-corner-all&
id=&multiselect&
title=&行单选&
style=&cursor:&&&
class=&ui-pg-div&&&
class=&ui-icon ui-icon-close&&&/span&多行&&
...&& &/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:30&&& /* 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。我们可以修改 mon.js 中设定的值：
// 原来为 950, 但在 UI dialog 中使用 jqmodal setColumns 时,z-index 较小&
& if(!p.zIndex) {p.zIndex = 1950;}&&&&&
&&& 可以参考：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：142964次
积分：1090
积分：1090
排名：千里之外
转载：43篇
(5)(2)(1)(1)(11)(7)(9)(5)(4)(3)}
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jqGrid 问题笔记
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
01.单元格内的文本自动换行 ：
加入样式：
.ui-jqgrid tr.jqgrow td {
&&& white-space: normal !
&&& height:
&&& vertical-align:text-
&&& padding-top:2
具体说明可参阅： http://blog.qumsieh.ca//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'为空或不是对象.&
/blog/?page_id=393/help/jqgrid-validation-plugin-issue/ 有这样的问题报告，
目前还是有这样的问题。
06. 动态修改 jqgrid 提交的参数
具体的说明可以参考
/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 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？
一个典型的例子是添加文章记录时，在提交的数据中添加当前时间这个项目。
/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 实现。
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开始)。
/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
//10-jqgrid-tips-learned-from-my-experience/
jqGrid and JQuery UI tabs showing grids expanded only on primary tab (div)
/questions/2117687/jqgrid-and-jquery-ui-tabs-showing-grids-expanded-only-on-primary-tab-div
预览文章: jqGrid 问题笔记
永久链接: /blog/602944
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
11.& UI Tab中显示jqGrid，只是首个标签中的宽度可以自动扩展
解决的办法是在各标签显示的时候才初始化 jqgrid 。下面是&
Stack Overflow 中的一段示例：
jQuery(document).ready(function() {&&
var initialized = [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',&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查看出来：
id=&...& ...
class=&ui-pg-button ui-corner-all&
id=&multiselect&
title=&行单选&
style=&cursor:&&&
class=&ui-pg-div&&&
class=&ui-icon ui-icon-close&&&/span&多行&&
...&& &/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:30&&& /* 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。我们可以修改 mon.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
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid表格,使用方式如下: $(&#search_btn&).click(function(){ //此处可以添加对查询数据的合法验证 var o ...
3.2.body中的代码 &!-- jqGrid table list4 --& &table id=&list4&&&/table& &!-- jqGrid 分页 div gridPager --& &div id=&gridPager&&&/di ...
程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No { } [Required(ErrorMessage=&姓名必填&)] [StringLength(5,ErrorMe ...
据介绍,jqgrid有3种编辑数据的方式: Cell Editing 只允许修改某一个单元格内容 Inline Editing 允许在jqGrid中直接修改某一行的数据 Form Editing 弹出一个新的编辑窗口进行编辑和新增 Form Editing很方便,直接把oper参数传递给Controller进行判断是add还是edit还是del,然后相应处理 ...
排序(Sorting)分为两种:客户端排序和服务端排序 客户端排序的意思是把数据从数据库里一次性全部提取出来,然后在客户端进行排序,以后每次点击标题进行排序时,就不会给服务端传递请求了.这个“一次性”就是: loadonce: true 是的没错!在jqgird里加入这句就是客户端排序了,因为jqgrid看到loadonce:true的时候,就会自动把dat ...
实际应用中,大部分都是从数据库里获得数据,所以先建立一个数据库,Database first 或者Code first都可以,这里用Code first. 一.Model public class Member { [Key] public int No { } [Required] [MaxLength(5)] public strin ...
上回说到jqgrid的基本配置,同时演示了显示数据的一种方法——datatype: &local&.这种方法是从本地获取的,确切地说是在前端页面的javascript里写的硬编码. 本回说到的也是一种硬编码,只不过是在后台的Controller里写的,也是一种快速演示的方法,我们用ArrayList来填充数据.同时,jqgrid里要使用u ...
新建一个mvc项目后 默认scripts文件夹里的内容如下: 下面把jqgrid的东西加入项目中: jquery.jqGrid.src.js到Scripts文件夹 grid.locale-cn.js到Scripts文件夹 ui.jqgrid.css到Content文件夹 显示所有文件 把刚才添加的文件包含到项目中 添加一个Controller: 添加一个Vi ...5514人阅读
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
01.单元格内的文本自动换行 ：
加入样式：
.ui-jqgrid tr.jqgrow td {
&&& white-space: normal !
&&& height:
&&& vertical-align:text-
&&& padding-top:2
具体说明可参阅： http://blog.qumsieh.ca//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'为空或不是对象.&
/blog/?page_id=393/help/jqgrid-validation-plugin-issue/ 有这样的问题报告，
目前还是有这样的问题。
06. 动态修改 jqgrid 提交的参数
具体的说明可以参考 &&
这里举个例子：当你需要根据用户的输入过滤 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 方式添加或修改数据，如何在提交时动态的添加或修改一些项目呢？
一个典型的例子是添加文章记录时，在提交的数据中添加当前时间这个项目。
可以知道：
在表单提交前，将触发事件 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 实现。
-& To use the nav bar for buttons but hide the pager, using CSS
- tip5,tip6
10.& 取得记录行序号
jqGrid提供的方法一般只能取得记录的 id 号。使用 $('#jqgrid1').jqGrid('getDataIDs') 方法可以获得各行的id数组，此数组相应元素的索引号就是记录行序号了(从0开始)。
/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/
预览文章: jqGrid 问题笔记
所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。
11.& UI Tab中显示jqGrid，只是首个标签中的宽度可以自动扩展
解决的办法是在各标签显示的时候才初始化 jqgrid 。下面是&
中的一段示例：
jQuery(document).ready(function() {&&
var initialized = [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，才可以在以后动态切换。
13. 如何识别和控制自定义按钮 ：
下面的代码通过在分页器上添加一个按钮，切换行多选/单选。同时展示了如何识别和动态改变新添加的导航按钮属性。
// 新增一个按钮，设置 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查看出来：
id=&...& ...
class=&ui-pg-button ui-corner-all&
id=&multiselect&
title=&行单选&
style=&cursor:&&&
class=&ui-pg-div&&&
class=&ui-icon ui-icon-close&&&/span&多行&&
...&& &/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:30&&& /* 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。我们可以修改 mon.js 中设定的值：
// 原来为 950, 但在 UI dialog 中使用 jqmodal setColumns 时,z-index 较小&
& if(!p.zIndex) {p.zIndex = 1950;}&&&&&
&&& 可以参考：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：142964次
积分：1090
积分：1090
排名：千里之外
转载：43篇
(5)(2)(1)(1)(11)(7)(9)(5)(4)(3)}
我要回帖
更多推荐
- ·a*a=12 a*b=24 b*10B-B等于多少?？
- ·股票中拉萨军团碰过的股票是什么意思
- ·如何全面把握作为大学生如何推进中国式现代化化面临的机遇和挑战
- ·中节能龙腾天津机械制造天津市机电设备有限公司司企业概况 (Introduction)
- ·请问各位？！！什么叫洗黑钱钱
- ·毕业设计 基于PLC的立体车库控制系统设计 哪个好心人 帮我下载一下 谢谢
- ·amd r9370x和gtx950哪个玩大型单机比较好
- ·视频水印是beautycam
- ·iOS有什么好的游戏？求推荐，单机联网都可以。最好是自由度高点的。我的世界一类的就算了
- ·lg蓝牙耳机lg hbs900 说明书app stone talk
- ·Win8.1怎么更换office2013的安装密钥
- ·2016年理塘网络什么时候通的
- ·如何从内核模式设备驱动程序中打开文件以及如何读取或写入文件
- ·驱动装好网卡为什么还是不工作
- ·求周杰伦的所有歌曲 百度云
- ·我想在广州新东方烹饪学校校学习小吃，请问各位朋友有人知道，广州新东方烹饪学校校的私人定制和普通班有什么区别，有
- ·陆风e路航x7升级版版
- ·尉氏手机报彩信下载不了怎么下载
- ·百度文库打开异常字体异常是怎么回事
- ·我qq给qq异地登陆防冻结软件了，什么搞回来，什么也没弄？这是给师傅的登一下时空猎人
- ·jqgrid select 取值怎么动态控制 multiselect 属性
- ·insanity游戏怎么玩这个app怎么用
- ·保险公司给员工家属儿子的追悼会 xw.qq.com
- ·本人要做一个视频哪位高人有软件，急用，在线等！跪求！
- ·怎样关闭手机上的凤凰网新闻
- ·乐视max x900 电信x900max怎样开启防手套功能
- ·求好心人借爱奇艺账号给我看一下太阳的后裔，非常感谢，拜托&#12pcf8591t;
- ·百度云百度会员怎么开通通一个月的啊？
- ·求06年fsn的fsn百度云云资源
- ·求黑兽全集字幕，尤其是重案六组第四部部。重案六组第四部部百度云很敏感老是被封！
- ·5米4指4指是内还是小米路由器外网访问
- ·联想e565显卡玩游戏怎么样？
- ·58同城租房网怀集58同城城市峰景
- ·弗兰克大战杰森.弗兰克百度云
- ·沙海 在那个久久听战歌网播放器器可以听
- ·我吧英特尔rst驱动 win10卸载了…没问题吧？
