数据列表组件 jqGrid 二次封装

最新推荐文章于 2020-04-21 17:13:21 发布

weixin_33725272

最新推荐文章于 2020-04-21 17:13:21 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

文章标签： json python javascript ViewUI

原文链接：https://my.oschina.net/thinkgem/blog/713405

本文介绍了一种在jqGrid基础上进行二次封装的方法，通过该封装减少了50%的代码量，并提高了开发效率。封装后的组件提供了多种表格展示形式，如普通数据表格、树形结构表格及多级表头等。

2019独角兽企业重金招聘Python工程师标准>>>

前段时间在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;
};

转载于:https://my.oschina.net/thinkgem/blog/713405