jqGrid学习--ColModel

合集下载

jqgrid 参数

jqgrid 参数jqgrid是一个基于jQuery的表格插件，它提供了强大的功能和灵活的参数配置，用于展示和处理数据。

下面将介绍常用的jqgrid参数以及它们的作用。

1. colModel：该参数用于定义表格的列模型，即每一列的配置信息。

每一个列都可以配置属性如下：- name：表示列的名称。

- index：表示在排序、搜索和导航中使用的列的名称。

如果不设置，默认等于name。

- width：表示列的宽度，可以设置为数字、百分比或自动根据内容调整宽度。

- sortable：表示该列是否可以排序，默认为false。

- search：表示该列是否可以进行搜索，默认为false。

- align：表示该列中内容的对齐方式，默认为left。

- formatter：表示自定义的格式化函数，用于对该列的数据进行特定的处理和展示。

2. colNames：该参数用于定义表格的列的显示名称，以数组的形式传入。

3. datatype：该参数定义了表格的数据类型，即数据的来源。

常用的取值有"local"和"json"。

- "local"表示数据由前端自身提供，通过data参数传入。

- "json"表示数据由后端通过ajax请求获取，通过url参数来指定请求的地址。

4. data：当datatype为"local"时，该参数用于传入表格的数据，以数组形式传入。

5. url：当datatype为"json"时，该参数用于指定请求数据的url地址。

6. rowNum：表示每页显示的行数，默认为20。

7. rowList：表示在分页选择框中可选择的行数，默认为[10, 20, 30]。

8. pager：表示表格的分页栏的容器元素的选择器。

分页栏用于显示页码，并提供跳转、刷新等操作。

9. caption：表示表格的标题。

jQueryjqGrid中ColModel的参数大全(详解带实例)(精)

