文档章节

数据列表组件 jqGrid 二次封装

ThinkGem
 ThinkGem
发布于 2016/07/17 16:16
字数 1499
阅读 279
收藏 1

前段时间在jqgrid基础上,进行了二次封装。 应用在公司新的开发平台上,相比以前效果更佳,开发更方便,减少代码50%。共享下提供大家参考学习。

 

先看效果:

 

数据表格:


 树结构表格:

多级表头:最多支持3级
 

 

用法: 

 

 

<form:form id="searchForm" modelAttribute="user" action="${ctx}/sys/user/listData" method="post" class="breadcrumb form-inline hide" data-page-no="${page.pageNo}" data-page-size="${page.pageSize}" data-order-by="${page.orderBy}">
</form:form>
<table id="dataGrid"></table>
<div id="dataGridPage"></div>
<script type="text/javascript">
// 初始化DataGrid对象
var dataGrid = new DataGrid({
		
	// 当前页签编号
	tabPageId: '${param.tabPageId}',
	
	// 设置数据表格列
	columnModel: [
		{header:'用户账号', name:'userCode', index:'user_code', width:100, frozen:true , formatter: function(val, obj, row, act){
			return '<a href="${ctx}/sys/user/form?userCode='+row.id+'&op=edit" class="btnList" data-title="编辑用户">'+val+'</a>';
		}},
		{header:'用户名称', name:'userName', index:'user_name', width:150},
		{header:'所属公司', name:'employee.companyNameSimple', index:'c.company_name_simple', width:160},
		{header:'组织机构', name:'employee.officeName', index:'d.office_name', width:160},
		{header:'姓名', name:'refName', index:'ref_name', width:100},
		{header:'电话', name:'phone', index:'phone', width:100, sortable:false},
		{header:'手机', name:'mobile', index:'mobile', width:100, sortable:false},
		{header:'状态', name:'status', index:'a.status', width:50, align:"center", formatter: function(val, obj, row, act){
			return getDictLabel(${fns:getDictListJson('user_status')}, val, '未知', true);
		}},
		{header:'操作', name:'actions', width:80, fixed:true, sortable:false, resizable:false, fixed:true, formatter: function(val, obj, row, act){
			var actions = [];//<shiro:hasPermission name="sys:user:edit">
			actions.push('<a href="${ctx}/sys/user/form?userCode='+row.id+'&op=edit" class="btnList" title="编辑用户"><i class="fa fa-pencil"></i></a>&nbsp;');
			}//</shiro:hasPermission><shiro:hasPermission name="sys:user:authorize">
			if (row.status == Global.STATUS_NORMAL){
				actions.push('<a href="${ctx}/sys/user/form?userCode='+row.id+'&op=authorize" class="btnList" title="用户授权"><i class="fa fa-check-square-o"></i></a>&nbsp;');
			}//</shiro:hasPermission>
			return actions.join('');
		}}
	],
	ajaxSuccess: function(data){ // 加载成功后执行方法
		
	}
});
</script>
 

 

封装代码:

 

/**
 * jqGrid 封装类
 * @author ThinkGem@163.COM
 * @version 2014-8-22
 */
