jqGrid原理
jqGrid是典型的B/S架构,服务器端只是提供数据管理,客户端只提供数据显示。换句话说,jqGrid可以以一种更加简单的方式来展现你数据库的信息,而且也可以把客户端数据传回给服务器端。
对于jqGrid我们所关心的就是:必须有一段代码把一些页面信息保存到数据库中,而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。
jqGrid|初始化|参数
名称 | 描述 |
url | 获取数据的地址 |
datatype | 从服务器端返回的数据类型,默认为xml。可选类型有:xml,local,json等。 |
mtype | ajax提交方式,POST或者GET。默认GET。 |
colNames | 列显示名称,是一个对象数组。 |
colModel | 常用到的属性:name:列显示的名称; index:传到服务器端用来排列用的列名称;width:列宽度;align:对齐方式;sortable:是否可以排序; |
pager | 定义翻页用的导航栏,必须是有效的html元素。翻页工具可以放在页面的任意位置。 |
rowNum | 在grid上显示记录条数,这个参数要被传递到后台。 |
rowList | 一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台。 |
viewrecords | 定义是否要显示总记录数 |
caption | 表格名称 |
direction | 表格中文字的显示方向,从左向右(ltr)或者从右向左(rtl) |
editurl | 定义对form编辑时的url |
height | 表格高度,可以是数字,像素值或者百分比 |
prmNames | Default 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-d |
editable | 单元格是否可编辑 |
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 | 索引。其和后台交互的参数是sidx |
label | 如果colNames为空则用此值来作为列的显示名称,如果都没有设置则使用name值。 |
name | 表格列的名称,所有关键字、保留字都不能作为名称使用,包括subgrid,cb,rn |
sortable | 是否可排序 |
sorttype | 用在当datatype为local时,定义搜索列的类型,可选值:int/integer,对integer排序; float/number/currency,排序数字; date:排序日期; text:排序文本。 |
width | 默认列的宽度,只能是像素值,不能使百分比 |
unformat | ‘unformat’单元格值 |
edittype | 可编辑的类型。可选值:text, textarea, select, checkbox, password, button, image, file。 |
/*******
从后台获取贸易商物资信息数据
******/
var grid_data = [];
var start = 0;
var limit = 100;
var currentPage = 0;
var dataStr = "start=" + start + "&limit=" + limit;
$.ajax({
async:false,
cache:false,
url: "goods_findPageGoodsByTrader.do",
data: dataStr,
type: 'POST',
success: function(result){
var result = eval('('+ result +')');
if(result.root != undefined && result.root.length > 0){
var resultContent = result.root;
var grid_child;
for ( var i = 0; i < resultContent.length; i++) {
grid_child = {id:resultContent[i].goodsId,
goodsOrder:resultContent[i].goodsOrder, goodsPackage:resultContent[i].goodsPackage, goodsName:resultContent[i].goodsName,
goodsType:resultContent[i].goodsType, goodsMaterial:resultContent[i].goodsMaterial, goodsNumber:resultContent[i].goodsNumber, goodsWeight:resultContent[i].goodsWeight,
goodsWarranty:resultContent[i].goodsWarranty, goodsOrigin:resultContent[i].goodsOrigin, originName:resultContent[i].originName,
goodsContractreadtime:resultContent[i].goodsContractreadtime, dzPurchaseContractNum:resultContent[i].dzPurchaseContractNum, groupPurchaseContractNum:resultContent[i].groupPurchaseContractNum};
grid_data[i] = grid_child;
}
}
},
error:function(e){alert("获取贸易商物资信息失败");}
});
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
jQuery(grid_selector).jqGrid({
//direction: "rtl", //表格中文字的显示方向,从左向右(ltr)或者从右向左(rtr)
data: grid_data,
datatype: "local", //从服务器端返回的数据类型
height: 400, //表格高度,可以是数字,像素值或者百分比
/****列显示名称******/
colNames:[' ', 'id', '订单号', '捆包号', '品名', '规格', '产品牌号(材质)', '数量', '重量(吨)', '质保书编号', '物资来源', '来源名称', '合同读取时间', '大宗物资网合同号', '集团合同库合同号', '查看附件', '详情'],
/****常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序******/
colModel:[
{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
formatter:'actions',
formatoptions:{
keys:true,
delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
}
},
{name:'id', index:'id', width:60, editable:false, hidden:true},
{name:'goodsOrder',index:'goodsOrder', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsPackage',index:'goodsPackage', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsName',index:'goodsName',width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsType',index:'goodsType',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsMaterial',index:'goodsMaterial',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsNumber',index:'goodsNumber',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsWeight',index:'goodsWeight',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsWarranty',index:'goodsWarranty', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, editrules:{edithidden: true}, hidden:true},
{name:'originName', index:'originName', width:60, editable:true, edittype:'select', editoptions:{value:"贸易商:贸易商"}},
{name:'goodsContractreadtime',index:'goodsContractreadtime', width:60, sorttype:"date", unformat:pickDate},
{name:'dzPurchaseContractNum',index:'dzPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getDzContractNum()}},
{name:'groupPurchaseContractNum',index:'groupPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getGroupContractNum()}},
//{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>'; }}
{name:'checkAttachment',index:'checkAttachment', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../attachment/checkAttachment.html\">查看附件</a>";}},
{name:'goodsDetail',index:'goodsDetail', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../orderDetail/orderDetail.html\">详情</a>";}}
],
//footerrow: true,//分页上添加一行,用于显示统计信息
rownumbers:true,//添加左侧行号
viewrecords : true, //定义是否要显示总记录数
rowNum:10, //在grid上显示记录条数,这个参数是要被传递到后台
rowList:[10,20,30], //一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
pager : pager_selector, //定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
altRows: true, //设置为交替行表格,默认为false
prmNames:{ //Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端
page:"page", //设置初始的页码(默认值:1)
rows:"rows",
oper:"oper",
editoper:"edit",
addoper:"add",
deloper:"del",
},
//toppager: true,
multiselect: true, //定义是否可以多选
//multikey: "ctrlKey", //只有在multiselect设置为ture时起作用,定义使用那个key来做多选。shiftKey,altKey,ctrlKey
multiboxonly: true, //只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用
gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接
var ids=jQuery("#grid-table").jqGrid('getDataIDs');
for(var i=0; i<ids.length; i++){
var id=ids[i];
/* uploadAttachmentHref = "<a href='#' style='color:#f60' οnclick='uploadAttachment("+ id +")' >上传附件</a>";
jQuery("#grid-table").jqGrid('setRowData', ids[i], {uploadFile: uploadAttachmentHref}); */
jQuery("#grid-table").jqGrid('setRowData', ids[i], {goodsOrigin: "贸易商"});
}
},
loadComplete : function() {
var table = this;
setTimeout(function(){
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
editurl: "goods_editGoods.do", //定义对form编辑时的url
caption: "物资信息列表", //表格名称
autowidth: true //如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth
});
});