jqGrid|初始化|参数

jqGrid原理

---

jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。

对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。

jqGrid|初始化|参数

名称描述url获取数据的地址datatype从服务器端返回的数据类型，默认为xml。可选类型有：xml，local，json等。mtypeajax提交方式，POST或者GET。默认GET。colNames列显示名称，是一个对象数组。colModel常用到的属性：name：列显示的名称； index：传到服务器端用来排列用的列名称；width：列宽度；align：对齐方式；sortable：是否可以排序；pager定义翻页用的导航栏，必须是有效的html元素。翻页工具可以放在页面的任意位置。rowNum在grid上显示记录条数，这个参数要被传递到后台。rowList一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台。viewrecords定义是否要显示总记录数caption表格名称direction表格中文字的显示方向，从左向右（ltr）或者从右向左（rtl）editurl定义对form编辑时的urlheight表格高度，可以是数字，像素值或者百分比prmNamesDefault valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端                              

jqGrid colModel 参数

---

ColModel 是jqGrid里最重要的一个属性，设置表格列的属性。

属性描述align对齐方式。可选：left，center，right；classes设置列的css。多个class之间用空格分隔，如：‘class1 class2’。表格默认的css属性是ui-ellipsis。datefmt“/”，“-”，“.”都是有效的日期分隔符。日期格式，string Y-m-deditable单元格是否可编辑editoptions编辑的一系列选项。{name：‘goodsId’， index：‘goodsId’， width：200， editable：true， edittype：‘select’，
editoptions：{dataUrl：“goods_goodsEdit.do”}}。动态从服务器端获取数据的例子。editrules编辑的规则{name：‘age’， index：‘age’， width：90， editable：true， editrules：{edithidden：true， required：true， number：true， minValue：10，
 maxValue：100}}，设定年龄的最大值为100，最小值为10，而且为数字类型，并且必输字段。特别注意：如字段带字母或符号时，此处会失效fixed列宽度是否要固定不可变formoptions对于form进行编辑时的属性设置formatoptions对某些列进行格式化的设置formatter对列进行格式化时设置的函数名或者类型。
{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 = './img/”
if (cellvalue == 1) {
temp = temp + "male.png";
} else if (cellvalue == 2) {
temp = temp + "female.png";
} else {
temp = temp + "user.png";
}
temp = temp + " 'border = ' 0'/> "
return temp;
}},                 //返回性别的图标hidden在初始化表格时是否要隐藏此列。index索引。其和后台交互的参数是sidxlabel如果colNames为空则用此值来作为列的显示名称，如果都没有设置则使用name值。name表格列的名称，所有关键字、保留字都不能作为名称使用，包括subgrid，cb，rnsortable是否可排序sorttype用在当datatype为local时，定义搜索列的类型，可选值：int/integer，对integer排序； float/number/currency，排序数字； date：排序日期； text：排序文本。width默认列的宽度，只能是像素值，不能使百分比unformat‘unformat’单元格值edittype可编辑的类型。可选值：text， textarea， select， checkbox， password， button， image， file。

[html] view plain copy