var DataGrid = function(options){
	
	var dataGrid = options.dataGrid ? options.dataGrid : $("#dataGrid");
	var searchForm = options.searchForm ? options.searchForm : $("#searchForm");
	var dataGridPage = options.dataGridPage ? options.dataGridPage : $("#dataGridPage");
	
	options = $.extend({
		url: searchForm.attr('action'),
		postData: searchForm.serializeArray(),
		mtype: "POST", datatype: "json",
		jsonReader: { 	// 自定义表格的JSON读取参数
			id: options.dataId, root: "list", page: "pageNo", 
			total: "totalPage", records: "count", subgrid: {root:"list"}
		},
		treeReader: {	// 自定义树表格JSON读取参数
			level_field: "sortGrade", parent_id_field: "parentCode",
			leaf_field: "isLeaf", expanded_field: "isOpen", icon_field: "_icon"
		},
		prmNames: {		// 自定义Ajax请求参数
			page:"pageNo", rows:"pageSize", sort: "orderBy",
			order: "sord", search:"_search", nd:"nd", id:"id",
			oper:"oper",editoper:"edit",addoper:"add",deloper:"del", 
			subgridid:"id", npage: null, totalrows:"totalPage"
		},
		rowNum: -1, 		// 显示行数,-1为显示全部
		rownumWidth: 30,	// 序号列宽
		multiboxonly: true,	// 单击复选框时在多选
		altRows: true, 		// 斑马线样式,交替行altclass

		// 当前页签编号
		tabPageId: '',
		
		// 设置列模型
		columnModel: [], colNames: [], colModel: options.columnModel,

		// 列表参数
		dataId: 'id', 		// 指定数据主键
		showRownum: true,	// 是否显示行号
		showCheckbox: false,// 是否显示复选框
		sortable: true,	// 列表是否允许支持
		
		// 树结构表格
		treeGrid: false,							// 启用树结构表格
		treeGridModel: 'adjacency',					// 启用简单结构模式
		ExpandColClick: true,						// 单击列可展开
		ExpandColumn: options.treeColumn,			// 要展开的列
		defaultExpandLevel: 0,						// 默认展开的层次
		initExpandLevel: options.defaultExpandLevel,// 保存初始化是设置的展开层次

		// 窗体按钮绑定
        btnSearch: $("#btnSearch"), 					// 查询按钮
        btnRefreshTree: $("#btnRefreshTree"), 			// 刷新树按钮
        btnExpandTreeNode: $("#btnExpandTreeNode"), 	// 展开树节点按钮
        btnCollapseTreeNode: $("#btnCollapseTreeNode"), // 折叠树节点按钮

        // 分页相关字段
        inputPageNo: $("#pageNo", searchForm),		// 当前页码字段
        inputPageSize: $("#pageSize", searchForm),	// 页面大小字段
        inputOrderBy: $("#orderBy", searchForm),	// 排序字段
        
        // 数据请求前调用方法
		beforeRequest: function(data){
			loading();
			// 如果是树结构表格
			if (options.treeGrid){
				// 一次性查询设置
				var postData = getParam('postData');
				if (postData.id){
					setParam({postData: {id: postData.id}});
				}else if (postData.nodeid){
					setParam({postData: {parentCode: postData.nodeid}});
				}
				// 设置请求参数
				else{
					setParam({postData: searchForm.serializeArray()});
				}
			}else{
				// 设置请求参数
				setParam({postData: searchForm.serializeArray()});
			}
			
			// 请求加载前调用方法
			if (typeof options.ajaxLoad == 'function'){
				options.ajaxLoad(data);
			}
			
			$('.btn').attr("disabled", true);
			$('.ui-jqgrid .loading').remove();
		},
		
		// 数据请求完成调用方法
		loadComplete: function(data){
			
			// 如果是树结构表格
			if (options.treeGrid){
				
				// 展开等待展开树节点
				if (dataGrid.expandNodeIds){
					setTimeout(function(){
						if (dataGrid.expandNodeIds.length > 0){
							$('#'+dataGrid.expandNodeIds.shift()+':visible .tree-plus', dataGrid).click();
						}else{
							if (dataGrid.currentLevel < dataGrid.expandLevel){
								dataGrid.currentLevel++;
								dataGrid.expandNodeIds = [];
								$('.jqgrow:visible .tree-plus', dataGrid).each(function(){
									var id = $(this).parents('.jqgrow').attr('id');
									dataGrid.expandNodeIds.push(id);
								});
								$('#'+dataGrid.expandNodeIds.shift()+':visible .tree-plus', dataGrid).click();
							}else{
								// 如果已经展开完成,则销毁展开ID队列
								dataGrid.expandNodeIds = null;
							}
						}
					}, 10);
				}
				// 树加载后的默认展开级别
				else if (options.defaultExpandLevel && options.defaultExpandLevel > 0){
					expandTreeNode(options.defaultExpandLevel);
					options.defaultExpandLevel = 0;
				}
				// 一次性查询,需清除对应参数
				setParam({postData: {id: '', nodeid: ''}});
			}else{
				// 显示分页代码
				if (data && data.html){
					dataGridPage.html(data.html);
				}
			}
			
			// 请求成功之后调用方法
			if (typeof options.ajaxSuccess == 'function'){
				options.ajaxSuccess(data);
			}
			
			// 绑定列表按钮事件
			if (typeof options.btnEventBind == 'function'){
				options.btnEventBind($('.btnList'));
			}
			
			resizeDataGrid();
			$('.btn').attr("disabled", false);
			closeLoading();
		},
		loadError: function(data){
			if (typeof options.ajaxError == 'function'){
				options.ajaxError(data);
			}
			$('.btn').attr("disabled", false);
			showMessage('操作失败,' + data.responseText);
			closeLoading(0, true);
		},
		gridComplete : function() {
			if (typeof options.complete == 'function'){
				options.complete();
			}
			resizeDataGrid();
		},
		onSortCol: function (index, iCol, sortorder) {
			if (options.inputOrderBy && options.inputOrderBy.length){
				options.inputOrderBy.val(index + ' ' + sortorder);
				//setParam({postData: searchForm.serializeArray()});
			}
        },
//		ondblClickRow: function(id, rownum, colnum, event){
////		$('.jqgrow td').attr('onselectstart', 'return false;').css('style', '-moz-user-select:none;');
//			if(document.selection && document.selection.empty) {
//		        document.selection.empty();
//		    }
//		    else if(window.getSelection) {
//		        var sel = window.getSelection();
//		        sel.removeAllRanges();
//		    }
//			$('#' + id + '.jqgrow a:first').click();
//		},
		
//		// 设置多级表头
//		groupHeaders: {
//	 		twoLevel:[
//	 			{startColumnName: 'postCode', numberOfColumns: 2, titleText: '二级表头'},
//	 			{startColumnName: 'remarks', numberOfColumns:2, titleText:'二级表头2'}
//	 		],
//	 		threeLevel:[
//	 			{startColumnName: 'postCode', numberOfColumns:4, titleText:'三级表头'}
//	 		]
//		},
//		frozenCols: true, 	// 冻结列,在colModel指定frozen: true
//		showFooter: true,	// 是否显示底部合计行
		
        // 按钮事件绑定
		btnEventBind: function(elements){ 
			elements.each(function(){
				var clickBinded = $(this).attr('data-click-binded');
				if (clickBinded == undefined){
					// 防止重复绑定
					$(this).attr('data-click-binded', true);
					// 绑定按钮单击事件
					$(this).click(function(){
						var se = $(this);
						var url = se.attr('href');
						var title = se.data('title');
						if (title == undefined){
							title = se.attr('title');
						}
						var confirm = se.data('confirm');
						if(confirm != undefined){
							confirmx(confirm, url, function(data){
								showMessage(data.message);
								if(data.result==Global.TRUE){
									var confirmSuccess = se.data('confirmSuccess');
									if (confirmSuccess != undefined){
										try{
											eval(confirmSuccess);
										}catch(e){
											Log.log('confirmSuccess error: ' + e);
										}
									}else{
										// 如果是树结构表格
										if (options.treeGrid){
											var row = getRowData(se.parents('.jqgrow').attr('id'));
											if (row && !isRoot(row.parentCode)){
												refreshTree(1, row.parentCode);
											}else{
												refreshTree();
											}
										}else{
											refresh();
										}
									}
								}
							}, "json");
						}else{
							addTabPage($(this), title, url, options.tabPageId);
						}
						return false;
					});
				}
			});
			return self;
		},
		ajaxLoad: function(data){ // 加载前执行方法
			
		},
		ajaxSuccess: function(data){ // 加载成功后执行方法
			
		},
		ajaxError: function(data){ // 加载失败后执行方法
			
		},
		complete: function(){ // 表格加载完成后执行
			
		}
    }, options);
	。。。。。。

       完整版见附件:jquery.jqGrid.extend.js

        。。。。。。

        // public method
	var self = {
		
		/**
		 * 直接调用jqGrid对象方法
		 */
		jqGrid: function(m, v){
			return dataGrid.jqGrid(m, v);
		},
		
		/**
		 * 设置参数
		 */
		setParam: function(params){
			return setParam(params);
		},
		
		/**
		 * 获取参数
		 */
		getParam: function(paramName){
			return getParam(paramName);
		},
		
		/**
		 * 获取行数据
		 */
		getRowData: function(rowId){
			return getRowData(rowId);
		},
		
		/**
		 * 获取选择行ID
		 */
		getSelectRow: function(){
			return getSelectRow();  
		},
		
		/**
		 * 获取选择行数组ID
		 */
		getSelectRows: function(){
			return getSelectRows();  
		},
		
		/**
		 * 设置选择行
		 */
		setSelectRow: function(id){
			return setSelectRow(id);
		},
		
		/**
		 * 刷新表格
		 */
		refresh: function(pageNo, pageSize){
			return refresh(pageNo, pageSize);
		},
		
		/**
		 * 删除树节点
		 */
		delTreeNode: function(id){
			return delTreeNode(id);
		},
		
		/**
		 * 展开树节点
		 * @param level 一次展开的层次
		 */
		expandTreeNode: function(level){
			return expandTreeNode(level);
		},

		/**
		 * 折叠树节点
		 */
		collapseTreeNode: function(){
			collapseTreeNode();
		},
		
		/**
		 * 刷新树表格
		 */
		refreshTree: function(expandLevel, parentCode){
			return refreshTree(expandLevel, parentCode);
		},
		
		/**
		 * 按钮事件绑定
		 */
		btnEventBind: function(elements){
			return btnEventBind(elements);
		}
	};

    。。。。。

    完整版见附件:jquery.jqGrid.extend.js

    return self;
};

 

 


 

