您的位置:首页 > Web前端 > JavaScript

jqGrid中prmNames,jsonReader,colModel的参数简介

2015-07-21 00:00 645 查看
摘要: https://git.oschina.net/xh668/jqGrid/tree/master可以下载我写的java版源码demo

1,一个jqGrid的例子,方便看参数的意思

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
});


2,ColModel,展示数据的字段名称以及一些属性设置

属性
数据类型
备注
默认值
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){
var temp = “<img src=’${ctx}/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
}
temp = temp + “‘ border=’0′ />”
return temp;
}},//返回性别的图标。
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

3,JsonReader 读取服务器返回的json数据并解析

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"
}


4,prmNames选项

,设置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
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: