本节介绍jqGrid其他的使用方法，主要是一些基本操作，特殊的数据显示等。
1 刷新jqGrid数据。
常用到刷新jqGrid数据的情况是，在用到查询的时候，根据查询条件，请求数据，并刷新jqGrid表格，使用方式如下：
$("#search_btn").click(function(){
//此处可以添加对查询数据的合法验证
var orderId = $("#orderId").val();
$("#list4").jqGrid('setGridParam',{
datatype:'json',
postData:{'orderId':orderId}, //发送数据
}).trigger("reloadGrid"); //重新载入
① setGridParam用于设置jqGrid的options选项。返回jqGrid对象② datatype为指定发送数据的格式；③ postData为发送请求的数据，以key:value的形式发送，多个参数可以以逗号&,&间隔；④ page为指定查询结果跳转到第一页；⑤ trigger(&reloadGrid&);为重新载入jqGrid表格。
2 无数据的提示信息。
当后台返回数据为空时，jqGrid本身的提示信息在右下角，不是很显眼，下面方法将实现在无数据显示的情况下，在jqGrid表格中间位置提示&无数据显示&。如下图：当然，你的div样式可以设置的更好看些。
loadComplete: function() {//如果数据不存在，提示信息
&&&&var rowNum = $("#list4").jqGrid('getGridParam','records');
&&&&if (rowNum&&&&& if($("#norecords").html() == null){
&&&&&&&&&&&&$("#list4").parent().append("&/pre&
&div id="norecords"&没有查询记录！&/div&
&&&&&&&&$("#norecords").show();
&&&&}else{//如果存在记录，则隐藏提示信息。
&&&&&&&&$("#norecords").hide();
① loadComplete 为jqGrid加载完成，执行的方法；
② getGridParam这个方法用来获得jqGrid的选项值。它具有一个可选参数name，name即代表着jqGrid的选项名，如果不传入name参数，则会返回jqGrid整个选项options。例：
$("#list4").jqGrid('getGridParam','records');//获取当前jqGrid的总记录数；
注意：这段代码要加在jqGrid的选项设置Option之间，即：$(&#list4&P).jqGrid({});代码之间。且各个option之间加逗号间隔。
3 显示jqGrid统计信息。
通常统计信息都显示在jqGrid表格最后一行，分页控件之上，如下图：
代码片段：
$("#list4").jqGrid({
&&&&......
&&&&colModel:[
&&&&&&&&{name:'productName',index:'productName',align:'center',sortable:false},
&&&&&&&&{name:'productAmt',index:'productAmt', align:'center'}
&&&&footerrow: true,//分页上添加一行，用于显示统计信息
&&&&......
&&&&pager:$('#gridPager'),
&&&&gridComplete: function() {//当表格所有数据都加载完成，处理统计行数据
&&&&&&&&var rowNum = $(this).jqGrid('getGridParam','records');
&&&&&&&&if(rowNum & 0){
&&&&&&&&&&&&var options = {
&&&&&&&&&&&&&&&&url: "test.action",// 默认是form的action，如果写的话，会覆盖from的action.
&&&&&&&&&&&&&&&&dataType: "json",// 'xml', 'script', or 'json' (接受服务端返回的类型.)
&&&&&&&&&&&&&&&&type: "POST",
&&&&&&&&&&&&&&&&success: function(data){//成功后调用方法
&&&&&&&&&&&&&&&&&&&&$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&};
&&&&&&&&&&&&$("#searchForm").ajaxSubmit(options);
详细介绍：
3.1jqGrid的options配置； 需要在jqGrid的options中添加如下属性：
footerrow: true,//分页上添加一行，用于显示统计信息
3.2&调用gridComplete方法，当数据加载完成后，处理统计行数据；&3.3调用jqGrid的footerData方法，为统计行赋值：
$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});
4 jqGrid的数据格式化。
jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置
基本用法：
jQuery("#jqGrid_id").jqGrid({
&&&colModel: [
&&&&&&{name:'price', index:'price',& formatter:'integer', formatoptions:{thousandsSeparator: ','}},
formatter主要是设置格式化类型(integer、email等以及函数来支持自定义类型),formatoptions用来设置对应formatter的参数，jqGrid中预定义了常见的格式及其options：
thousandsSeparator： //千分位分隔符,
defaulValue
decimalSeparator, //小数分隔符，如&.&
thousandsSeparator, //千分位分隔符，如&,&
decimalPlaces, //小数保留位数
defaulValue
decimalSeparator, //小数分隔符，如&.&
thousandsSeparator, //千分位分隔符，如&,&
decimalPlaces, //小数保留位数
defaulValue,
prefix //前缀，如加上&$&
suffix//后缀
srcformat, //source的本来格式
newformat //新格式
没有参数，会在该cell是email加上： mailto:
baseLinkUrl, //在当前cell中加入link的url，如&jq/query.action&
showAction, //在baseLinkUrl后加入&action=actionName
addParam, //在baseLinkUrl后加入额外的参数，如&&name=aaaa&
idName //默认会在baseLinkUrl后加入,如&.action?id=1&P。改如果设置idName=&name&,那么&.action?name=1&P。其中取值为当前rowid
disabled //true/false 默认为true此时的checkbox不能编辑，如当前cell的值是1、0会将1选中
设置下拉框，没有参数，需要和colModel里的editoptions配合使用
下面是一个使用的例子:
colModel:[
&&&&{name:'id',&&&& index:'id',&&&& formatter:& customFmatter},
&&&&{name:'name',&& index:'name',&& formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}},
&&&&{name:'price',& index:'price',& formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}},
&&&&{name:'email',& index:'email',& formatter: "email"},
&&&&{name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},
&&&&{name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}},
&&&&{name:'type',&& index:'type',&& formatter: "select", editoptions:{value:"0:无效;1:正常;2:未知"}}
其中customFmatter声明如下：
function customFmatter(cellvalue, options, rowObject){
&&&&console.log(cellvalue);
&&&&console.log(options);
&&&&console.log(rowObject);
&&&&return "["+cellvalue+"]";
在页面显示的效果如下：&
当然还得支持自定义formatter函数，只需要在formatter:customFmatter设置formatter函数，该函数有三个签名：
function customFmatter(cellvalue, options, rowObject){&
//cellvalue - 当前cell的值
//options - 该cell的options设置，包括{rowId, colModel,pos,gid}
//rowObject - 当前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}
当然对于自定义formatter，在修改时需要获取原来的值，这里就提供了unformat函数，这里见官网的例子：
jQuery("#grid_id").jqGrid({
&&&colModel: [
&&&&&&{name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
function imageFormat( cellvalue, options, rowObject ){
&&&&return '&/pre&
&img src="'+cellvalue+'" alt="" /&
function imageUnFormat( cellvalue, options, cell){
&&&&return $('img', cell).attr('src');
5 常见错误问题：
chrome报错：
Uncaught TypeError: Cannot read property &integer& of undefined
SCRIPT5007: 无法获取属性&integer&的值: 对象为 null 或未定义出现这样的问题，是由于页面没有添加语言文件的引用导致的解决办法为：添加语言文件js
&script type="text/javascript" src="js/i18n/grid.locale-cn.js"&&/script&
阅读(...) 评论()6291人阅读
所谓问题可能不是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网站的观点或立场
访问：164220次
积分：1157
积分：1157
排名：千里之外
转载：43篇
(5)(2)(1)(1)(11)(7)(9)(5)(4)(3)jqGrid 最常用的属性和事件，供平时参考（转） - 回到印第安 - 博客园
随笔 - 8, 文章 - 0, 评论 - 0, 引用 - 0
&table id="list1"&&/table&
&div id="pager1"&&/div&
&table id="list5"&&/table&
&div id="pager5"&&/div& &br /&
&a href="#" id="a1"&Get data from selected row&/a&
&a href="#" id="a2"&Delete row 2&/a&
&a href="#" id="a3"&Update amounts in row 1&/a&
&a href="#" id="a4"&Add row with id 99&/a&
&table id="list6"&&/table&
&div id="pager6"&&/div& &br /&
&a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));"&Get url&/a&
&a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));"&Get Sort Name&/a&
&a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));"&Get Sort Order&/a&
&a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));"&Get Selected Row&/a&
&a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));"&Get Current Page&/a&
&a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));"&Get Number of Rows requested&/a&
&a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');"&Get Selected Rows&/a&
&a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));"&Get Data Type requested&/a&
&a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));"&Get number of records in Grid&/a&
&table id="list7"&&/table&
&div id="pager7"&&/div&
&a href="javascript:void(0)" id="s1"&Set new url&/a&
&a href="javascript:void(0)" id="s2"&Set Sort to amount column&/a&
&a href="javascript:void(0)" id="s3" &Set Sort new Order&/a&
&a href="javascript:void(0)" id="s4"&Set to view second Page&/a&
&a href="javascript:void(0)" id="s5"&Set new Number of Rows(15)&/a&
&a href="javascript:void(0)" id="s6" &Set Data Type from json to xml&/a&
&table id="list9"&&/table&
&div id="pager9"&&/div&
&a href="javascript:void(0)" id="m1"&Get Selected id's&/a&
&a href="javascript:void(0)" id="m1s"&Select(Unselect) row 13&/a&
Invoice Header
&table id="list10"&&/table&
&div id="pager10"&&/div&
Invoice Detail
&table id="list10_d"&&/table&
&div id="pager10_d"&&/div&
&a href="javascript:void(0)" id="ms1"&Get Selected id's&/a&
&table id="list11"&
&/table& &div id="pager11"&&/div&
&script src="subgrid.js" type="text/javascript"& &/script&
&div class="h"&Search By:&/div&
&input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"& Enable Autosearch
&input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" /&
&div& Name&br&
&input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" /&
&button onclick="gridReload()" id="submitButton" style="margin-left:30"&Search&/button&
&table id="bigset"&&/table&
&div id="pagerb"&&/div&
&script src="bigset.js" type="text/javascript"& &/script&
&table id="list13"&&/table&
&div id="pager13"&&/div& &br /&
&a href="javascript:void(0)" id="cm1"&Get Selected id's&/a&
&a href="javascript:void(0)" id="cm1s"&Select(Unselect) row 13&/a&
&script src="cmultiex.js" type="text/javascript"& &/script&
&table id="list15"&&/table&
&div id="pager15"&&/div&
&a href="javascript:void(0)" id="sids"&Get Grid id's&/a&
&table id="list17"&&/table&
&div id="pager17"&&/div&
&a href="javascript:void(0)" id="hc"&Hide column Tax&/a&
&a href="javascript:void(0)" id="sc"&Show column Tax&/a&
&table id="list1"&&/table&
&div id="pager1"&&/div&
&table id="list5"&&/table&
&div id="pager5"&&/div& &br /&
&a href="#" id="a1"&Get data from selected row&/a&
&a href="#" id="a2"&Delete row 2&/a&
&a href="#" id="a3"&Update amounts in row 1&/a&
&a href="#" id="a4"&Add row with id 99&/a&
&table id="list6"&&/table&
&div id="pager6"&&/div& &br /&
&a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));"&Get url&/a&
&a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));"&Get Sort Name&/a&
&a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));"&Get Sort Order&/a&
&a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));"&Get Selected Row&/a&
&a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));"&Get Current Page&/a&
&a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));"&Get Number of Rows requested&/a&
&a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');"&Get Selected Rows&/a&
&a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));"&Get Data Type requested&/a&
&a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));"&Get number of records in Grid&/a&
&table id="list7"&&/table&
&div id="pager7"&&/div&
&a href="javascript:void(0)" id="s1"&Set new url&/a&
&a href="javascript:void(0)" id="s2"&Set Sort to amount column&/a&
&a href="javascript:void(0)" id="s3" &Set Sort new Order&/a&
&a href="javascript:void(0)" id="s4"&Set to view second Page&/a&
&a href="javascript:void(0)" id="s5"&Set new Number of Rows(15)&/a&
&a href="javascript:void(0)" id="s6" &Set Data Type from json to xml&/a&
&table id="list9"&&/table&
&div id="pager9"&&/div&
&a href="javascript:void(0)" id="m1"&Get Selected id's&/a&
&a href="javascript:void(0)" id="m1s"&Select(Unselect) row 13&/a&
Invoice Header
&table id="list10"&&/table&
&div id="pager10"&&/div&
Invoice Detail
&table id="list10_d"&&/table&
&div id="pager10_d"&&/div&
&a href="javascript:void(0)" id="ms1"&Get Selected id's&/a&
&table id="list11"&
&/table& &div id="pager11"&&/div&
&script src="subgrid.js" type="text/javascript"& &/script&
&div class="h"&Search By:&/div&
&input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"& Enable Autosearch
&input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" /&
&div& Name&br&
&input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" /&
&button onclick="gridReload()" id="submitButton" style="margin-left:30"&Search&/button&
&table id="bigset"&&/table&
&div id="pagerb"&&/div&
&script src="bigset.js" type="text/javascript"& &/script&
&table id="list13"&&/table&
&div id="pager13"&&/div& &br /&
&a href="javascript:void(0)" id="cm1"&Get Selected id's&/a&
&a href="javascript:void(0)" id="cm1s"&Select(Unselect) row 13&/a&
&script src="cmultiex.js" type="text/javascript"& &/script&
&table id="list15"&&/table&
&div id="pager15"&&/div&
&a href="javascript:void(0)" id="sids"&Get Grid id's&/a&
&table id="list17"&&/table&
&div id="pager17"&&/div&
&a href="javascript:void(0)" id="hc"&Hide column Tax&/a&
&a href="javascript:void(0)" id="sc"&Show column Tax&/a&
[javascript]
&script type="text/javascript"&
jQuery().ready(function (){
//父Grid（主Grid）
jQuery("#list1").jqGrid({
url:'server.php?q=1',
//editurl:"someurl.php",
datatype: "json", //数据类型 datatype: "local", datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:75},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
rowNum:10, //每页数据显示条数
rowList:[10,20,30], //每页数据显示条数
pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
sortname: 'id', //根据ID排序
viewrecords: true, //显示数据总记录数
sortorder: "desc", //倒序
hidegrid: false, //Grid是否隐藏
autowidth: true, //自动列宽
width: 500, //Grid 宽度
height: 200, //行高 height: "100%",
multiselect: true, //复选框
recordpos: 'left', //总记录显示位置：居左
mtype: "POST",
pgbuttons: false,
pgtext: false,
pginput: false,
multikey: "ctrlKey",
onSortCol: function(name,index){
//点击排序列，根据哪列排序
alert("Column Name: "+name+" Column Index: "+index);
ondblClickRow: function(id){
alert("You double click row with id: "+id);
onSelectRow: function(ids) { //单击选择行
if(ids == null) {
if(jQuery("#list10_d").jqGrid('getGridParam','records') &0 ) {
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid
subGridUrl: 'subgrid.php?q=2', //内部Grid URL
subGridModel: [ { //内部Grid列
name : ['No','Item','Qty','Unit','Line Total'],
width : [55,200,80,80,80],
params: ['invdate'] //嵌套Grid参数
subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid
// we pass two parameters
// subgrid_id is a id of the div tag created whitin a table data
// the id of this elemenet is a combination of the "sg_" + id of the row
// the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use
// a method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the flowing
var subgrid_table_id, pager_
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_
$("#"+subgrid_id).html("&table id='"+subgrid_table_id+"' class='scroll'&&/table&&div id='"+pager_id+"' class='scroll'&&/div&");
jQuery("#"+subgrid_table_id).jqGrid({
url:"subgrid.php?q=2&id="+row_id,
datatype: "xml",
colNames: ['No','Item','Qty','Unit','Line Total'],
colModel: [
{name:"num",index:"num",width:80,key:true},
{name:"item",index:"item",width:130},
{name:"qty",index:"qty",width:70,align:"right"},
{name:"unit",index:"unit",width:70,align:"right"},
{name:"total",index:"total",width:70,align:"right",sortable:false}
rowNum:20,
pager: pager_id,
sortname: 'num',
sortorder: "asc",
height: '100%' //自动适应行高
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
subGridRowColapsed: function(subgrid_id, row_id) {
// this function is called before removing the data
//var subgrid_table_
//subgrid_table_id = subgrid_id+"_t";
//jQuery("#"+subgrid_table_id).remove();
loadComplete: function(){ //加载完成（初始加载），回调函数
alert("This function is executed immediately after\n data is loaded. We try to update data in row 13.");
ret = jQuery("#list15").jqGrid('getRowData',"13");
if(ret.id == "13"){
jQuery("#list15").jqGrid('setRowData',ret.id,{note:"&font color='red'&Row 13 is updated!&/font&"})
caption:"Grid Example" //Grid名称
}).navGrid('#pager1',{edit:false,add:false,del:false});
//jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false});
//添加查询文本框
jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
//查询和刷新按钮居右
jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
//编辑行，添加Add、Edit、Save、Cancel按钮 //&script src="rowedex3.js" type="text/javascript"& &/script&
jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3");
//&table id="rowed3"&&/table& &div id="prowed3"&&/div&
jQuery("#list10_d").jqGrid({
height: 100,
url:'subgrid.php?q=1&id=0',
datatype: "json",
colNames:[
'No','Item', 'Qty', 'Unit','Line Total'
colModel:[
{name:'num',index:'num', width:55},
{name:'item',index:'item', width:180},
{name:'qty',index:'qty', width:80, align:"right"},
{name:'unit',index:'unit', width:80, align:"right"},
{name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}
rowList:[5,10,20],
pager: '#pager10_d',
sortname: 'item',
viewrecords: true,
sortorder: "asc",
multiselect: true,
caption:"Invoice Detail"
}).navGrid('#pager10_d',{add:false,edit:false,del:false});
jQuery("#a1").click( function(){
//获取Grid中选中的行id
var id = jQuery("#list5").jqGrid('getGridParam','selrow');
var ret = jQuery("#list5").jqGrid('getRowData',id);
alert("id="+ret.id+" invdate="+ret.invdate+"...");
alert("Please select row");
jQuery("#a2").click( function(){
//删除第12行
var su=jQuery("#list5").jqGrid('delRowData',12);
alert("Succes. Write custom code to delete row from server");
alert("Allready deleted or not in list");
jQuery("#a3").click( function(){
//修改第11行
var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"&img src='images/user1.gif'/&"});
alert("Succes. Write custom code to update row in server");
alert("Can not update");
jQuery("#a4").click( function(){
//添加第99行（id为99的）
var datarow = {id:"99",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
var su=jQuery("#list5").jqGrid('addRowData',99,datarow);
alert("Succes. Write custom code to add data in server");
alert("Can not update");
jQuery("#s1").click( function() {
jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");
jQuery("#s2").click( function() {
//设置排序列
jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");
jQuery("#s3").click( function() {
//设置升序或倒序
var so = jQuery("#list7").jqGrid('getGridParam','sortorder');
so = so=="asc"?"desc":"asc";
jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");
jQuery("#s4").click( function() {
//跳转到第二页
jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
jQuery("#s5").click( function() {
//设置每页显示15行
jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");
jQuery("#s6").click( function() {
//设置URL和数据格式
jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");
jQuery("#s7").click( function() {
//设置Grid的名称
jQuery("#list7").jqGrid('setCaption',"New Caption");
jQuery("#s8").click( function() {
//设置Grid排序字段，根据名称排序
jQuery("#list7").jqGrid('sortGrid',"name",false);
jQuery("#m1").click( function() {
//获取复选框被选中的id
var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
jQuery("#m1s").click( function() {
//设置选中第13行
jQuery("#list9").jqGrid('setSelection',"13");
jQuery("#ms1").click( function() {
var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
//Grid 查询
var timeoutH
var flAuto = false;
function doSearch(ev){
if(!flAuto)
// var elem = ev.target||ev.srcE
if(timeoutHnd)
clearTimeout(timeoutHnd)
timeoutHnd = setTimeout(gridReload,500)
function gridReload(){
var nm_mask = jQuery("#item_nm").val();
var cd_mask = jQuery("#search_cd").val();
jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");
function enableAutosubmit(state){
jQuery("#submitButton").attr("disabled",state);
jQuery("#cm1").click( function() {
//显示选中行
s = jQuery("#list13").jqGrid('getGridParam','selarrrow');
jQuery("#cm1s").click( function() {
//选中编号为13的行
jQuery("#list13").jqGrid('setSelection',"13");
jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},
{}, // edit parameters
{}, // add parameters
{reloadAfterSubmit:false} //delete parameters
jQuery("#sids").click( function() {
//获取Grid中当页的所有ID
alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs'));
jQuery("#hc").click( function() {
//隐藏tax列
jQuery("#list17").jqGrid('navGrid','hideCol',"tax");
jQuery("#sc").click( function() {
//显示tax列
jQuery("#list17").jqGrid('navGrid','showCol',"tax");
//本地数组数据：datatype: "local",
var mydata = [
{id:"1",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
for(var i=0;i&=mydata.i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
&script type="text/javascript"&
jQuery().ready(function (){
//父Grid（主Grid）
jQuery("#list1").jqGrid({
url:'server.php?q=1',
//editurl:"someurl.php",
datatype: "json", //数据类型 datatype: "local", datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:75},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
rowNum:10, //每页数据显示条数
rowList:[10,20,30], //每页数据显示条数
pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
sortname: 'id', //根据ID排序
viewrecords: true, //显示数据总记录数
sortorder: "desc", //倒序
hidegrid: false, //Grid是否隐藏
autowidth: true, //自动列宽
width: 500, //Grid 宽度
height: 200, //行高 height: "100%",
multiselect: true, //复选框
recordpos: 'left', //总记录显示位置：居左
mtype: "POST",
pgbuttons: false,
pgtext: false,
pginput: false,
multikey: "ctrlKey",
onSortCol: function(name,index){
//点击排序列，根据哪列排序
alert("Column Name: "+name+" Column Index: "+index);
ondblClickRow: function(id){
alert("You double click row with id: "+id);
onSelectRow: function(ids) { //单击选择行
if(ids == null) {
if(jQuery("#list10_d").jqGrid('getGridParam','records') &0 ) {
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid
subGridUrl: 'subgrid.php?q=2', //内部Grid URL
subGridModel: [ { //内部Grid列
name : ['No','Item','Qty','Unit','Line Total'],
width : [55,200,80,80,80],
params: ['invdate'] //嵌套Grid参数
subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid
// we pass two parameters
// subgrid_id is a id of the div tag created whitin a table data
// the id of this elemenet is a combination of the "sg_" + id of the row
// the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use
// a method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the flowing
var subgrid_table_id, pager_
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_
$("#"+subgrid_id).html("&table id='"+subgrid_table_id+"' class='scroll'&&/table&&div id='"+pager_id+"' class='scroll'&&/div&");
jQuery("#"+subgrid_table_id).jqGrid({
url:"subgrid.php?q=2&id="+row_id,
datatype: "xml",
colNames: ['No','Item','Qty','Unit','Line Total'],
colModel: [
{name:"num",index:"num",width:80,key:true},
{name:"item",index:"item",width:130},
{name:"qty",index:"qty",width:70,align:"right"},
{name:"unit",index:"unit",width:70,align:"right"},
{name:"total",index:"total",width:70,align:"right",sortable:false}
rowNum:20,
pager: pager_id,
sortname: 'num',
sortorder: "asc",
height: '100%' //自动适应行高
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
subGridRowColapsed: function(subgrid_id, row_id) {
// this function is called before removing the data
//var subgrid_table_
//subgrid_table_id = subgrid_id+"_t";
//jQuery("#"+subgrid_table_id).remove();
loadComplete: function(){ //加载完成（初始加载），回调函数
alert("This function is executed immediately after\n data is loaded. We try to update data in row 13.");
ret = jQuery("#list15").jqGrid('getRowData',"13");
if(ret.id == "13"){
jQuery("#list15").jqGrid('setRowData',ret.id,{note:"&font color='red'&Row 13 is updated!&/font&"})
caption:"Grid Example" //Grid名称
}).navGrid('#pager1',{edit:false,add:false,del:false});
//jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false});
//添加查询文本框
jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
//查询和刷新按钮居右
jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
//编辑行，添加Add、Edit、Save、Cancel按钮 //&script src="rowedex3.js" type="text/javascript"& &/script&
jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3"); //&table id="rowed3"&&/table& &div id="prowed3"&&/div&
jQuery("#list10_d").jqGrid({
height: 100,
url:'subgrid.php?q=1&id=0',
datatype: "json",
colNames:[
'No','Item', 'Qty', 'Unit','Line Total'
colModel:[
{name:'num',index:'num', width:55},
{name:'item',index:'item', width:180},
{name:'qty',index:'qty', width:80, align:"right"},
{name:'unit',index:'unit', width:80, align:"right"},
{name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}
rowList:[5,10,20],
pager: '#pager10_d',
sortname: 'item',
viewrecords: true,
sortorder: "asc",
multiselect: true,
caption:"Invoice Detail"
}).navGrid('#pager10_d',{add:false,edit:false,del:false});
jQuery("#a1").click( function(){
//获取Grid中选中的行id
var id = jQuery("#list5").jqGrid('getGridParam','selrow');
var ret = jQuery("#list5").jqGrid('getRowData',id);
alert("id="+ret.id+" invdate="+ret.invdate+"...");
alert("Please select row");
jQuery("#a2").click( function(){
//删除第12行
var su=jQuery("#list5").jqGrid('delRowData',12);
alert("Succes. Write custom code to delete row from server");
alert("Allready deleted or not in list");
jQuery("#a3").click( function(){
//修改第11行
var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"&img src='images/user1.gif'/&"});
alert("Succes. Write custom code to update row in server");
alert("Can not update");
jQuery("#a4").click( function(){
//添加第99行（id为99的）
var datarow = {id:"99",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
var su=jQuery("#list5").jqGrid('addRowData',99,datarow);
alert("Succes. Write custom code to add data in server");
alert("Can not update");
jQuery("#s1").click( function() {
jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");
jQuery("#s2").click( function() {
//设置排序列
jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");
jQuery("#s3").click( function() {
//设置升序或倒序
var so = jQuery("#list7").jqGrid('getGridParam','sortorder');
so = so=="asc"?"desc":"asc";
jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");
jQuery("#s4").click( function() {
//跳转到第二页
jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
jQuery("#s5").click( function() {
//设置每页显示15行
jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");
jQuery("#s6").click( function() {
//设置URL和数据格式
jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");
jQuery("#s7").click( function() {
//设置Grid的名称
jQuery("#list7").jqGrid('setCaption',"New Caption");
jQuery("#s8").click( function() {
//设置Grid排序字段，根据名称排序
jQuery("#list7").jqGrid('sortGrid',"name",false);
jQuery("#m1").click( function() {
//获取复选框被选中的id
var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
jQuery("#m1s").click( function() {
//设置选中第13行
jQuery("#list9").jqGrid('setSelection',"13");
jQuery("#ms1").click( function() {
var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
//Grid 查询
var timeoutH
var flAuto = false;
function doSearch(ev){
if(!flAuto)
// var elem = ev.target||ev.srcE
if(timeoutHnd)
clearTimeout(timeoutHnd)
timeoutHnd = setTimeout(gridReload,500)
function gridReload(){
var nm_mask = jQuery("#item_nm").val();
var cd_mask = jQuery("#search_cd").val();
jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");
function enableAutosubmit(state){
jQuery("#submitButton").attr("disabled",state);
jQuery("#cm1").click( function() {
//显示选中行
s = jQuery("#list13").jqGrid('getGridParam','selarrrow');
jQuery("#cm1s").click( function() {
//选中编号为13的行
jQuery("#list13").jqGrid('setSelection',"13");
jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},
{}, // edit parameters
{}, // add parameters
{reloadAfterSubmit:false} //delete parameters
jQuery("#sids").click( function() {
//获取Grid中当页的所有ID
alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs'));
jQuery("#hc").click( function() {
//隐藏tax列
jQuery("#list17").jqGrid('navGrid','hideCol',"tax");
jQuery("#sc").click( function() {
//显示tax列
jQuery("#list17").jqGrid('navGrid','showCol',"tax");
//本地数组数据：datatype: "local",
var mydata = [
{id:"1",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
for(var i=0;i&=mydata.i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
转自：/kf/941.html