本文转载自:http://thinkgem.iteye.com/blog/2145125

共有 人打赏支持
ThinkGem

ThinkGem

粉丝 991
博文 136
码字总数 21994
作品 1
济南
架构师
jqGrid与Struts2集成

因为公司项目需要,在Hibernate+Struts2的环境下,研究了一下如何使用jqGrid。 说实在的,Struts2+jqGrid不是一个很好的组合。因为jqGrid中很多功能,基本上都使用的是AJAX的访问方式,并且,...

yonge
2009/12/09
0
3
jfinal与jqgrid结合实例。

直接上代码: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <link rel="stylesheet" ......

控制自己
2013/01/05
0
8
[笔记]jqGrid之更改全局默认配置与隔行变色(即奇数行与偶数行颜色不同)~

项目开发中有个需求,需要jqGrid列表的奇数行和偶数行使用不同的颜色显示,从而让人看起来更舒适! 原来jqGrid里面默认就内置了隔行变色显示的功能,只是默认配置下没有启用而已! jqGrid的官...

leeoo
2011/12/24
0
1
jqGrid的编辑——基于Form Editing的增、删、改操作

上一篇文章中,我们讲了一下jqGrid编辑的基础知识。本文我们基于Form Editing的编辑模式详细举例讲解一下。 Form Editing编辑模式主要的方法有几个,分别是editGridRow——用来修改记录,edi...

