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。

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' onclick='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 jqGrid 是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。换句话说， jqGrid 可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。 对于 jqGrid 我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。 jqGrid 是用ajax来实现对请求与响应的处理。 jqGrid 是一个流行的 JavaScript 插件，用于以表格形式展示复杂的数据集。它支持动态数据交互、分页、排序和搜索等功能。本章首先介绍 jqGrid 的基础架构，然后深入到如何配置数据源，为后续章节中对数据进行操作打下基础。 jqGrid 是由 Tony Tomov 开发的一个强大的网格组件，允许开发者快速地构建具有丰富交互功能的网格界面。它基于 jQuery 库，与后端技术如 ASP.NET、PHP、Ruby on Rails 等无缝集成，广泛用于管理信息系统（MIS）和企业级应用中。 col Model 也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。 • name：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。 • index：设置排序时所使用的索引名称，这个index名称会作为sidx 参数 （prmNames中设置的）... Java代码 jQuery("#gridid"). jqGrid ({ ... col Model :[{name:'name1',index:'index1'...},{...},...], ... });jQuery("#gridid"). jqGrid ({ 1. col Model 属性说明: align: string 定义单元格对齐方式 有 left ,right,center ,默认值left cellattr： function 附加到当前单元格上的属性 这个方法有4个 参数 rowId，val,rawobject，cm ，data 示例： function (the raw object of the data ro... rowid：当前行id；设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text 文本，function 定义函数来实现自定的排序规则。统计时利用get Col 方法，第一个 参数 为 col Mode的name值，第二个设为false，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有’sum’,‘avg’和’count’。 obj['table']. jqGrid ({ url: curPath + '/minstone/roomApply/getMyRoomApplyList', styleUI: 'Bootstrap', datatype: 'json', 问题描述：在做后台管理的时候我们使用了 jqGrid 来控制前端显示，但是在开发中碰到了一种特殊情况，即 col Model 不确定的情况，原因是我们在项目中通过构造器生成了大量的模板，而且这个模板数目是不断增长的，所以需要一种后台控制前端显示的方法。 刚开始查询了大量的资料，尝试了很多方法发现都不能解决我们这个问题，后来浏览了一下 jqGrid 的源码，找到了一种变通的方法。 var opt