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