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

2019独角兽企业重金招聘Python工程师标准>>>

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

}

转载于:https://my.oschina.net/u/1454202/blog/481403