首页 > 代码库 > 【转】jqGrid学习之介绍

【转】jqGrid学习之介绍

2024-07-23 22:15:08   217人阅读

JQGrid
JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。
JQGrid Demo 是一个在线的演示项目。在这里，可以知道jqgrid可以做什么事情。
 
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="http://www.mamicode.com/$request.contextPath/script/jqGrid/css/ui.jqgrid.css" /> <script type="text/javascript" src="http://www.mamicode.com/$request.contextPath/script/jqGrid/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com/$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="http://www.mamicode.com/$request.contextPath/script/jqGrid/css/jquery-ui-1.8.22.custom.css" media="all"/> <script type="text/javascript" src="http://www.mamicode.com/$request.contextPath/script/ui/jquery-ui-1.8.22.custom.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com/$request.contextPath/script/ui/jquery.ui.datepicker-zh-CN.js"></script>

 

2、在页面中使用

在页面中如vm、jsp中使用，需要两个基本的元素

<table id="jqGridId"></table> //这个是必须的 <div id="pager"></div> //这个是显示分页bar的信息，根据需要

然后在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", //为local时初始化不加载，支持json，xml等 	mtype: "POST", 	colNames:[‘编号‘, ‘作者‘, ‘ISBN‘,‘重量‘,‘描述‘], //表头 	colModel:[ //这里会根据index去解析jsonReader中root对象的属性，填充cell 		{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‘, //数字 & ‘auto‘,‘100%‘ 	height: 200, 	rowNum: 5, //每页记录数 	rowList:[5, 10,20,30], //每页记录数可选列表 	pager: ‘#pager2‘, //分页标签divID 	viewrecords: true, //显示记录数信息，如果这里设置为false,下面的不会显示 recordtext: "第{0}到{1}条, 共{2}条记录", //默认显示为{0}-{1} 共{2}条 scroll: false, //滚动翻页，设置为true时翻页栏将不显示	/**这里是排序的默认设置，这些值会根据列表header点击排序时覆盖*/ sortable: false, 	sortname: "warename", 	sortorder: "desc", 	caption:"商品列表", //显示查询结果表格标题 	rownumbers: true, //设置列表显示序号,需要注意在colModel中不能使用rn作为index 	rownumWidth: 20, //设置显示序号的宽度，默认为25 	multiselect: true, //多选框 	multiboxonly: true, //在点击表格row时只支持单选，只有当点击checkbox时才多选，需要multiselect=true是有效 	prmNames : { //如当前查询实体为ware，这些可以在查询对象的superObject中设定 		page: "wareDetail.page", 		rows: "wareDetail.rows", 		sort: "wareDetail.sidx", 		order: "wareDetail.sord", 		search: "wareDetail.search" 	}, 	jsonReader:{ //server返回Json解析设定 		root: "list", //对于json中数据列表 		page: "page", 		total: "totalPage", 		records: "totalCount",		repeatitems: false, 	} }); $("#jqGridId").jqGrid(‘navGrid‘,‘#pager2‘{edit:false,add:false,del:false,search:false});//这里设定分页bar显示的信息

 以上各个参数的含义已经做了说明，具体可见上面文档的详细介绍。

 

prmNames: 这些参数每次会作为请求参数传递给server端，一般维持分页、排序等信息。可在查询对象中统一声明这些属性，与这里设置保持一致。如：

public class JqGridQueryBase implements Serializable {    private static final long serialVersionUID = -2849625318773684220L;    /** 当前页面 */    private int               page;    /** 每页的记录数 */    private int               rows;    /** 查询字段值 */    private String            search;    /** 排序字段和排序方式如：username/asc */    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 = http://www.mamicode.com/$("#jqGrid_id").jqGrid(‘getRowData‘, rowIds[i]); 		//curRowData = http://www.mamicode.com/{"name1":"value1","name2":"value2","name3":"value3"...} 		if(curRowData[‘name1‘] == ""){ 			//dosomething 		} 		//更改:更改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 = http://www.mamicode.com/$("#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 = http://www.mamicode.com/{"ware.warename" : $("#warenameId").val(), 		"ware.number" : $("#numberId").val(), 		"ware.valid" : $("#validId").val() 	}; 	var postData = http://www.mamicode.com/$("#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 = http://www.mamicode.com/$("#jqGridId").jqGrid("getRowData", gr);		$("#jqGridId").jqGrid(‘delGridRow‘, gr ,{			top: 100,			left: 400,			reloadAfterSubmit:false,			modal: true,							//模态窗口			url: s2web.appURL + "jq/del.action",	//覆盖editUrl			jqModal: true,			beforeSubmit: function(postData, formid){// id=value1,value2,...				var editData = http://www.mamicode.com/{"ware.id": rowData.id				};				postData = http://www.mamicode.com/$.extend(postData, editData);  "success"]; 			},			afterSubmit: function(xhr, postData){	//返回[success, message, new_id]				console.log(postData); 				if(xhr.responseText == "\"1\""){					//alert("保存成功");					return [true,"保存成功",postData.id];  //message is ignored if success is true				}				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事件，完成如下功能：在选中行时获取当前行的数据并以某种方式查看数据，在列表加载完时计算列表中各个行的某列的合计值等：

	//设置multiselect checkbox‘s value,设置总的称重和件数	gridComplete: function(){	    var rowIds = $("#wmsjQContentTableId").jqGrid(‘getDataIDs‘);	    var totalWeight = 0,totalNumber = 0;            for(var i = 0, j = rowIds.length; i < j; i++) {               var curRowData = http://www.mamicode.com/$("#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 = http://www.mamicode.com/$("#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=http://www.mamicode.com/‘编辑‘ onclick=/"$(‘#jqGridId‘).editRow(‘"+cl+"‘);\"  />  "; 			//se = "<input style=‘height:22px;width:40px;‘ type=‘button‘ value=http://www.mamicode.com/‘保存‘ onclick=/"$(‘#jqGridId‘).saveRow(‘"+cl+"‘);\"  />  ";			se = "<input style=‘height:22px;width:40px;‘ type=‘button‘ value=http://www.mamicode.com/‘保存‘ onclick=/"customSaveRow(‘"+cl+"‘);\"  />  "; 			ce = "<input style=‘height:22px;width:40px;‘ type=‘button‘ value=http://www.mamicode.com/‘取消‘ 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-upWhen TreeGrid is enabledWhen SubGrid is enabledWhen cellEdit is enabledWhen 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 functionWhen scroll is set to true or 1When 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

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

 

【转】jqGrid学习之介绍


联系
我们