1. /*******  
2.             从后台获取贸易商物资信息数据  
3.         ******/  
4.         var grid_data = [];   
5.         var start = 0;  
6.         var limit = 100;  
7.         var currentPage = 0;  
8.         var dataStr = "start=" + start + "&limit=" + limit;  
9.         $.ajax({  
10.             async:false,  
11.             cache:false,  
12.             url: "goods_findPageGoodsByTrader.do",  
13.             data: dataStr,  
14.             type: 'POST',  
15.             success: function(result){  
16.                 var result = eval('('+ result +')');  
17.                 if(result.root != undefined && result.root.length > 0){  
18.                     var resultContent = result.root;  
19.                     var grid_child;  
20.                     for ( var i = 0; i < resultContent.length; i++) {  
21.                         grid_child = {id:resultContent[i].goodsId,   
22.                                 goodsOrder:resultContent[i].goodsOrder, goodsPackage:resultContent[i].goodsPackage, goodsName:resultContent[i].goodsName,  
23.                                 goodsType:resultContent[i].goodsType, goodsMaterial:resultContent[i].goodsMaterial, goodsNumber:resultContent[i].goodsNumber, goodsWeight:resultContent[i].goodsWeight,   
24.                                 goodsWarranty:resultContent[i].goodsWarranty, goodsOrigin:resultContent[i].goodsOrigin, originName:resultContent[i].originName,   
25.                                 goodsContractreadtime:resultContent[i].goodsContractreadtime, dzPurchaseContractNum:resultContent[i].dzPurchaseContractNum, groupPurchaseContractNum:resultContent[i].groupPurchaseContractNum};  
26.                         grid_data[i] = grid_child;      
27.                     }  
28.                 }  
29.             },  
30.             error:function(e){alert("获取贸易商物资信息失败");}  
31.         });  
32.       
33.             jQuery(function($) {  
34.                 var grid_selector = "#grid-table";  
35.                 var pager_selector = "#grid-pager";  
36.                 jQuery(grid_selector).jqGrid({  
37.                     //direction: "rtl",         //表格中文字的显示方向，从左向右（ltr）或者从右向左（rtr）  
38.                       
39.                     data: grid_data,  
40.                     datatype: "local",          //从服务器端返回的数据类型  
41.                     height: 400,                //表格高度，可以是数字，像素值或者百分比  
42.                     /****列显示名称******/  
43.                     colNames:[' ', 'id', '订单号', '捆包号', '品名', '规格', '产品牌号(材质)', '数量', '重量(吨)', '质保书编号', '物资来源', '来源名称', '合同读取时间', '大宗物资网合同号', '集团合同库合同号', '查看附件', '详情'],  
44.                     /****常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序******/  
45.                     colModel:[  
46.                         {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,  
47.                             formatter:'actions',   
48.                             formatoptions:{   
49.                                 keys:true,  
50.                                 delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},  
51.                                 //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}  
52.                             }  
53.                         },  
54.                         {name:'id', index:'id', width:60, editable:false, hidden:true},  
55.                         {name:'goodsOrder',index:'goodsOrder', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
56.                         {name:'goodsPackage',index:'goodsPackage', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
57.                         {name:'goodsName',index:'goodsName',width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},  
58.                         {name:'goodsType',index:'goodsType',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
59.                         {name:'goodsMaterial',index:'goodsMaterial',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
60.                         {name:'goodsNumber',index:'goodsNumber',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
61.                         {name:'goodsWeight',index:'goodsWeight',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
62.                         {name:'goodsWarranty',index:'goodsWarranty', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
63.                         {name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, editrules:{edithidden: true}, hidden:true},  
64.                         {name:'originName', index:'originName', width:60, editable:true, edittype:'select', editoptions:{value:"贸易商:贸易商"}},  
65.                         {name:'goodsContractreadtime',index:'goodsContractreadtime', width:60, sorttype:"date", unformat:pickDate},  
66.                         {name:'dzPurchaseContractNum',index:'dzPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getDzContractNum()}},  
67.                         {name:'groupPurchaseContractNum',index:'groupPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getGroupContractNum()}},  
68.                         //{name:'goodsDetail',index:'goodsDetail', width:60, sortable:false,editable: false, editoptions:{rows:"2",cols:"10"}, formatter:function(cellvalue, options, rowObject){ return '<a href="orderDetail.html">详情</a>'; }}  
69.                         {name:'checkAttachment',index:'checkAttachment', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../attachment/checkAttachment.html\">查看附件</a>";}},  
70.                         {name:'goodsDetail',index:'goodsDetail', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../orderDetail/orderDetail.html\">详情</a>";}}  
71.                     ],   
72.               
73.                     //footerrow: true,//分页上添加一行，用于显示统计信息  
74.                     rownumbers:true,//添加左侧行号  
75.                     viewrecords : true,     //定义是否要显示总记录数  
76.                     rowNum:10,              //在grid上显示记录条数，这个参数是要被传递到后台  
77.                     rowList:[10,20,30],     //一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台  
78.                     pager : pager_selector, //定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置  
79.                     altRows: true,          //设置为交替行表格,默认为false  
80.                     prmNames:{          //Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端  
81.                         page:"page",        //设置初始的页码(默认值：1)   
82.                         rows:"rows",  
83.                         oper:"oper",  
84.                         editoper:"edit",  
85.                         addoper:"add",  
86.                         deloper:"del",  
87.                     },  
88.                     //toppager: true,  
89.                       
90.                     multiselect: true,          //定义是否可以多选  
91.                     //multikey: "ctrlKey",      //只有在multiselect设置为ture时起作用，定义使用那个key来做多选。shiftKey，altKey，ctrlKey  
92.                     multiboxonly: true,         //只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用  
93.                       
94.                     gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接   
95.   
96.                         var ids=jQuery("#grid-table").jqGrid('getDataIDs');                           
97.                         for(var i=0; i<ids.length; i++){   
98.                             var id=ids[i];   
99.                             /* uploadAttachmentHref = "<a href='#' style='color:#f60' onclick='uploadAttachment("+ id +")' >上传附件</a>";  
100.                             jQuery("#grid-table").jqGrid('setRowData', ids[i], {uploadFile: uploadAttachmentHref}); */    
101.                             jQuery("#grid-table").jqGrid('setRowData', ids[i], {goodsOrigin: "贸易商"});  
102.                         }   
103.                     },  
104.               
105.                     loadComplete : function() {  
106.                         var table = this;  
107.                         setTimeout(function(){  
108.                             styleCheckbox(table);  
109.                               
110.                             updateActionIcons(table);  
111.                             updatePagerIcons(table);  
112.                             enableTooltips(table);  
113.                         }, 0);  
114.                     },  
115.               
116.                     editurl: "goods_editGoods.do",  //定义对form编辑时的url  
117.                     caption: "物资信息列表",      //表格名称  
118.                     autowidth: true             //如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth  
119.                 });  
120. });