jqgrid参数解密 - 让更多的人站在巨人的肩膀上 - ITeye技术网站
博客分类：
jqgrid是基于jquery的列表组件，还包括很多优秀的其他扩展功能，使用起来也比较方便，起官方wiki，读起来也还好，下面，对其初始化数据的方法，需要用到的参数，作一个归纳，总结和说明。我也是使用中，积累下来的，多多少少其他网站的也看了一些，不过我这个总结，我想没有任何一个中文网站，比我们的更全，更详细了
常用参数：
$('#'+tableId).jqGrid({
datatype: datatype,//数据类型
treedatatype: datatype,
data:localdata,//datatype==local时
//datastr:xx,//datatype==xmlstring jsonstring时
url:dataurl,//展现列表时的查询请求地址
loadtext:'正在加载...',//当数据还没加载完或数据格式不正确时显示
emptyrecords:'没有数据',//当空记录时显示
height:gridheight,//高度
//footerrow:true,表格的下面，pager的上面添加一行
forceFit:false,//拖动列宽时，保持总列宽的和不变，不会出现横向滚动条。比如当前列多了30px，那么右侧的列，就会少30px
//shrinkToFit:true/false,//如果设置true，则每列的宽度会按照当初设置的比例，然后按照表格的宽度进行缩放。如果为false，则走用户设置的数值
align:"center",
mtype:"post",
postData:params,
autowidth: autowidth,//宽度是否自动autowidth: true
width:gridwidth,
colNames:eval(colnames),//['标签ID','标签名称','分组','操作']
colModel:eval(colModels),//
multiselect:gridmulti,//是否可以行多选
multiselectWidth:25,
altRows:true,//true 有条纹的表格
gridview:(!istreeGrid),//能提高加载速度，尤其是loadonce=true时。但是这个设置为true，则treeGrid, subGrid, or afterInsertRow event都不能使用
pager:pager,//分页工具栏
recordtext:'({0}-{1})/{2}条',
pgtext:'{0}/{1}页',
pgbuttons:true,
pagerpos:'left',//设定分页位置
viewrecords:true,
recordpos:'right',
rowNum:rowNum,
sortable:true,
loadonce: loadonce, //如果为true，则一次加载所有数据。加载后，datatype被置为local，以后的操作都只针对本地数据
caption: "",//设置为空，则不显示标题行
//hiddengrid:true/false,//如果为true，开始时列表不读取数据。点击了按钮才读取。
//hidegrid:true/false,//一个控制列表是否显示的按钮，在右上角
//hoverrows:true/false,//如果设置为false则鼠标划过行的样式就没有了
//inlineData:{},//当使用inlineedit的时候，传给后台的参数
//multikey:"shiftKey/altKey/ctrlKey",//必须点哪个组合键后，才能多选.只有为多选状态时才可用
//multiboxonly:true/false,//只有点击复选框，才会进行改变复选框。一般情况下，点击行就可以多选
rownumbers:showidcol,//设置为true，则会多出一列，rn，作为id列，从1开始
rownumWidth:30,//ID列的宽度
//scroll:boolean or integer,//设置为true则表格的分页失效。动态拖动纵向滚动条时，才去继续加载数据，放置页面好用过多内存
//tree begin
treeGrid:istreeGrid,
treeGridModel: 'adjacency',
ExpandColumn: treeCol,
grouping:isGroupGrid,
groupingView:{
groupField:[groupCol],
groupColumnShow:[false],
groupDataSorted : true,
groupSummary : [false],
groupText: ['&b&{0}&/b&']
jsonReader:{
repeatitems : jsonRepeat
gridComplete:fnGridComp,
//列宽拖动事件
resizeStop:fnResizeStop,
loadError:loadError
其中有些属性未作标注，不过官方wiki上，通过其demo也很容易理解
常用方法：
（一）隐藏表头：
var tid = this.tableId;
$.each($(".ui-jqgrid-hdiv"),function(key,value){
if($(value).parent().attr("id").indexOf(tid)!=-1){
$(value).hide();
浏览: 18160 次
来自: 北京
看了下，还不错哦
哥们，还在润乾吗，感觉怎么样？
（一）隐藏表头：这个怎么用呀。。应该写在哪里呢。。新手。。。
看到实名认证就不想弄
jueyue 写道你的网站N就没有进去，这速度刚才看了下，确实 ...jqGrid中文说明文档——选项设置 - 猎人杰 - 博客园
jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式，也可以是对象(object)及数组（array）的形式配置。
jqGrid选项(Option)
调用jqGrid只需要执行以下代码:
&jQuery("#grid_id").jqGrid(options);&
options即jqGrid的选项设置，请参照以下表格。
ajaxGridOptions
此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。
ajaxSelectOptions
此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时， ajax的全局属性。
交替行的类。 此项仅当altRows设置为true时有效。
ui-priority-secondary
设置为交替行表格
autoencode
当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如& 将被转换为&
当设置为true时，表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行，为了使表格在父元素宽度变化时也随之变化，可以使用setGridWidth方法
表格的标题。显示在Header上。若为空时将不会显示。
cellLayout
该属性确定单元格的padding + border 宽度。通常不修改该属性，但若表格的CSS中改变了td元素，该属性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5
是否允许单元格编辑。
cellsubmit
确定单元格内容保存方式是remote还是clientArray 。
单元格保存的url。
描述列参数数组。这是表格最重要的部分，详见.
列名称数组。该名称将在Header中显示。名称以逗号分隔，数量应与colModel 数组数量相等
以数组的形式保存本地数据。
当datatype被设置为xmlstring或jsonstring时，为数据串。
定义表格希望获得的数据的类型，有效值有：Xml &xml数据xmlstring&xml字符串json&JSON数据jsonstring&JSON字符串local&客户端数据（数组）javascript&javascript数据function&函数返回数据&
deselectAfterSort
只适用于当datatype为local时。当一个排序被应用时取消当前选定行。
表格中的书写方向。&ltr&从左到右(缺省值)，&rtl&从右到左
定义行内编辑地址URL
emptyrecords
当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。
ExpandColClick
true时，点击展开行的文字，treeGrid展开或收拢
ExpandColumn
指定用于张开treeGrid的列（名称来自colModel），未设置即用第一列。此项只有当treeGrid为true时有效.
如果设置为true时，将生成一个表脚行，列数等于colModel
如果设置为true，改变列宽，相邻列也将调整以适应整体表格，将不会出现水平滚动条。
表格的当前状态。有visible或hidden
设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件
是否设置表格组
表格高度。可为数值、百分比或auto
hiddengrid
如果设置为true，表格开始被隐藏，数据不被载入，只显示标题。当第一次点击显示/隐藏按钮显示表格，数据从服务器载入。
是否允许显示/隐藏按钮可用。只有标题不为空时可用。
表行是否有鼠标悬停效果
jsonReader
JSON数据结构数组
请求返回的总页数
排序的列号（0开始）
设置为true时，表格只一次读取服务器数据（使用适当datatype），之后，datatype 自动变为local ，所有进一步操作都在客户端完成，pager功能（若存在）将失效。
数据请求和排序时显示的文本
此项控制ajax进程进行时的动作。Disable&取消jqGrid的进程指示，可使用自定义的指示。 enable (缺省)&表格中间显示loading。 block & 显示&Loading&信息，禁用页面上的所有功能，直到数据装入完成。
定义提交类型POST或GET
此属性只有当multiselect为true时有效，定义多选时的组合键，可选值有： shiftKey ，altKey，ctrlKey
multiboxonly
此属性只有当multiselect为true时有效，. Multiboxonly设置为true时，只有点击checkbox时该行才被选中，点击其他列，将清除当前行的选中。
multiselect
此属性设为true时启用多行选择，出现复选框
multiselectWidth
若multiselect 为true时，定义多选列的宽度。
设置请求初始页的数量，此参数通过URL从服务器接受数据
定义分页浏览导航条。必须是一个HTML元素，如&div id="page"&&/div&
定义表格浏览导航条的位置，缺省情况下建立一个包括3部分的导航条：页码，导航按钮和记录信息。
定义导航激活时导航按钮是否显示。
定义导航栏是否有页码输入框。
当前页信息。第一个量为当前页，第二个量为总页数。
缺省情况下prmNames: { page:&page&,rows:&rows&, sort: &sidx&,order: &sord&, search:&_search&, nd:&nd&, npage:null} 以POST方式发送到服务器，字段为： page，rows，sidx，sord，search，nd 例如要将sidx改为mysort，可写成： prmNames: {sort: &mysort&}. 这样提交到服务器的字符串就变为： page=1&rows=10&mysort=myindex&sord=asc 若将一些参数设为null，这些参数将不再发往服务器。例如prmNames: { nd:null} 则nd参数将不被发送。 Npage参数参见scroll option.
此数组能直接传递到url。这个数组可使用这种形式{name1:value1&}。
只读属性。定义表格显示的行数。切勿与records混淆。
定义页中记录信息的位置，可以是left，center，right。
交替行的类
只读属性。定义从请求中获得的记录数
recordtext
可在页面上显示的提示信息，此文字只在viewrecords 为true是有效，并且当记录总数大于0时才显示。此文字中{}中的内容表示：{0} 该页显示的第一个记录的记录号{1} 该页显示的最后一个记录的记录号{2} 获得的记录总数
resizeclass
列可变大小时的类
用于改变显示行数的下拉列表框的元素数组。
rownumbers
若此属性为true，表格左侧将添加一用于显示行数（从1开始）的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。
表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意：若此参数设置为10，而服务器返回15条记录，将只有10条记录被装入。若此参数被设置为-1，则此检查失效
rownumWidth
当rownumbers为true时，定义显示行数的列的宽度。
只读属性。用于行编辑和单元格编辑保存数据之前
boolean or integer
创建动态滚动表格。当设为启用时，pager被禁用，可使用垂直滚动条来装入数据。
scrollOffset
定义垂直滚动条的宽度。
scrollrows
该项启用时，用setSelection 选定一行，表格将滚动到被选行可见。
只读属性。当multiselect 为true时，包含当前选定的行。此为一维数组，值为表格中选定行的ID。
只读属性。内容是最后选定行的ID。如火应用了排序或pagging，该值为null。
shrinkToFit
boolean or integer
该项描述计算每列相对于表格宽度的初始宽度的类型。若为true，并且设置了列宽度，则每列的宽度根据定义宽度缩放。若为false，并且设置了列宽度，表格宽度为设置宽度，列宽度不会重新计算，使用colModel中定义的值
启用此项，允许使用鼠标重新排序列。
从服务器读取XML或JSON数据时初始的排序名，此名被加到URL中。
从服务器读取XML或JSON数据时初始的排序类型，此类型被加到URL中。可选值为asc或desc。
设置为true，可使用子表格。启用子表格，将在基本表的左边将添加一列，并包含一个&+&图像，用户可以点击扩展行。
subGridModel
该属性用于描述子表格的模式，只有subGrid 为true时有效。它是一个用于描述子表格列的数组。
subGridType
用于定义子表格装入的数据类型，若不定义，则使用与父表格同样的数据类型。
subGridUrl
该属性用于定义子表格获得数据的URL。行的ID将键入此URL中，若要添加其他参数，可使用subGridModel 中的选项。
subGridWidth
定义子表格的列宽
该参数定义表格的工具栏。参数是一个包含两个值的数组，第一个值使工具栏有效，第二个值相对位置（可以是top、bottom、both）。例如：设置toolbar为 [true,&both&]，将在表格的头部和底部建立两个工具栏，两个工具栏位两个DIV元素，头部DIV元素的ID为&t_表格ID&，底部DIV元素的ID为&tb_表格ID&。若只有一个工具栏（top或bottom）时，DIV的ID为&t_表格ID&。
[false,'']
是否在表格上部显示分页条。
只读参数。用于记录装入XML和JSON数据的时间。
treedatatype
定义初始数据类型
启用（禁用）TreeGrid。
treeGridModel
定义TreeGrid的方法。可以是nested或adjacency。
此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}
treeReader
扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。
tree_root_level
确定treeGrid相对于根元素的级别。
请求数据的url地址
此数组保存请求的自定义信息，可随时使用
userDataOnFooter
到为true时， userData直接放置在页脚。
viewrecords
是否在浏览导航栏显示记录总数
viewsortcols
定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]。第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。第二个参数设定排序图标如何放置。vertical为垂直放置，horizontal为水平放置。第三个参数设定点击功能。True表示表头点击排序，false表示只点击排序图标排序。若将此参数设为false时，请确保第一个参数为true，否则将无法排序。
若为设置，表格的宽度为colModel 中定义的所有列宽度的总和。若设置了该项，每列的初始宽度按照shrinkToFit 设置的值
描述预期的XML数据结构的数组。
ColModel API
colModel属性以数组的形式定义各个表格列。这是jqGrid中很重要的部分。语法为：
&jQuery("#gridid").jqGrid({&...&&&&colModel:&[&{name:'name1',&index:'index1'...},&{...},&...&],&...&});&&
定义表格单元格（非表头）的对齐方式，可取值：left, center, right.
此属性用于定义列的类名，当有多个类名时，用空格间隔，例如：&class1 class2&。在表格的CSS中，有一个预定义的类ui-ellipsis用于定义特定的行
日期格式，可用/，-和.。作为间隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期
搜索字段的缺省值，此参数只用于自定义搜索是的初始值。
定义字段是否可编辑，用于单元格编辑、行编辑和表单模式
editoptions
根据edittype 参数定义可用的值数组
设置可编辑字段的补充规则
定义行编辑和表单模式的编辑类型，可以是text、textarea、select、checkbox、 password、button、image和file。
若设为true，即使shrinkToFit设置为true，列宽也不允许重新计算。GridWidth方法改变表格宽度时，列宽也不会改变。
formoptions
定义表单编辑的各种选项
若设置为true，该列将不出现在模式对话框中，用户可以此控制列的显示或隐藏
定义初始化时，列是否隐藏。
通过sidx参数设置排序时的索引名。
在未从服务器获得ID的情况下，该列可设置为行ID。只有一列可设置该属性，若出现多列，表格只采用将第一个设置了该属性的列，其他列忽略。
当colNames数组为空时，定义此列的标题。若colNames数组和此属性都为空，标题为该列的name属性值。
设置列在表格中的唯一名称，此属性是必须的。或者使用保留字subgrid、cb和rn.
定义是否可变列宽
定义是否可以排序
当datatype为local时，用于定义排序列类型。可取int/integer（整数）、float/number/currency（小数）、date（日期）、text（文本）
当设置为false时，鼠标滑向单元格时不显示title属性
设置列的初始宽度，可用pixels和百分比jqGrid选项&事件&方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
jqGrid选项&事件&方法
阅读已结束，如果下载本文需要使用
想免费下载本文？
你可能喜欢jquery之jquerygrid-subgrid - Ellan - ITeye技术网站
博客分类：
这些天一直在研究前台表格展示数据，之前的mutline也可以使用，但是在好奇心的驱使下，还是做了一些尝试！
首先看看做出来后的效果图
附上源码文件
subgrid.jsp
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&jquery grid&/title&
&link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" /&
&link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" /&
&link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" /&
&script src="js/jquery-1.4.2.min.js" type="text/javascript"&&/script&
&script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"&&/script&
&script src="js/jquery.layout.js" type="text/javascript"&&/script&
&script src="js/grid.locale-en.js" type="text/javascript"&&/script&
&script src="js/ui.multiselect.js" type="text/javascript"&&/script&
&script src="js/jquery.jqGrid.min.js" type="text/javascript"&&/script&
&script src="js/jquery.tablednd.js" type="text/javascript"&&/script&
&script src="js/jquery.contextmenu.js" type="text/javascript"&&/script&
&script src="subgrid.js" type="text/javascript"& &/script&
&script type="text/javascript"&
$(function(){
jQuery("#list11").jqGrid({
url:'subgrid.xml',
datatype: "xml",
height: 200,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{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: '#pager11',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid : true,
subGridUrl: 'subgridchid.xml',
subGridModel: [{ name
: ['No','Item','Qty','Unit','Line Total'],
width : [55,200,80,80,80] }
caption: "Subgrid Example"
jQuery("#list11").jqGrid('navGrid','#pager11',{add:false,edit:false,del:false});
&table id="list11"&&/table&
&div id="pager11"&&/div&
1 subgrid.xml
&?xml version="1.0" encoding="UTF-8"?&
&page&1&/page&
&total&1&/total&
&records&1&/records&
&row id='1'&
&cell&1&/cell&
&cell&2&/cell&
&cell&3&/cell&
&cell&4&/cell&
&cell&5&/cell&
&cell&6&/cell&
&cell&7&/cell&
&row id='2'&
&cell&2&/cell&
&cell&2&/cell&
&cell&3&/cell&
&cell&4&/cell&
&cell&5&/cell&
&cell&6&/cell&
&cell&7&/cell&
2 subgridchid.xml
&?xml version="1.0" encoding="UTF-8"?&
&page&1&/page&
&total&1&/total&
&records&1&/records&
&cell&5&/cell&
&cell&4&/cell&
&cell&3&/cell&
&cell&2&/cell&
&cell&1&/cell&
&cell&1&/cell&
&cell&2&/cell&
&cell&3&/cell&
&cell&4&/cell&
&cell&5&/cell&
PS：需要的JS包，可以到jQuery grid 官网下载
心得：
1.效果很不错，但是每次查看子项目的时候，都需要查询后台的数据！
2.即使不查后台数据，在第一次查询的时候，需要将文件大批量的写到文件里面。
3.如果能查询一次，然后从缓存中读取是最好的！
楼主 请教一下 使用subgrid的双击事件如何获取对应行的记录，我说的是加号打开后里面的行双击得到的行记录怎么获取...谢谢看API！
浏览: 77596 次
来自: 北京
getFileIO 时 in 对象为null
你试过你的代码吗？
请问，这个子表的数据，你是怎么和主表相关字段做对应的？比如，我 ...
这种方式 应该是抓不到的，百度指数使用了amf格式}