jQuery(function($) { var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; jQuery(grid_selector).jqGrid({ url:"/jqGrid/select.html", mtype:"get", datatype: "json", height: 250, colNames:[' ', 'ID','Last Sales','Name', 'Stock', 'Ship via','Notes'], colModel:[ {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false}, {name:'id',index:'id', width:60, sorttype:"int", editable: true}, {name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate}, {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}}, {name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch}, {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}}, {name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} ], rowNum:10, rowList:[10,20,30], pager : pager_selector, altRows: true, multiselect: true, //multikey: "ctrlKey", multiboxonly: true, loadComplete : function() { var table = this; setTimeout(function(){ enableTooltips(table); }, 0); }, editurl: $path_base+"/jqGrid/update.html",//nothing is saved caption: "jqGrid with inline editing", autowidth: true });
属性 |
数据类型 |
备注 |
默认值 |
align |
string |
left, center, right. |
left |
classes |
string |
设置列的css。多个class之间用空格分隔,如:'class1 class2' 。表格默认的css属性是ui-ellipsis |
empty string |
datefmt |
string |
”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日. |
ISO Date (Y-m-d) |
defval |
string |
查询字段的默认值 |
空 |
editable |
boolean |
单元格是否可编辑 |
false |
editoptions |
array |
编辑的一系列选项。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”${ctx}/admin/deplistforstu.action”}},这个是演示动态从服务器端获取数据。 |
empty |
editrules |
array |
编辑的规则{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},设定 年龄的最大值为100,最小值为10,而且为数字类型,并且为必输字段。 |
empty |
edittype |
string |
可以编辑的类型。可选值:text, textarea, select, checkbox, password, button, image and file. |
text |
fixed |
boolean |
列宽度是否要固定不可变 |
false |
formoptions |
array |
对于form进行编辑时的属性设置 |
empty |
formatoptions |
array |
对某些列进行格式化的设置 |
none |
formatter |
mixed |
对列进行格式化时设置的函数名或者类型 {name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){ |
none |
hidedlg |
boolean |
是否显示或者隐藏此列 |
false |
hidden |
boolean |
在初始化表格时是否要隐藏此列 |
false |
index |
string |
索引。其和后台交互的参数为sidx |
empty |
jsonmap |
string |
定义了返回的json数据映射 |
none |
key |
boolean |
当从服务器端返回的数据中没有id时,将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个,那么只选取第一个,其他被忽略 |
false |
label |
string |
如果colNames为空则用此值来作为列的显示名称,如果都没有设置则使用name 值 |
none |
name |
string |
表格列的名称,所有关键字,保留字都不能作为名称使用包括subgrid, cb and rn. |
Required |
resizable |
boolean |
是否可以被resizable |
true |
search |
boolean |
在搜索模式下,定义此列是否可以作为搜索列 |
true |
searchoptions |
array |
设置搜索参数 |
empty |
sortable |
boolean |
是否可排序 |
true |
sorttype |
string |
用在当datatype为local时,定义搜索列的类型,可选值:int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本 |
text |
stype |
string |
定义搜索元素的类型 |
text |
surl |
string |
搜索数据时的url |
empty |
width |
number |
默认列的宽度,只能是象素值,不能是百分比 |
150 |
xmlmap |
string |
定义当前列跟返回的xml数据之间的映射关系 |
none |
unformat |
function |
‘unformat’单元格值 |
null |
jqGrid为其设了默认值
jsonReader : { root: "rows",//返回的数组集合 page: "page",//当前页数 total: "total", //总页数 records: "records",//总行数 repeatitems: true,//指明每行的数据是可以重复的,如果设为false,则会从返回的数据中按名字来搜索元素 cell: "cell", id: "id", userdata: "userdata", //我们需要用的一些并不想显示到页面上的数据 //下面一般不用 subgrid: {root:"rows", //是否使用suggrid模型 repeatitems: true, cell:"cell" }
,设置jqGrid将要向Server传递的参数名称。其默认值为:
prmNames : {
page:"page", // 表示请求页码的参数名称
rows:"rows", // 表示请求行数的参数名称
sort: "sidx", // 表示用于排序的列名的参数名称
order: "sord", // 表示采用的排序方式的参数名称
search:"_search", // 表示是否是搜索请求的参数名称
nd:"nd", // 表示已经发送请求的次数的参数名称
id:"id", // 表示当在编辑数据模块中发送数据时,使用的id的名称
oper:"oper", // operation参数名称
editoper:"edit", // 当在edit模式中提交数据时,操作的名称
addoper:"add", // 当在add模式中提交数据时,操作的名称
deloper:"del", // 当在delete模式中提交数据时,操作的名称
subgridid:"id", // 当点击以载入数据到子表时,传递的数据名称
npage: null,
totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称,参见jqGrid选项中的rowTotal
}