yonge
2009/12/14
0
1
解决jqGrid新增或编辑记录保存成功但提示错误的问题

在上一篇文章《》中,我们详细说明了一下如何创建一个可以使用增删改操作的jqGrid。 但是在实际的修改、新增保存中,会看到如下的错误提示:error Status:"OK".Error code: 900。实际上,修改...

yonge
2009/12/14
0
1

没有更多内容

加载失败,请刷新页面

加载更多

MySQL 到底支不支持事务嵌套?

最近开发中遇到了使用MySQL,多次开启事务,出现了数据错乱问题,伪代码如下: begin; # 操作1 begin; # 操作2 rollback; 执行完后出现了操作1的数据真正写入,只有操作2的数据回滚...

宇润
31分钟前
3
0
fastDfs应用(安装过程待写)

1.效果 2.安装 2.1 导入已经安装好fastDFS的镜像 2.1.1 导入镜像 2.1.2 更改系统兼容性 2.1.3 开机 2.1.4 修改 一下内容 2.1.4.1 修改系统的ip 原来系统ip...

Lucky_Me
35分钟前
3
0
5. Python3源码—字符串(str)对象

5.1. 字符串对象 字符串对象是“变长对象”。 5.1.1. Python中的创建 Python中字符串(strs)对象最重要的创建方法为PyUnicode_DecodeUTF8Stateful,如下Python语句最终会调用到PyUnicode_D...

Mr_zebra
54分钟前
3
0
第十章:路由网关(Zuul)进阶:过滤器、异常处理

第十章:路由网关(Zuul)进阶:过滤器、异常处理 简单介绍了关于Zuul的一些简单使用以及一些路由规则的简单说明。而对于一个统一网关而言,需要处理各种各类的请求,对不同的url进行拦截,或者...

DemonsI
56分钟前
2
0
nginx屏蔽指定接口(URL)

Step1:需求 web平台上线后,需要屏蔽某个服务接口,但又不想重新上线,可以采用nginx屏蔽指定平台接口的办法 Step2:具体操作 location /dist/views/landing/UNIQUE_BEACON_URL { re...

Linux_Anna
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部