jQuery jqGrid中 ColModel 的参数大全(详解带实例 (2012-03-28 10:53:46转载▼标签: jquery jqgrid colmodel的参数大全详解 demo 实例杂谈分类: WEB技术ColModel 是 jqGrid 里最重要的一个属性,设置表格列的属性。

用法:Java 代码jQuery("#gridid".jqGrid({...colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],...};属性数据类型备注默认值align string 定义单元格对齐方式;可选值:left, center, right. leftclasses string 设置列的 css 。

多个 class 之间用空格分隔, 如:'class1 class2' 。

表格默认的 css 属性是 ui-ellipsis empty stringdatefmt string 对日期列进行格式化。

” /” , ” -” , and ” . ” 都是有效的日期分隔符。

y,Y,yyyy 年 YY, yy 月 m,mm for monthsd,dd 日 . ISO Date (Y-m-ddefval string 查询字段的默认值空editable boolean 单元格是否可编辑 falseeditoptions array 对列进行编辑时设置的一些属性 empty arrayeditrules array 对于可编辑单元格的一些额外属性设置 empty arrayedittype string 可以编辑的类型。

可选值:text, textarea, select, checkbox, password, button, image and file. textfixed boolean 列宽度是否要固定不可变 falseformoptions array 对于 form 进行编辑时的属性设置 emptyformatoptions array 对某些列进行格式化的设置 noneformatter mixed 对列进行格式化时设置的函数名或者类型 nonehidedlg boolean 是否显示或者隐藏此列 falsehidden boolean 在初始化表格时是否要隐藏此列 falseindex string 当排序时定义排序字段名称的索引,参数名为 sidx empty stringjsonmap string 定义了返回的 json 数据映射 nonekey boolean 当从服务器端返回的数据中没有 id 时,将此作为唯一 rowid 使用,默认只能有一个 id 属性 falselabel string 如果 colNames 为空则用此值来作为列的显示名称,如果都没有设置则使用 name 值 nonename string 必输项, 表格列的名称, 所有关键字, 保留字都不能作为名称使用包括 subgrid, cb and rn. Requiredresizable boolean 是否可以被 resizable truesearch boolean 在搜索模式下,定义此列是否可以作为搜索列 truesearchoptions array 设置搜索参数 emptysortable boolean 是否可排序 truesorttype string 用在当 datatype 为 local 时,定义搜索列的类型,可选值:int/integer - 对 integer 排序 float/number/currency - 排序数字 date - 排序日期 text - 排序文本 text stype string 定义搜索元素的类型 textsurl string 搜索数据时的 url empty stringwidth number 默认列的宽度,只能是象素值,不能是百分比 150xmlmap string 定义当前列跟返回的 xml 数据之间的映射关系 noneunformat function ‘ unformat ’ 单元格值 null有一些参数当表格初始化完成后是不能被修改的:namewidthresizablelabel (method avail.例子:$("#grid1".xgrid({url:{url:'../data/json-grid-standard.htm',pageSize:'10',currentPage:'1'},// 列表数据colModel:[{"display":"序号","width":"20","align":"center","sortable":"false","name":"xuhao"},{"display":"登陆ID","width":32,"align":"center","sortable":"true","name":"LOGIN_ID"},{"display":"姓名 ","width":32,"align":"center","sortable":"true","name":"XM"}, {"display":"组织机构","width":32,"align":"left","sortable":"true","name":"ORG_ID"},{"display":"区域","width":32,"align":"center","sortable":"true","name":"REGION_ID"},{"display":"日期","width":32,"align":"center","sortable":"true","name":"DATE"},{"display":"是否删除","width":32,"align":"center","sortable":"true","name":"ISDEL","hide":"true"} ], //列表结构配置title:'列表控件 ',searchitems:[{"display":"登陆 ID","name":"LOGIN_ID"},{"display":"姓名 ","name":"XM"},{"display":"时间 ","name":"ORG_ID"},{"display":"日期 ","name":"DATE"},{"display":"区域代码 ","name":"REGION_DM"}],//列表中搜索的条件项width:800,callback:function({ alert('列表初始化完成后,执行回调 ' }, searchMode:true //搜索模式,初始化时不加载数据并隐藏列表};。

jqgrid-colmodel参数

ColModel APIcolModel 属性定义属性数组的单个网格列。

这是最重要的部分，在jqGrid 的。

语法：jQuery 的（“＃gridid” ）。

jqGrid 的（{ ...colModel ： [ { 名：“NAME1” ，指数：指数1 ... } ， { ... } ， ... ] ... } ） ;可用的colModel 属性都列在这里，按字母顺序排列。

只需要属性的名称。

colModel 选项可以获取或设置使用getColProp 和setColProp 1）方法- 方法。

Property Type 描述默认alignstring定义体层中的单元格的对齐方式，而不是在标题单元格。

可能的值：左，居中，右。

离开cellattrfunction 此功能属性添加到该单元格的创建过程中的数据-即动态。

例如，所有的有效属性的表格单元格可用于具有不同的属性或样式属性。

该函数返回字符串。

参数传递给这个函数的RowId -行的id 值 -值将被添加在细胞rawObject -原始的数据行的对象-即如果数据类型为JSON -阵列，如果数据类型是XML XML 节点。

厘米 -此列的所有属性列在colModel RDATA -行会被插入的数据行。

这个参数是数组类型的名称：值，其中的名称是在colModel 空classesstring 此选项允许将类的列。

如果一个以上的类将被使用的空间应该被设置。

例如类：1级2级的设置Class1和Class2在该列上的每一个细胞。

在网格中的CSS 有一个预定义类的UI省略号，允许附加的特定行的省略号。

此外，这也将在Firefox 。

空字符串datefmtstring 治格式的sorttype ：日期（当设置为本地datetype ）和editrules 日期：真正}字段。

确定的预期日期格式该列。

使用一个PHP 的日期格式。

目前支持“/”，“ - ”和“。

”作为日期分隔符。

jqgrid单元格中的onchange事件

在 jqGrid 中，可以使用 `onchange` 事件来监听单元格的值变化。

这个事件在编辑器中的值改变时触发。

你可以使用`editoptions` 对象的`dataEvents` 属性来绑定`change` 事件处理器。

下面是一个示例：
```javascript
$("#grid").jqGrid({
url: 'data.json',
editurl: 'clientArray',
//...
colModel: [
{ name: 'name', width: 100, editoptions: { dataEvents: [{ type: 'change', fn: function(e) {
alert('Value changed!');
} } ]}
},
//...
]
});
```
在这个例子中，当在名为 'name' 的列中进行编辑时，`change` 事件被触发，然后弹出一个消息框显示 'Value changed!'。

需要注意的是，此方法可以用于绑定到任何输入元素，不仅仅是文本框。

例如，如果你正在使用一个下拉列表或单选按钮，这个方法也可以工作。

只需确保在`editoptions` 对象中提供正确的`type` 值即可。

jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）

jQuery学习笔记——jqGrid的使⽤记录（实现分页、搜索功能）jqGrid 是⼀个⽤来显⽰⽹格数据的jQuery插件，通过使⽤jqGrid可以轻松实现前端页⾯与后台数据的ajax异步通信。

⼀、要引⽤的⽂件要使⽤jqGrid，⾸先页⾯上要引⼊如下css与js⽂件。

1、css<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />2、js <script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>⼆、使⽤要点说明1、获取值（1）、获取单个id获取⾏号，有这种⽅式：var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");但是经过实际验证，这种⽅式不可⾏，当选中⾏，再点击同⼀⾏会出现获取不到⾏号的情况。

最后先在js最外部定义⼀个变量selId，然后使⽤如下代码在选中⾏时赋值：onSelectRow: function (rowid, status) { selId = rowid; //给最外层的selId赋值 }（2）、获取多个选中⾏的idvar ids=$('#gridTable').jqGrid('getGridParam','selarrrow');其输出格式是逗号分隔的id，如：1,2,3,4,5（3）、获得所有⾏的ID数组var ids = $("jqgridtableid").jqGrid('getDataIDs');（4）、获取⾏数据如果想获取选择的⾏的数据，只要传⼊rowId即可，如下：var rowData = $('#gridTable').jqGrid('getRowData',rowId);⽽这个rowData是⼀个对象，如果要获取选择的⾏的这个对象的属性值，如name的值，需如下：var Name= ;（5）、获取单元格数据var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);（6）、设定⾏选中 //设定选中⾏,可设定多⾏选中： $("jqgridtableid").jqGrid('setSelection',id1); $("jqgridtableid").jqGrid('setSelection',id2);2、⾃定义分页、数据交互何谓⾃定义？就是允许你⽤你⾃⼰喜欢的js对象与后端做数据交互。

jqGrid表格插件——参数配置

pgbuttons boolean 是否显示翻页按钮 true NO
pginput boolean 是否显示跳转页面的输入框 true NO
pgtext string 页面信息，第一个值是当前页第二个值是总页数语言包 YES
reccount integer 只读属性，实际记录数，千万不能跟records 参数搞混了，通常情况下他们是相同的，假如我们定义rowNum=15，但我们从服务器端返回的记录为20即records=20，而reccount=15，表格中也显示15条记录。 0 NO
ajaxGridOptions object 对ajax参数进行全局设置，可以覆盖ajax事件：error，complete 和 beforeSend 空值是
ajaxGridOptions object 对ajax参数进行全局设置空值是
ajaxSelectOptions object 对ajax的select参数进行全局设置，设置editoptions跟searchoptions 参数的select属性值空值是
edittext string 编辑按钮上文字空
edittitle string 当鼠标移到编辑按钮上出现的提示信息编辑所选择的行
position string 定义按钮位置，可选值left, center and right. left
refresh boolean 是否启用刷新按钮，当点击刷新按钮时会触发trigger(“reloadGrid”)事件，而且会清空搜索条件值 true
事件名参数说明
onPaging pgButton 当点击翻页按钮但还为展现数据时触发此事件，当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值： first,last,prev,next

jqGrid 参数

1.0 colModel : 要呈现字段的属性设置1.1 align：定义数据相对单元格的对齐方式.string left1.2 datefmt: 日期格式，string Y-m-d1.3 editable: 定义字段是否可编辑boolean false1.4 defval : 搜索字段的默认值,(只用于自定义搜索) string empty1.5 edittype: 该字段控件类型(text, textarea, select, checkbox, password, button, image , file) string text1.6 surl:只有在自定义搜索和edittype属性为select和描述的url得到select 的element% string empty1.7 editoptions:针对edittype配置的控件类型的属性设置array empty array1.7.1 value: 依据edittype，配置属性%（详见: editoptions的value配置）mixed none1.7.2 dataUrl:这个属性只适用与edittype属性为select (指定select的数据源edittype:"select",e ditoptions:{dataUrl:'test.txt', defaultValue:'Intime'}) string empty1.7.3 dataInit:当控件被创建时仅触发1次function null1.7.4 dataEvents: 给当前控件追加事件处理% array empty array1.7.5 defaultValue:默认值(可以是函数返回值) mixed none1.7.6 其他:可设置控件的任何有效属性editoptions:{size:10,maxlength:8}mixed none1.8 editrules: 设置编辑字段的控件的规则array empty array1.8.1 edithidden:该字段隐藏时, 此属性可以控制是否可编辑boolean false1.8.2 required:是否验证空数据boolean false1.8.3 number:是否验证数字boolean false1.8.4 integer:是否验证整数boolean false1.8.5 minValue:验证最小值number(integer) empty1.8.6 maxValue:验证最大值number(integer) empty1.8.7 email:是否验证email boolean false1.8.8 url:是否验证是有效的网址boolean false1.8.9 date:是否验证日期boolean false1.8.10 time:是否验证时间boolean false如果此字段不是必填,如果填了才验证是否是email 那么应该配置email:true, required:false 1.9 formoptions:设置该字段相对表单中的相关设置array empty array1.9.1 elmprefix:如果设置,则会在控件前面出现该设置string empty1.9.2 elmsuffix:如果设置,则会在控件后面出现该设置string empty1.9.3 label: 如果设置,则会替换colNames设置的名称string empty1.9.4 rowpos:设置该字段所在行的位置,从1开始计数number empty1.9.5 colpos:设置该字段所在列的位置,从1开始计数number empty1.10 formatoptions:设置特定列的格式,覆盖语言文件的默认值array empty array1.11 formatter:指定formatoptions设置格式的类型mixed none1.11.1 integer:当formatter指定为此属性时, formatoptions可以设置以下属性.1.11.1.1 thousandsSeparator: 每千位分隔符string empty1.11.1.2 defaulValue:在没有数据的情况下的默认值string empty1.11.2 number: 当formatter指定为此属性时, formatoptions可以设置以下属性.1.11.2.1 decimalSeparator: 小数位分隔符string empty1.11.2.2 thousandsSeparator:每千位分隔符string empty1.11.2.3 decimalPlaces:小数位数string empty1.11.2.4 defaulValue:在没有数据的情况下的默认值string empty1.11.3 currency: 当formatter指定为此属性时, formatoptions可以设置以下属性.1.11.3.1 decimalSeparator: 小数位分隔符string empty1.11.3.2 thousandsSeparator: 每千位分隔符string empty1.11.3.3 decimalPlaces: 小数位数string empty1.11.3.4 defaulValue: 在没有数据的情况下的默认值string empty1.11.3.5 prefix:在数据前面添加的文本比如货币符号”$” string empty1.11.3.6 suffix: 在数据后面添加的文本比如货币符号”$” string empty1.11.4 date: 当formatter指定为此属性时, formatoptions可以设置以下属性.1.11.4.1 srcformat:原格式string empty1.11.4.2 newformat:新的输出格式string empty1.11.5 email: 当formatter指定为email类型,直接使这个email加href string empty 1.11.6 link: 当formatter指定为此属性时, formatoptions可以设置以下属性.1.11.6.1 target:默认为empty如果设置,则创建一个以单元格的值和target属性的链接string empt y1.11.7 showlink: 当formatter指定为此属性时, formatoptions可以设置以下属性.1.11.7.1 baseLinkUrl:链接. string empty1.11.7.2 showAction:附加值,在baseLinkUrl后面 . string empty1.11.7.3 addParam:额外参数. string empty1.11.7.4 target:如果设置,增加1条附加属性. string empty1.11.7.5 idName:是第1个参数,之后由showAction补充,默认情况下,这是id string empty1.11.8 checkbox: 当formatter指定为此属性时, formatoptions可以设置以下属性.1.11.8.1 disabled:默认true禁止改变状态,如果设置为false是可以改变的boolean1.11.9 select: 当edittype ,formatter指定为此属性时, editoptions:{value:"1:One;2:Two"}值是1,2显示的则是one,two string emptycolModel:[{name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLink Url:'myrul.php', addParam: '&action=edit', idName:'myid'}, ...}将会得到http://localhost/myrul.php?myid=123&action=edit1.12 unformat:可以为formatter指定自定义格式的方法function null1.13 hidedlg:如果设置为true在显示/隐藏字段功能中，该字段将不会出现% boolean false1.14 hidden:该字段是否隐藏boolean false1.15 index:排序时, sidx的参数string empty1.16 jsonmap:定义json映射这个字段时的json字符串string empty1.17 xmlmap:定义xml文件映射这个字段时的xml字符串string empty1.18 key:如果服务器端没有定义id,可以设置字段为行号,只有一个字段可以设置此属性,只认可第1个,其他的将被忽略. boolean false1.19 name:设置此字段的唯一名称,此属性是必须要设置的, string empty1.20 label:当colNames为空,则标题显示此设置.如果colNames数组和此设置同时为空,则标题显示n ame属性. string empty1.21 resizable:设置此字段是否可编辑boolean true1.22 search:该字段是否允许搜索(查询) boolean true1.23 stype:设置搜索时的数据类型string text1.24 searchoptions:配置搜索选项array empty array1.24.1 dataUrl:该属性只适用于stype:’select’string empty1.24.2 dataInit:等同于editoptions的dataInit function null1.24.3 dataEvents:等同于editoptions的dataEvents array empty array1.24.4 attr:可以设置创建的元素的有效属性object null1.24.5 searchhidden:该字段隐藏时,此属性可控制是否可搜索boolean false1.24.6 defaultValue:默认值string empty1.24.7 sopt:比较运算符,可任意组合('eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc') array empty array等于eq =不等于ne <>小于lt <小于等于le <=大于gt >大于等于ge >=以*开头bw like不以*开头bn not like在in in不在ni not in以*结尾ew like不以*结尾en not like包含cn like不包含nc not like1.25 sortable:设置该字段是否进行排序boolean true1.26 sorttype:排序的数据类型string text1.27 width:宽度,不能设置百分比number 1502.0 navGrid:功能按钮(增删改查,搜,刷新)设置2.1 top:距离顶端的象素number(integer) 02.2 left:距离左边的象素number(integer) 02.3 width:宽度number(integer) 3002.4 height:高度number(integer) auto2.5 dataheight:表单内容距离按钮高度number(integer) auto2.6 modal: 是否模态窗体boolean false2.7 drag:是否可拖动boolean true2.8 resize: 是否可改变大小boolean true2.9 url:提交的URL,如果设置则替换editurl string empty2.10 mtype:请求类型post | get string post2.11 editData:提交到服务器的数据array empty array2.12 recreateForm:每次操作是否创建新的表单boolean false2.13 jqModal: 设置为true使用存在的jqModal插件的对话框。

Jqgrid入门-使用模态对话框编辑表格数据（三）

u 010869338的专栏J qgrid入门-使用模态对话框编辑表格数据(三)2013-07-01 11:00 203人阅读评论(0) 收藏举报 Jqgrid是一个强大的表格插件，它提供了多种方式来编辑数据。

这三种方式分别是： Cell Editing——只允许修改某一个单元格内容Inline Editing——允许在jqGrid中直接修改某一行的数据Form Editing——弹出一个新的编辑窗口进行编辑和新增在我做的DEMO中，主要运用的是第三种，弹出一个新窗口来编辑数据。

如果想用其它两种方式可以参考官网。

相比较之前的例子，这个例子最重要的变化是添加了一个id为consoleDlg的<div>块。

在jquery的ready方法里面我将初始化div生成为一个模态对话框，用作编辑数据的界面。

这个用到了jquery ui的dialog。

关于如何使用dialog，参考这篇文章就ok了。

这是主要的js代码。

1 2 3 45 6 7 8 9 // 配置模态对话框$("#consoleDlg").dialog({ autoOpen : false, // 是否自动弹出窗口 modal : true, // 设置为模态对话框resizable : true,width : 500,height : 300,position : "center" // 窗口显示的位置});那么我们通过什么方式来打开这个窗口呢？细心的朋友们可以发现我在前面的文章一的截图中，表格的最前面新增了一列操作栏。

这个操作栏主要是通过Jqgrid的gridComplete方法来实现的。

当表格所有数据都加载完成而且其他的处理也都完成时触发此事件。

1 2 3 4 56 7 8 9 10 11 12 1314 15 16 gridComplete : function() {var ids = jQuery("#gridTable").jqGrid('getDataIDs'); for ( var i = 0; i < ids.length; i++) { var cl = ids[i]; update = "<input type='button' value='修改' onclick='updateStu("+ cl + ")'/> ";del = "<input type='button' value='删除' onclick='deleteStu("+ cl + ")'/> ";view = "<input type='button' value='查看' onclick='viewStu(" + cl + ")'/>"; jQuery("#gridTable").jqGrid('setRowData', ids[i], {process : update + del + view});}},从这段代码我们可以看出，我们使用这个方法先获得表格所有列的id，然后在每一列中追加了三个按钮。

jqgrid-colmodel参数-英文

ColModel API The colModel property defines the individual grid columns as an array of properties. This is the most important part of the jqGrid. Syntax: jQuery ("#gridid").jqGrid ({...colModel : [ {name :'name1', index :'index1'...}, {...}, ... ],...});The available colModel properties are listed here, in alphabetic order. The only required property is name. The colModel options can be get or set using getColProp andsetColProp 1) methods - See methods . PropertyType Description Default align string Defines the alignment of the cell in the Body layer, not in header cell. Possible values:left, center, right.left cellattr function This function add attributes to the cell during the creation of the data - i.e dynamically. By example all valid attributes for the table cell can be used or a style attribute with different properties. The function should return string. Parameters passed to this function are: rowId - the id of the row val - the value which will be added in the cell rawObject - the raw object of the data row -i.e if datatype is json - array, if datatype isxml xml node.cm - all the properties of this column listedin the colModelrdata - the data row which will be inserted inthe row. This parameter is array of typename:value, where name is the name in colModelnullclasses string This option allow to add classes to the column.If more than one class will be used a spaceshould be set. By example classes:'class1class2' will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow toattach ellipsis to a particular row. Also thiswill work in FireFox too.empty stringdatefmtstring Governs format of sorttype:date (when datetypeis set to local) and editrules {date:true} fields. Determines the expected date format for that column. Uses a PHP-like date formatting. ISO Date (Y-m-d)Currently ”/”, ”-”, and ”.” are supported as date separators. Valid formats are:y,Y,yyyy for four digits yearYY, yy for two digits yearm,mm for monthsd,dd for days.See Array Datadefval string The default value for the search field. Thisoption is used only in Custom Searching andwill be set as initial search.emptyeditable boolean Defines if the field is editable. This option isused in cell, inline and form modules.See editingfalseeditoptions array Array of allowed options (attributes) foredittype option editingemptyarrayeditrules array sets additional rules for the editablefield editingemptyarrayedittype string Defines the edit type for inline and formediting Possible values: text, textarea, select, checkbox, password, button, image and file. Seealso editingtextfirstsortorder string If set to asc or desc, the column will be sortedin that direction on first sort.Subsequent sortsof the column will toggle as usualnullfixed boolean If set to true this option does not allowrecalculation of the width of the column ifshrinkToFit option is set to true. Also thewidth does not change if a setGridWidth methodis used to change the grid width.falseformoptions array Defines various options for form editing.See Form optionsemptyformatoptions array Format options can be defined for particular columns, overwriting the defaults from thelanguage file. See Formatter for more details.noneformatter mixed The predefined types (string) or custom function name that controls the format of this field.See Formatter for more details.nonefrozen boolean If set to true determines that this column willbe frozen after calling the setFrozenColumnsmethodfalsehidedlg boolean If set to true this column will not appear inthe modal dialog where users can choose whichcolumns to show or hide. See Show/Hide Columns.falsehidden boolean Defines if this column is hidden atinitialization.falseindex string Set the index name when sorting. Passed as sidx parameter.emptystringjsonmap string Defines the json mapping for the column in the incoming json string. See Retrieving Datanonekey boolean In case if there is no id from server, this canbe set as as id for the unique row id. Only onecolumn can have this property. If there are morethan one key the grid finds the first one andthe second is ignored.falselabel string When colNames array is empty, defines theheading for this column. If both the colNamesarray and this setting are empty, the headingfor this column comes from the name property.nonename string Set the unique name in the grid for the column.This property is required. As well as otherwords used as property/event names, the reservedwords (which cannot be used for names) includesubgrid, cb and rn.Requiredresizable boolean Defines if the column can be re sized truesearch boolean When used in search modules, disables or enables searching on that column. Search Configurationtruesearchoptions array Defines the search options usedsearching Search Configurationemptysortable boolean Defines is this can be sorted. truesorttype mixed Used when datatype is local. Defines the type ofthe column for appropriate sorting.Possiblevalues:int/integer - for sorting integerfloat/number/currency - for sorting decimalnumbersdate - for sorting datetext - for text sortingfunction - defines a custom function forsorting. To this function we pass the value tobe sorted and it should return a value too.See Array Datatextstype string Determines the type of the element whensearching. See Search Configurationtextsurl string Valid only in Custom Searching and edittype :'select' and describes the url from where we canget already-constructed select elementemptystringtemplate object Set of valid properties for the colModel. Thisoption can be used if you want to overwrite alot of default values in the column model witheasy. See cmTemplate in grid optionsnulltitle boolean If this option is false the title is notdisplayed in that column when we hover a cellwith the mousetruewidth number Set the initial width of the column, in pixels.This value currently can not be set as150As mentioned above the options in colModel can be get or sfunction are: rowId - the id of the rowval - the value which will be added in the cellrawObject - the raw object of the data row - i.e if datatype is json - array, if datatype is xml xml node.cm - all the properties of this coumn listed in the colModelrdata - the data row which will be inserted in the row. This parameter is array of typename:value, wher name is the name in colModel et usitemplateng the methods getColProp and setColProp. Below are options which can not be changed dynamically when the grid is constructed (If changed they do not have effect or will cause the grid errors). For some of these options there are methods available to change the value.▪name▪width▪resizable▪label (method avail.)1) Some methods require that you include in your download the so named custom module DiscussionAri Maniatis, 2010/01/14 14:02Setting label to '' (empty string) does not work to clear the heading. It needs to be ' ' (a single space) at the very least.Sumon Chowdhury, 2010/07/30 08:49Zahar, 2011/03/29 14:12Hello, I'm using grid with a list of JSON objects. Some objects has subobjects - for example,Letter = {LetterId: 4,IncomingNumber: 'lolol',Organization: {OrganizationName: 'foo',OrganizationId: 11235}}it's colModel looks like:colModel: [{ name: 'LetterId', index: 'LetterId', width: 25 },{ name: 'IncomingNumber', index: 'IncomingNumber', width: 100 },{ name: 'anizationName', index: 'anizationName', width: 255, sortable: true },//...and so onOne day I wanted to add sorting to my grid. And what I've found: if the column name contains a point ('.') it cannot be sortable despite of “sortable: true” option. Option index does not affect this.Removing point from value of 'name' brings sortability, but how to get data from subfields? (anizationName)Am I doing something wrong? :)Sorry for bad EnglishZahar, 2011/03/30 08:39So, some debugging shows that this column names are used in forming some HTML element id's. Such as<th class=“ui-state-default ui-th-column ui-th-ltr” role=“columnheader”id=“Letters_anizationName” …and it's children div has an id, also containing dots ('.'). And query like $(”#id.with.dots”) will give us nothing, even if we have an element with such id.Zahar, 2011/03/30 09:39Oh, yeah! I've changed line 1976 of grid.base.js fromthead += ”<th id='”+ts.p.id+“_”+ts.p.colModel[i].name + … to thead += ”<thid='”+ts.p.id+“_”+ts.p.colModel[i].name.replace(/\./g, “_”) + …And it worx! But, i don't know, if it can affect somthing else :)Dave, 2011/05/12 07:26Hey I have had the same problem, but I decided to rearranged my JSON so their are no subObjects. But I can see how this method would not always be a valid solution. I think your name.replace(/\./g, “_”) is brilliant and if it do esn't have any side effects then it should be implemented by Jqgrid.You should bring it to their attention. Nice work.Dave.Kandeeban, 2012/01/02 20:05Hi all,I have a question can we have multiple file upload in grid?laurence, 2012/01/30 00:05Hello,I've got a problem with my grid. I need to tape phonetic character in my input column. My JSP is encoding with UTF-8 and when I load my data the display is good. The problem is when I tape my data. I've hadajaxGridOptions:{contentType: 'application/json; charset=UTF-8} in my grid property.When I save my record the character aren't saved in the good charset ! Any idea ? Thank. Lolo1367Patricia, 2012/03/09 16:10Hello, I need to include quite long table headers, so I would rather them being showed in two lines. Is there any option to do this? Thanksjsnbill, 2012/06/27 11:32Hi, there are two columns(column1 and column2) in jqgrid, the columns' edittype are select. I want to do this: when I select column1 , the content of column2 is changing . How can I do? thanks.dorian cuentas, 2012/07/05 16:53Hy all, is there a way to specify tablemodel from json object… i trying to define a java class that should have all properties of a table and use that “tablemodel” to define a grid, it could be done?。

jqGrid排序的两种实现方式

jqGrid排序的两种实现⽅式实现⽅案⼀客户端实现排序：jqGrid属性 loadonce:true时，所有数据加载在客户端，点击列标题由jqGrid在客户端⾃动排序，不再从服务器取值。

参考⽂件：ccMxCxTjCc.jsjs设定：jqGrid的设定：colModel: [{.....name: ‘zykj‘,sortable: true,},......}],......loadonce:true, //⼀次加载全部数据到客户端，由客户端进⾏排序。

sortable: true,sortname: ‘zykj‘, //设置默认的排序列sortorder: ‘asc‘,实现⽅案⼆：sql排序在Model层加⼊，需要⽣成setter、getter⽅法。

// sidx和sord是jqGrid存在的变量，接受列点击之后传过来的值。

/** sord代表排序规则(asc、desc)*/private String sord;/*** sidx代表排序的列名*/private String sidx;/*** sord代表排序规则(asc、desc)* @return sord*/public String getSord() {return sord;}/** 设置 sord代表排序规则(asc、desc)* @param sord*/public void setSord(String sord) {this.sord = sord == null ? null : sord.trim();}/*** 获取 sidx代表排序的列名* @return 获取sidx代表排序的列名*/public String getSidx() {return sidx;}/*** 设置 sidx代表排序的列名* @param sidx*/public void setSidx(String sidx) {this.sidx = sidx == null ? null : sidx.trim();}jqGrid：colModel：sortable: true,sortable: true,jqGrid属性：sortable: true,sortname: ‘zykj‘, //设置默认的排序列sortorder: ‘asc‘,loadonce:false, //⼀次加载全部数据到客户端，由客户端进⾏排序。

JQgrid表格的使用

JQgrid表格的使⽤html部分：<div class="tab"><table id="datatable"></table><div id="pager2"></div></div>js部分：$(document).ready(function(){var tableWidth = $("#datatable").parent().innerWidth();$("#datatable").jqGrid({url:'${basePath}/boxController/list',datatype: "json",mtype: "POST",width: tableWidth,height: 350,autowidth:true,editable: true,shrinkToFit:true,colNames:['','柜号','箱编号','','箱类型','箱门名称','⼀箱多卡','固定箱门','物品状态','开关状态','箱门状态','操作'],colModel:[{name:"terminalid",index:"terminalid",align:'center',width:90,sortable:false,hidden:true},{name:"displayname",index:"displayname",align:'center',width:90,sortable:false},{name:"boxid",index:'boxid',align:'left',width:100,sortable:false},{name:"boxtypecode",index:"boxtypecode",align:'center',width:50,sortable:false,hidden:true},{name:"boxtypename",index:"boxtypename",align:'center',width:50,sortable:false,hidden:false},{name:"dispalyname",index:"dispalyname",frozen:true,align:'left',width:90,sortable:false},{name:"oneboxmorecard",index:"oneboxmorecard",align:'center',width:90,sortable:false,formatter:function(el,options,rowData){ if(el==1){return '是';}else{return '否';}}},{name:"fixedbox",index:'fixedbox',align:'center',width:80,sortable:false,formatter:function(el,options,rowData){if(el==0){return '不限制';}else if(el==1){return '⼀箱⼀卡';}else{return '其他限制';}}},{name:"article",index:'article',align:'center',width:70,sortable:false,formatter:function(el,options,rowData){if(el==0){return "正常";}else if(el==1){return "锁定";}else{return "故障";}}},{name:"open",index:'open',align:'center',width:100,sortable:false,formatter:function(el,options,rowData){if(el==0){return "开启";}else if(el==1){return "关闭";}else{return "故障";}}},{name:"status",index:"status",align:'center',width:90,sortable:false,formatter:function(el,options,rowData){if(el==0){return "正常";}else if(el==1){return "锁定";}else{return "故障";}}},{name:"",index:'',align:'center',width:70,formatter:function(el,options,rowData){var d= '<input type="button" value="删除" onclick="delRepository(\''+rowData.terminalid+'\',\''+rowData.boxid+'\')"style="width:30px;float:right;margin-right:5px;"/>';var u= '<input type="button" value="修改" onclick="addMakeCard(\'修改类型\',\'修改\','+ options.rowId +')"style="width:30px;float:right;margin-right:10px;"/>';return u+d;}}],sortable: false,rowNum:10,rownumbers:false,multiselect: true,jsonReader: {repeatitems : false,id:"0"},pager: '#pager2',rowList:[10,15,20],toppager:true,sortname: 'rechargenumber',sortorder: 'desc',viewrecords: true,ondblClickRow:function(rowid){RowData= (this).jqGrid("getRowData", rowid);if(RowData.terminalid){list('查看',RowData.terminalid); //双击查看⽅法}},});$("#datatable").jqGrid("navGrid", "#pager2", {cloneToTop:true,// 克隆页⾯底层按钮到表顶端search:false,//隐藏查询按钮edit:false,//隐藏编辑按钮searchfunc:openDialog4Searching,searchtext:"查询",addfunc : openDialog4Adding, // (1) 点击添加按钮，则调⽤openDialog4Adding⽅法addtext:"新增",editfunc : openDialog4Updating, // (2) 点击添加按钮，则调⽤openDialog4Updating⽅法edittext:"修改",delfunc : openDialog4Deleting, // (3) 点击添加按钮，则调⽤openDialog4Deleting⽅法deltext:"删除",alerttext : "请选择需要操作的数据⾏!" // (4) 当未选中任何⾏⽽点击编辑、删除、查看按钮时，弹出的提⽰信息 });});var openDialog4Adding = function(title,okValue,row) {};var openDialog4Updating= function(title,okValue,row) {}var openDialog4Deleting= function(title,okValue,row) {var col=$("#datatable").jqGrid('getRowData',row);//获取单⾏数据var ids = $("#datatable").jqGrid("getGridParam", "selarrrow");//获取多⾏数据}var openDialog4Searching = function(title,okValue,row) {}。

jQueryGrid入门指南（2）

jQueryGrid⼊门指南（2）上周以为已经把jqgrid 表格这部分已经搞得差不多了，没想到在实际⽤的时候，出现了不少问题，重新把这块知识整理⼀下。

问题⼀：设置表格的⾃动刷新问题的原因：使⽤表格⾃带的增删改查的功能，编辑完数据后表中数据会刷新。

但是⼿写⽅法修改数据，例如模态框，修改完成后并不会在表中进⾏数据的刷新。

解决的办法：在请求发送之后，模态框关闭之前使⽤jqgrid的reloadGrid。

$("#jqGrid").trigger("reloadGrid");问题⼆：表中⽇期的显⽰格式问题的原因：当数据库中的字段是date类型时，直接将数据加载到表格中，显⽰得是⼀串数字，为时间的毫秒值。

解决的办法：给字段后追加时间转换的⽅法{ label: '⽇期', name: 'birthday' ,align: 'center',editable: true, formatter:dateConvert }, 编写dateConvert⽅法function dateConvert(cellvalue){var times= new Date(cellvalue) ;date = times.toLocaleString();return date;}问题三：设置表中每⾏交替显⽰样式不同问题的原因：在设置表格的属性altRows:true 后，表格的样式并没有发⽣改变解决的办法：在添加altRows:true属性之后，还需要设置altclass来规定需要交替显⽰得样式altRows: true, //设置⾏交替样式altclass: 'differ', //⼿动写的交替的样式.differ{background-color: #DDDDDC;}问题四：表格完成响应式问题的原因：这个问题本来已经在上⼀篇博客中得到了解决，可是⼜发现了⼀个新的问题，就是当表格的列数⽐较多时，表格中不会出现滚动条，⼿动调整窗⼝⼤⼩时才会出现。

jqgrid用法

jqGrid是一个强大的jQuery插件，用于创建分页、排序、过滤和编辑的表格。

以下是一些jqGrid的基本用法：1. 创建表格：```javascript$("#grid").jqGrid({url: 'data.json', // 数据源URLdatatype: 'json', // 数据类型colModel: [ // 列模型{ name: 'id', key: true },{ name: 'name' },{ name: 'email' }],pageNumber: 1, // 初始页面号pageSize: 10, // 初始页面大小ajaxGridOptions: { cache: false }, // 配置Ajax请求选项 serializeGridData: function (postData) {return JSON.stringify(postData);},loadComplete: function () {// 在数据加载完成后执行的回调函数},loadError: function (jqXHR, textStatus, errorThrown) { // 在数据加载出错时执行的回调函数}});```2. 添加行：```javascript$("#grid").jqGrid('addRowData', rowId, data);```3. 编辑行：```javascript$("#grid").jqGrid('editRow', rowId, true); // true表示保存更改```4. 删除行：```javascript$("#grid").jqGrid('delRowData', rowId);```5. 刷新表格：```javascript$("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');```6. 自定义排序：```javascript$("#grid").jqGrid('sortGrid', 'name', true); // 按名称排序，true表示升序排序```7. 自定义分页：```javascript$("#grid").jqGrid('setGridParam', { pageNumber: 2, pageSize: 10 }); // 设置页面号和页面大小```。

Jquery Jqgrid使用手册

一、jqGrid学习jqGrid学习之------------- 安装jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。

按照官网文档：*/myproject/css/oui.jqgrid.csso/ui-lightness/+/images/+jquery-ui-1.7.2.custom.css*/myproject/js/o/i18n/+grid.locale-bg.js+list of all language files+….oChanges.txtojquery-1.3.2.min.jsojquery.jqGrid.min.js目录结构如上。

在页面中写法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/src/grid.loader.js" type="text/javascript"></script></head><body>...</body></html>需要说明的是，jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加上一段style来指定页面上文字大小。

jqGrid各种参数详解

jqGrid各种参数详解jqGrid 各种参数详解JQGridJQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。

JQGrid Demo是一个在线的演示项目。

在这里，可以知道jqgrid 可以做什么事情。

下面是转自其他人blog的一个学习资料，与其说是学习资料，说成查询帮助文档更加合适。

jqGrid学习之 ------------- 安装jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。

按照官网文档:/myproject/css/ui.jqgrid.css/ui-lightness//images/jquery-ui-1.7.2.custom.css/myproject/js//i18n/grid.locale-bg.jslist of all language files….Changes.txtjquery-1.3.2.min.jsjquery.jqGrid.min.js在页面中写法：Java代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href ="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href ="js/src/css/ui.jqgrid.css" /><link rel="stylesheet" type="text/css" media="screen" href ="js/src/css/jquery.searchFilter.css" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/src/grid.loader.js" type="text/javascript"></s cript></head><body>...</body></html>需要说明的是，jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加上一段style来指定页面上文字大小。

jQueryjqGrid中ColModel的参数大全(详解带实例)(精)

多个 class 之间用空格分隔, 如:'class1 class2' 。

表格默认的 css 属性是 ui-ellipsis empty stringdatefmt string 对日期列进行格式化。

” /” , ” -” , and ” . ” 都是有效的日期分隔符。

JQGrid的用法解析（列编辑,添加行,删除行）

JQGrid的⽤法解析（列编辑,添加⾏,删除⾏）复制代码代码如下:<script>$(document).ready(function(){initPlsfList();});//初始化grid列表function initPlsfList(){//缓存表列数组,key 为页⾯元素的name ，value 对应数据库中的字段var cellArray = new Array();cellArray["zoneID"] ="ZONE_ID";cellArray["factorPG"] ="FACTOR_PG";cellArray["factorQG"] ="FACTOR_QG";cellArray["factorPL"] ="FACTOR_PL";cellArray["factorQL"] ="FACTOR_QL";cellArray["valid"] ="VALID";var caseID = '${caseID}';$("#plsfList").jqGrid({url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",datatype: "json",mtype:"POST",height: "auto",width: "auto",colNames:['id',"<fmt:message key='case.valid'/>","<fmt:message key='zone'/>","<fmt:message key='pasf'/>","<fmt:message key='pisf'/>","<fmt:message key='lasf'/>","<fmt:message key='lisf'/>",'modeID'],colModel:[{name:'id',index:'id', width:100,hidden:true},{name:'valid',index:'valid', width:100,editable:true,formatter:formatValid,editable:true,edittype:'checkbox',editoptions:{value:'1:0',defaultValue:'1'}},{name:'zoneName',index:'zoneName', width:150,editable:true},{name:'factorPG',index:'factorPG', width:100,editable:true},{name:'factorQG',index:'factorQG', width:100,editable:true},{name:'factorPL',index:'factorPL', width:100,editable:true},{name:'factorQL',index:'factorQL', width:100,editable:true},{name:'caseID',index:'caseID', width:100,hidden:true},],rowNum:10,rowList:[10,20,30],pager: '',cellEdit:true,viewrecords: true,jsonReader: { repeatitems : false, id: "id" },viewsortcols:[false,'horizontal',false],sortable:false,sortorder:"asc",sortname:"id",multiselect: true,cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",cellsubmit: 'remote',gridComplete: function() {var $selecAll = $("#cb_plsfList");var cb_title = "<fmt:message key='select.all' bundle='${commonResources}'/>" ;if($selecAll){$selecAll.attr("title",cb_title);}//设置全选checkbox titlevar rowIds = jQuery("#plsfList").jqGrid('getDataIDs');for(var k=0; k<rowIds.length; k++) {var curRowData = jQuery("#plsfList").jqGrid('getRowData', rowIds[k]);var curChk = $("#"+rowIds[k]+"").find(":checkbox");//curChk.attr('title', curRowData.modeName); //给checkbox赋予额外的属性值}},onSortCol:function(index,iCol,sortorder){return false ;},ondblClickRow: function (rowid,iRow,iCol,e) {/*var $plsfList = $("#plsfList");if (isRowNeedSave($plsfList)){showMessage("请先保存");}else{$("#operate").val("update");newrowid = rowid ;$plsfList.setGridParam({cellEdit:false});$plsfList.jqGrid('editRow', rowid, true);//确定按钮可⽤$("#confirm_btn").attr("disabled",false);}*/},beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){//列提交前的拦截⽅法var $plsfList = $("#plsfList") ;var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>' ;//设置列提交的url。

Jqgrid入门-操作表格的数据（二）

Jqgrid⼊门-操作表格的数据（⼆）上⼀篇中，Jqgrid已经可以从服务端获得数据，并显⽰在Grid表格中了。

下⾯说⼀下，如何操作表格及其数据。

jqGrid有很多⽅法函数，⽤来操作数据或者操作Grid表格本⾝。

jqGrid的⽅法有两种调⽤⽅式：$(“#grid_id”).jqGridMethod( parameter1,…,parameterN );或者$(“#grid_id”).jqGrid(‘method’, parameter1,…,parameterN );⾸先介绍⼀下Jqgrid的⼏个最常⽤的⽅法函数，具体的⽅法API也可以参考⽂档（。

1. getGridParam这个⽅法⽤来获得jqGrid的选项值。

它具有⼀个可选参数name，name即代表着jqGrid的选项名，如果不传⼊name参数，则会返回Jqgrid整个选项options。

例如：1 2 3 4 5 6var id = $("#gridTable").jqGrid("getGridParam", "selrow"); //获得选中⾏的IDvar sort = $("#gridTable").jqGrid("getGridParam", "sortname"); //获得排序的字段var page = $("#gridTable").jqGrid("getGridParam", "page"); //获得当前的页数var row = $("#gridTable").jqGrid("getGridParam", "rowNum"); //获得当前页的⾏数var count = $("#gridTable").jqGrid("getGridParam", "records"); //获得总记录数var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多选时，返回选中⾏的ID2. getRowData这个⽅法⽤来获得某⾏的数据。

jqgrid学习

一、主要API接口getGridParam、setGridParam：getGridParam方法：getGridParam("url")：获取当前的AJAX的URLgetGridParam("sortname")：排序的字段getGridParam("sortorder")：排序的顺序getGridParam("selrow")：得到选中行的IDgetGridParam("page")：当前的页数getGridParam("rowNum")：当前有多少行getGridParam("datatype")：得到当前的datatypegetGridParam("records")：得到总记录数getGridParam("selarrrow")：可以多选时，返回选中行的IDsetGridParam方法：setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger("reloadGrid")使用setGridParam({sortname:newvalue})：设置排序的字段setGridParam({sortorder:newvalue})：设置排序的顺序asc or descsetGridParam({page:newvalue})：设置翻到第几页setGridParam({rowNum:newvalue})：设置当前每页显示的行数setGridParam({datatype:newvalue})：设置新的datatype(xml,json)形式2：jQuery('#tableID').jqGrid('getGridParam','url'))jQuery("#tableID").jqGrid('setGridParam',{page:2}).trigger("reloadGrid")二、jqGrid colModel表体结构配置name 必要的属性，具有唯一标识性，如在弹出的editform窗体中，将作为input的name属性 index 为排序用，最方便的是设为数据库字段width 150，宽度，数值 align left,center,right detefmt date:true editable flase editoptions edittype为先决条件，此为值，[] editrules编辑规范 edittype text,textarea,select,checkbox,passwordformatoptions formatter hidedlg false (appear in the modal dialog) hidden false 在加载时是否隐藏列 jsonmap 声明json的格式 key falselabel 当没有设置colNames时，在列里用此代替，此项也为空时，就是name 代替 resizable true，列宽可调节 search true，可搜索 sortable true，可排序 sorttype text,int,float,date，排序子段类型 xmlmap 声明xml的格式三、一个例子[Array Data]//<table id="list4"></table>jQuery("#list4").jqGrid({datatype:"local",height:250,colNames:['Inv No','Date','Client','Amount','Tax','Total','Notes'],colModel:[{name:'id',index:'id', width:60, sorttype:"int"},{name:'invdate',index:'invdate', width:90, sorttype:"date"},{name:'name',index:'name', width:100},{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},{name:'total',index:'total', width:80,align:"right",sorttype:"float"},{name:'note',index:'note', width:150, sortable:false}],multiselect: true,caption:"Manipulating Array Data"});var mydata=[{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}];for(var i=0;i<=mydata.length;i++)jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);四、行操作//获取选中行数据jQuery("#a1").click(function(){var id=jQuery("#list5").jqGrid('getGridParam','selrow');if (id) {var ret=jQuery("#list5").jqGrid('getRowData',id);alert("id="+ret.id+"invdate="+ret.invdate+"...");} else { alert("请选择一行！");}});//删除jQuery("#a2").click(function(){var su=jQuery("#list5").jqGrid('delRowData',12);if(su) alert("成功删除第12行");else alert("删除失败");});//更新jQuery("#a3").click(function(){varsu=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",no te:"<img src='images/user1.gif'/>"});if(su) alert("更新成功");else alert("更新失败");});//新增jQuery("#a4").click(function(){var datarow={id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}; var su=jQuery("#list5").jqGrid('addRowData',99,datarow);if(su) alert("新增成功");else alert("新增失败");});五、进阶多选HTML...<table id="list9"></table><div id="pager9"></div><br/><a href="javascript:void(0)"id="m1">Get Selected id's</a><a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>Java Scrpt code...jQuery("#list9").jqGrid({url:'server.php?q=2&nd='+new Date().getTime(),datatype: "json",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:'#pager9',sortname:'id',recordpos:'left',viewrecords: true,sortorder: "desc",multiselect: true,caption: "Multi Select Example"});jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'}); jQuery("#m1").click( function() {var s;s = jQuery("#list9").jqGrid('getGridParam','selarrrow');alert(s);});jQuery("#m1s").click( function() {jQuery("#list9").jqGrid('setSelection',"13");});主从表HTML...Invoice Header<table id="list10"></table><div id="pager10"></div><br/>Invoice Detail<table id="list10_d"></table><div id="pager10_d"></div><a href="javascript:void(0)"id="ms1">Get Selected id's</a>Java Scrpt code...jQuery("#list10").jqGrid({url:'server.php?q=2',datatype: "json",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:'#pager10',sortname:'id',viewrecords: true,sortorder: "desc",multiselect: false,caption: "Invoice Header",onSelectRow: function(ids) {if(ids == null) {ids=0;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');}} else {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").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false}); 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} ],rowNum:5,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("#ms1").click( function() {var s;s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');alert(s);});可展开的下级表HTML...<<table id="list11"></table><div id="pager11"></div><script src="subgrid.js"type="text/javascript"></script>Java Scrpt code...jQuery("#list11").jqGrid({url:'server.php?q=1',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:'subgrid.php?q=2',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});壳展开的下级表2HTML...<table id="listsg11"></table><div id="pagersg11"></div><script src="subgrid_grid.js"type="text/javascript"></script>Java Scrpt codejQuery("#listsg11").jqGrid({url:'server.php?q=1',datatype:"xml",height:190,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:8,rowList:[8,10,20,30],pager:'#pagersg11',sortname:'id',viewrecords: true,sortorder:"desc",multiselect: false,subGrid: true,caption:"Grid as Subgrid",subGridRowExpanded: function(subgrid_id, row_id) {// 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 flowingvar subgrid_table_id, pager_id;subgrid_table_id=subgrid_id+"_t";pager_id="p_"+subgrid_table_id;$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><divid='"+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_id;//subgrid_table_id = subgrid_id+"_t";//jQuery("#"+subgrid_table_id).remove();}});jQuery("#listsg11").jqGrid('navGrid','#pagersg11',{add:false,edit:false,del:false});调整大小HTML...<table id="list12"></table><div id="pager12"></div>Java Scrpt code...jQuery("#list12").jqGrid({url:'server.php?q=2',datatype:"json",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:'#pager12',sortname:'id',viewrecords: true,sortorder:"desc",multiselect: false,width:500,height:"100%",caption:"Auto height example"});jQuery("#list12").jqGrid('navGrid','#pager12',{add:false,edit:false,del:false});搜索功能HTML...<div class="h">Search By:</div><div><inputtype="checkbox"id="autosearch"onclick="enableAutosubmit(this.checked)">Enable Autosearch<br/>Code<br/><input type="text"id="search_cd"onkeydown="doSearch(arguments[0]||event)"/></div><div>Name<br><input type="text"id="item"onkeydown="doSearch(arguments[0]||event)"/> <button onclick="gridReload()"id="submitButton"style="margin-left:30px;">Search</button></div><br/><table id="bigset"></table><div id="pagerb"></div><script src="bigset.js"type="text/javascript"></script>Java Scrpt codejQuery("#bigset").jqGrid({url:'bigset.php',datatype:"json",height:255,colNames:['Index','Name','Code'],colModel:[{name:'item_id',index:'item_id', width:65},{name:'item',index:'item', width:150},{name:'item_cd',index:'item_cd', width:100}],rowNum:12,// rowList:[10,20,30],mtype:"POST",pager: jQuery('#pagerb'),pgbuttons: false,pgtext: false,pginput:false,sortname:'item_id',viewrecords: true,sortorder:"asc"});var timeoutHnd;var flAuto= false;function doSearch(ev){if(!flAuto)return;// var elem = ev.target||ev.srcElement;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_m ask="+cd_mask,page:1}).trigger("reloadGrid");}function enableAutosubmit(state){flAuto=state;jQuery("#submitButton").attr("disabled",state);}六、行编辑基本例子HTML...<table id="rowed1"></table><div id="prowed1"></div><br/><input type="BUTTON"id="ed1"value="Edit row 13"/><input type="BUTTON"id="sved1"disabled='true'value="Save row 13"/><input type="BUTTON"id="cned1"disabled='true'value="Cancel Save"/><script src="rowedex1.js"type="text/javascript"></script>Java Scrpt codejQuery("#rowed1").jqGrid({url:'server.php?q=2',datatype:"json",colNames:['Inv No','Date','Client','Amount','Tax','Total','Notes'],colModel:[{name:'id',index:'id', width:55},{name:'invdate',index:'invdate', width:90, editable:true},{name:'name',index:'name', width:100,editable:true},{name:'amount',index:'amount', width:80, align:"right",editable:true}, {name:'tax',index:'tax', width:80, align:"right",editable:true},{name:'total',index:'total', width:80,align:"right",editable:true},{name:'note',index:'note', width:150, sortable:false,editable:true}],rowNum:10,rowList:[10,20,30],pager:'#prowed1',sortname:'id',viewrecords: true,sortorder:"desc",editurl:"server.php",caption:"Basic Example"});jQuery("#rowed1").jqGrid('navGrid',"#prowed1",{edit:false,add:false,del:false});jQuery("#ed1").click(function() {jQuery("#rowed1").jqGrid('editRow',"13");this.disabled='true';jQuery("#sved1,#cned1").attr("disabled",false);});jQuery("#sved1").click(function() {jQuery("#rowed1").jqGrid('saveRow',"13");jQuery("#sved1,#cned1").attr("disabled",true);jQuery("#ed1").attr("disabled",false);});jQuery("#cned1").click(function() {jQuery("#rowed1").jqGrid('restoreRow',"13");jQuery("#sved1,#cned1").attr("disabled",true);jQuery("#ed1").attr("disabled",false);});七事件事件参数备注afterInsertRow rowidrowdatarowelem 当插入每行时触发。