| jqGrid是一款处理表格展现的jQuery插件，支持分页、滚动加载、搜索、锁定、拖动等一系列对表格的常规操作。以下是最近项目中实践jqGrid的整理
1、引入到项目中来
jqGrid的主页在http://www.trirand.com/blog/ ，上面提供了下载、demo、wiki等文档，都比较详尽。特别是http://www.trirand.com/jqgridwiki/doku.php 中值得开发中多多关注。好了，下载后需要在项目的头文件中引入：
-
<link rel="stylesheet" type="text/css" href="$request.contextPath/script/jqGrid/css/ui.jqgrid.css" />
-
<script type="text/javascript" src="$request.contextPath/script/jqGrid/js/jquery.jqGrid.min.js"></script>
-
<script type="text/javascript" src="$request.contextPath/script/jqGrid/js/i18n/grid.locale-cn.js"></script>
jqGrid采用了jQueryUI的CSS主题，需要下载相应的主题http://jqueryui.com/themeroller/ 找到相应的主题下载，如果使用了datepicker控件，还需要ui。如下：
-
<link rel="stylesheet" type="text/css" href="$request.contextPath/script/jqGrid/css/jquery-ui-1.8.22.custom.css" media="all"/>
-
<script type="text/javascript" src="$request.contextPath/script/ui/jquery-ui-1.8.22.custom.min.js"></script>
-
<script type="text/javascript" src="$request.contextPath/script/ui/jquery.ui.datepicker-zh-CN.js"></script>
2、在页面中使用 在页面中如vm、jsp中使用，需要两个基本的元素
-
<table id="jqGridId"></table>
-
<div id="pager"></div>
然后在js中
-
$("#jqGridId").jqGrid({options})
这样就是一个最基本的设置，重点是在这里的options上，包括基本参数设定和函数。具体可见官网的文档：
写道
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
3、参数(options) 参数是指jqGrid对象中设置各种特性的属性，具体的设置在http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options 下面一个例子，罗列了常用的参数，并对参数进行了说明：
-
$("#jqGridId").jqGrid({
-
url: s2web.appURL + "jq/queryWare.action",
-
datatype:"local",
-
mtype: "POST",
-
colNames:['编号', '作者', 'ISBN','重量','描述'],
-
colModel:[
-
{name:'id', index:'id', width:55, align:"center",sortable:false},
-
{name:'author', index:'author', width:100, sortable:false},
-
{name:'isbn', index:'isbn', width:120,align:"right", sortable:false},
-
{name:'weight', index:'weight', width:80,align:"center", sortable:false},
-
{name:'wareDesc', index:'wareDesc', width:400, sortable:false}
-
],
-
width: 'auto',
-
height: 200,
-
rowNum: 5,
-
rowList:[5, 10,20,30],
-
pager: '#pager2',
-
viewrecords: true,
-
sortable: false,
-
sortname: "warename",
-
sortorder: "desc",
-
-
caption:"商品列表",
-
rownumbers: true,
-
rownumWidth: 20,
-
multiselect: true,
-
multiboxonly: true,
-
prmNames : {
-
page: "wareDetail.page",
-
rows: "wareDetail.rows",
-
sort: "wareDetail.sidx",
-
order: "wareDetail.sord",
-
search: "wareDetail.search"
-
},
-
jsonReader:{
-
root: "list",
-
page: "page",
-
total: "totalPage",
-
records: "totalCount",
-
repeatitems: false,
-
}
-
});
-
-
$("#jqGridId").jqGrid('navGrid','#pager2'{edit:false,add:false,del:false,search:false});
以上各个参数的含义已经做了说明，具体可见上面文档的详细介绍。 prmNames: 这些参数每次会作为请求参数传递给server端，一般维持分页、排序等信息。可在查询对象中统一声明这些属性，与这里设置保持一致。如：
-
public class JqGridQueryBase implements Serializable {
-
-
private static final long serialVersionUID = -2849625318773684220L;
-
-
-
private int page;
-
-
private int rows;
-
-
private String search;
-
-
private String sidx;
-
private String sord;
-
-
-
private int totalCount;
jsonReader: 与prmNames一样，是与server端Json格式交互的解析方式，root元素是一个json数组，解析colModel中的元素，而其他则涉及分页等信息。比如我们在Action中每次返回的对象为PageModule，可定义为：
-
public class PageModule<T> extends JqGridQueryBase {
-
-
private static final long serialVersionUID = -663611670315885315L;
-
-
private List<T> list = new ArrayList<T>();
colModel： colModel对json数组中对象如何解析填充到表格的cell的设定，包括基本的name、index、width、formater等，具体见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options 比如下设置：
-
name ：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
-
index ：设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。
-
label ：当jqGrid的colNames选项数组为空时，为各列指定题头。如果colNames和此项都为空时，则name选项值会成为题头。
-
width ：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
-
sortable ：设置该列是否可以排序，默认为true。
-
search ：设置该列是否可以被列为搜索条件，默认为true。
-
resizable ：设置列是否可以变更尺寸，默认为true。
-
hidden ：设置此列初始化时是否为隐藏状态，默认为false。
-
formatter ：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、还支持custom的方式
以上个参数含义来自http://blog.csdn.net/jpr1990/article/details/6891115 比如对价格需要加前缀和分割可以如下设定：
-
{name:'price',index:'price', width:80,align:"right", formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},
支持下拉select的设定：
-
{name:'valid',index:'valid', width:100,align:"center", formatter:'select',edittype:'select', editoptions:{value:"0:现货;1:可配货;2:无货"}}
显示链接：
-
{name:'warename', index:'warename', width:300,sortable:false, formatter:'showlink', formatoptions:{baseLinkUrl:'query.action', addParam: '&action=edit'}},
4、常用方法(methods) http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods jqGrid支持两种方式调用函数方法：
-
jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );
-
jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );
下面是新的API，推荐使用新的调用方法，也支持链式调用,如：
-
jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");
1、新增{rowid, data, position(first、before、last、after)}
-
$("#jqGrid_id").jqGrid("addRowData", "1" ,{'name':'zhangsan', 'age': 20}, "first" );
2、清空grid
-
$("#jqGrid_id").jqGrid("clearGridData");
3、返回当前grid序号
-
$("#jqGrid_id").jqGrid('getDataIDs');
4、根据rowID获取当前row的值
-
$("#jqGrid_id").jqGrid('getRowData', rowIds[i]);
5、设置某row值
-
$("#jqGrid_id").jqGrid('setRowData', rowIds[i], {});
一个例子：需要对grid中的数据进行循环遍历获取、设置、更改
-
var rowIds = $("#jqGrid_id").jqGrid('getDataIDs');
-
if(rowIds){
-
for(var i = 0, j = rowIds.length; i < j; i++) {
-
var curRowData = $("#jqGrid_id").jqGrid('getRowData', rowIds[i]);
-
-
if(curRowData['name1'] == ""){
-
-
}
-
-
$.extend(curRowData, {"name1":"newValue1"})
-
$("#jqGrid_id").jqGrid('setRowData', rowIds[i], curRowData);
-
}
-
}
6、获取grid参数. name表示grid的options：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
-
$("#jqGrid_id").jqGrid('getGridParam','name');
7、设置grid参数，与上面的方法对应
-
$("#jqGrid_id").jqGrid('setGridParam', 'name');
如下常见需要获取的参数：
-
#获取总记录数
-
$("#jqGrid_id").jqGrid('getGridParam','records');
-
#获取请求参数
-
$("#jqGrid_id").jqGrid('getGridParam','postData');
-
#获取选中的row，返回string
-
$("#jqGrid_id").jqGrid("getGridParam","selrow");
-
#获取选中的多个row，返回Array
-
$("#jqGrid_id").jqGrid("getGridParam","selarrrow");
例子：对当前默认请求添加新的请求参数
-
var postData = $("#jqGrid_id").jqGrid('getGridParam','postData'); $.extend(postData , {"name1":"newValue1"}) $("#jqGrid_id").jqGrid("setGridParam", {datatype: "json" }).trigger("reloadGrid", [{page:1}]);
同时，在实际的使用场景中，我们可能是需要选择通过选择表单的值再进行查询：
-
$("#queryBtn").bind("click", function() {
-
var sdata = {
-
"ware.warename" : $("#warenameId").val(),
-
"ware.number" : $("#numberId").val(),
-
"ware.valid" : $("#validId").val()
-
};
-
var postData = $("#jqGridId").jqGrid("getGridParam", "postData");
-
$.extend(postData, sdata);
-
$("#jqGridId").jqGrid("setGridParam", {search: true}).trigger("reloadGrid", [{page:1}]);
-
});
8、删除
-
$("#jqGrid_id").jqGrid("delRowData", rowid);
在使用上述API进行批量删除时，是根据rowid去删除指定的行，但是在删除过程中rowid会导致变化，如果采用下面的方式删除会导致某些行不能被删除：
-
var gr = $("#jqGrid_id").jqGrid("getGridParam","selarrrow");
-
for ( var i = 0, j = gr.length; i < j; i++) {
-
$("#jwGrid_id").jqGrid('delRowData', gr[i]);
-
}
在网上找到一个解决方案是：
-
var gr = $("#jqGrid_id").jqGrid("getGridParam","selarrrow");
-
for ( var i = 0, j = gr.length; i < j; i++) {
-
$("#jwGrid_id").jqGrid('delRowData', gr[0]);
-
}
上述API是前端删除，对于前后台交互的删除的API：
-
$("#jqGrid_id").jqGrid("delGridRow", rowid);
下面是一个删除的例子：
-
$("#removeBtn").bind("click", function(){
-
var gr = $("#jqGridId").jqGrid('getGridParam','selrow');
-
if(gr){
-
var rowData = $("#jqGridId").jqGrid("getRowData", gr);
-
$("#jqGridId").jqGrid('delGridRow', gr ,{
-
top: 100,
-
left: 400,
-
reloadAfterSubmit:false,
-
modal: true,
-
url: s2web.appURL + "jq/del.action",
-
jqModal: true,
-
beforeSubmit: function(postData, formid){
-
var editData = {
-
"ware.id": rowData.id
-
};
-
postData = $.extend(postData, editData);
-
console.log(postData);
-
return[true,"success"];
-
},
-
afterSubmit: function(xhr, postData){
-
console.log(postData);
-
if(xhr.responseText == "\"1\""){
-
-
return [true,"保存成功",postData.id];
-
}
-
return [false,"保存失败",postData.id];
-
}
-
});
-
}else{
-
alert("请选择要删除的数据");
-
}
-
});
5、事件(Event) 作为jqGrid的各种事件属性，用来监听相应的事件，如选择行、完成加载、多选等时候触发。API参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events，这里还介绍了关联事件的执行顺序：
写道
Below is the execution order of the events when a ajax request is made
1、beforeRequest
2、loadBeforeSend
3、serializeGridData
4、loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.)
5、beforeProcessing
6、gridComplete
7、loadComplete
下面的例子是在开发中比较关注的onSelectRow和gridComplete事件，完成如下功能：在选中行时获取当前行的数据并以某种方式查看数据，在列表加载完时计算列表中各个行的某列的合计值等：
-
-
gridComplete: function(){
-
var rowIds = $("#wmsjQContentTableId").jqGrid('getDataIDs');
-
var totalWeight = 0,totalNumber = 0;
-
for(var i = 0, j = rowIds.length; i < j; i++) {
-
var curRowData = $("#wmsjQContentTableId").jqGrid('getRowData', rowIds[i]);
-
var curChk = $("#"+rowIds[i]+"").find(":checkbox");
-
curChk.attr('name', 'wmsCheckboxname');
-
curChk.attr('value', curRowData['outStockCode']);
-
if(curRowData['weight'] != ""){
-
totalWeight += parseFloat(curRowData['weight']);
-
}
-
if(curRowData['number'] != ""){
-
totalNumber += parseFloat(curRowData['number']);
-
}
-
}
-
$("#totalWeighId").val(totalWeight);
-
$("#totalPackNumId").val(totalNumber);
-
},
-
-
-
onSelectRow: function(ids){
-
var rowData = $("#wmsjQContentTableId").jqGrid("getRowData", ids);
-
$("#curWeighId").val(rowData['weight']);
-
$("#packNumId").val(rowData['number']);
-
$("#curWmsOutStockCodeId").val(rowData['outStockCode']);
-
}
考虑如下一种场景，在列表的最后一列一般会有要求操作栏，提供删除、修改等操作，那么同样也可以通过gridComplete事件来实现：
-
colNames:['商品编号', '商品名称', '单价','采购日期','库存','状态','操作'],
-
在colModel中有一列空值占位，注意index不要和json中重复
-
{name:'act', index:'act', width:150}
在gridComplete事件中：
-
gridComplete: function(){
-
var ids = $("#jqGridId").jqGrid('getDataIDs');
-
for(var i=0, j=ids.length; i < j; i++){
-
var cl = ids[i];
-
be = "<input style='height:22px;width:40px;' type='button' value='编辑' onclick=\"$('#jqGridId').editRow('"+cl+"');\" /> ";
-
-
se = "<input style='height:22px;width:40px;' type='button' value='保存' onclick=\"customSaveRow('"+cl+"');\" /> ";
-
ce = "<input style='height:22px;width:40px;' type='button' value='取消' onclick=\"$('#jqGridId').restoreRow('"+cl+"');\" />";
-
$("#jqGridId").jqGrid('setRowData',ids[i], {act: be + se + ce});
-
}
-
},
6、其他 冻结行、列 jqGrid有提供对column、header、column with group header的冻结， 需要设置两处：
-
colModel中的frozen:true
-
$("#grid").jqGrid('setFrozenColumns');
但是jqGrid对冻结的支持并不是那么强大，只能支持依次从左到右冻结，如果中间设置有一个cell没有设置，那么该row以后的cell即使设置了也不起作用 在官方的DOC中列出了使用限制：
写道
The following limitations tell you when frozen columns can not be set-up
When TreeGrid is enabled
When SubGrid is enabled
When cellEdit is enabled
When inline edit is used - the frozen columns can not be edit.
When sortable columns are enabled - grid parameter sortable is set to true or is function
When scroll is set to true or 1
When Data grouping is enabled
动态改变设置：当然这里id、name都是依次从左到右的元素 $("#changeBtn").bind("click", function() {
-
$("#jqGridId").jqGrid('destroyFrozenColumns')
-
.jqGrid('setColProp','id', {frozen:true})
-
.jqGrid('setColProp','name', {frozen:true})
-
.jqGrid('setFrozenColumns')
-
.trigger('reloadGrid', [{current:true}]);
-
);
7、参考以下文章 doc:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
options:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
colmodel_options:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
方法
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
事件
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events 其他 http://blog.csdn.net/gengv/article/category/648499 http://www.trirand.com/jqgridwiki/doku.php http://trirand.com/blog/jqgrid/jqgrid.html |
