`
mj4d
  • 浏览: 302948 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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="$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> //这个是显示分页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 = $("#jqGrid_id").jqGrid('getRowData', rowIds[i]); 
		//curRowData = {"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 = $("#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",	//覆盖editUrl
			jqModal: true,
			beforeSubmit: function(postData, formid){// id=value1,value2,...
				var editData = {
						"ware.id": rowData.id
				};
				postData = $.extend(postData, editData);  
				console.log(postData);
				return[true,"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 = $("#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+"');\"  />&nbsp;&nbsp;"; 
				//se = "<input style='height:22px;width:40px;' type='button' value='保存' onclick=\"$('#jqGridId').saveRow('"+cl+"');\"  />&nbsp;&nbsp;";
				se = "<input style='height:22px;width:40px;' type='button' value='保存' onclick=\"customSaveRow('"+cl+"');\"  />&nbsp;&nbsp;"; 
				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

分享到:
评论
1 楼 hongbo.wu 2015-11-20  

相关推荐

    jqgridDemo

    这个"jqgridDemo"应该是包含了一些基本和进阶的jqGrid使用示例,帮助用户快速理解和应用jqGrid到自己的项目中。由于描述中提到官方没有提供可以直接下载的demo,这个压缩包可能是个人或社区为了方便开发者而整理的...

    jqgrid API 3.6.5

    本文档是由 jqGrid 3 .6.5官方文档整理而来,方便各位使用! jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid ...

    jqGrid超详细属性说明(追加整理)

    ### jqGrid超详细属性说明(追加整理) #### 概述 `jqGrid`是一款功能强大的jQuery插件,主要用于在Web应用中展示表格数据。它不仅支持多种数据格式(如XML、JSON等),还提供了丰富的配置选项来实现复杂的前端交互...

    jqGrid属性和方法整理

    最近一直在研究jqGrid控件,整理出全部的属性和方法,希望对大家有用!

    jqgrid开发包

    在本篇文章中,我们将深入探讨jqGrid的核心特性、如何使用以及在开发中的应用。 1. **核心特性** - **数据管理**:jqGrid支持动态加载数据,可以方便地与服务器进行交互,通过AJAX获取数据并显示在表格中。 - **...

    Guriddo jqGrid.pdf

    jqGRID在数据上是支持JSON,XML,本地等多种数据格式;在功能上支持AJAX,表格排序、编辑、合计、分组表、主子表,自定义函数,自定义样式的前端表格控件。 谁用谁知道好处。 V5.3版本手册,精排版本,最新,最全说明...

    jqGrid超详细属性说明(追加整理)整合API,示例

    本篇文章将详细解释 jqGrid 的关键属性和配置选项,帮助你更好地理解和使用 jqGrid。 首先,`url` 和 `datatype` 参数是用于设置数据源的。`url` 是指 jqGrid 获取数据的服务器端接口地址,可以返回 XML 或 JSON ...

    jqGrid Demo

    网上有很多jqGrid demo,但是jqGrid+jsp 的demo 很少 ,我经过整理后,下载后可以直接使用 ,适用于初学者 了解jqGrid

    jqGrid超详细属性说明(追加整理)[收集].pdf

    jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,具有数据检索、排序、分页和编辑功能。本文将详细介绍 jqGrid 的一些关键属性及其用法...在软件开发中,掌握 jqGrid 的使用能有效提升数据展示和管理的效率。

    jqGrid 学习笔记整理——进阶篇(一 )

    在页面加载完成后,我们使用jQuery的`$(document).ready()`函数来确保jqGrid在DOM准备就绪后初始化。通过`$("#grid-table").jqGrid()`方法,我们可以配置和创建jqGrid实例。在jqGrid的配置对象中,我们设置了`data`...

    Java中jqGrid 学习笔记整理——进阶篇(二)

    在本篇Java中jqGrid的学习笔记整理中,我们将聚焦于jqGrid与后台Java服务的数据交互。jqGrid是一款强大的JavaScript库,用于创建动态、交互式的表格,而这里的进阶篇(二)将涉及到如何通过Java后端来提供数据支持。 ...

    grid.locale-zh.js

    整理了一个jqgrid的汉化版本供大家下载使用!

    JQuery中dategrid编辑状态下的数据长度限制方法小结[整理].pdf

    对于字符串数据,可以在column定义中使用`validType`属性,结合正则表达式限制长度,例如`validType:'length[1,5]'`,表示字符串长度限制在1到5个字符之间。在`onsubmit`事件中,通过表单验证(`$(this).form('...

    DaleCloudNetFramework下载地址及说明.txt

    将原版jqgrid数据列表风格改为easyUI—Bootstrap风格,除系统核心功能表单以外,其他form表单改为easyUI框架; 将项目名及空间名前缀NFine改为DaleCloud; 核心类code进行了重新整理并拓展了许多公共方法; 引入...

    DaleCloudNetFramework:DaleCloud.Framework是一款基于NFine团队出品的"NFine.Framework" C#.NET框架 WEB + ORM 框架)改进而成的新框架,去除了后门,将原版jqgrid改为easyUI,支持微信公众号及钉钉平台接口

    将原版jqgrid数据列表风格改为easyUI—Bootstrap风格,除系统核心功能表单以外,其他form表单改为easyUI框架;将项目名及空间名前缀NFine改为DaleCloud;核心类code进行了重新整理并拓展了许多公共方法;引入Senparc...

    jquery培训材料

    这份文档可能详细介绍了如何配置和使用jqGrid,对于处理表格数据非常有用。 **jQuery Starterkit** `jquery-starterkit`可能是一个包含基本模板和示例代码的项目,旨在帮助开发者快速启动新的jQuery项目。它可能...

    java开发中总结的一些方法

    根据提供的文件信息,我们可以整理出以下几个关键的知识点: ### 一、JSON操作 #### 1. JSON对象格式化 在Java开发过程中,处理JSON数据是非常常见的。为了方便地读取和解析JSON数据,通常需要使用到`JSON.parse...

    整理了12款Javascript 表格控件(DataGrid)

    以下是根据提供的内容整理的一些知识点: 1. Flexigrid:这是个类似于ExtGrid的jQuery表格控件,具备调整列宽、合并列标题、分页、排序、显示/隐藏表格等功能。Flexigrid可以使用Ajax获取数据或转换普通表格。 2. ...

Global site tag (gtag.js) - Google Analytics