前段时间在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;
};
相关推荐
jqgrid二次封装，快速加载grid表格，不改变原有的使用习惯，增加一些默认处理逻辑 var grid = $.jqGrid.init({ url: "<%=basePath%>/component/config/select.html", add: {content:"<%=basePath%>/admin/...
jqGrid是一款基于jQuery的开源数据网格组件，它允许在网页上展示、操作和管理大量数据。这个组件提供了丰富的功能，包括数据的分页、排序、过滤、编辑以及自定义列等，广泛应用于Web应用程序的数据展示模块。在了解...
jqGrid是一款功能强大的JavaScript表格插件，用于在网页上展示并操作数据，它支持各种操作，包括数据的加载、排序、搜索以及分页等。在这个"jqgrid加载本地数据并且分页例子"中，我们将深入探讨如何利用jqGrid实现从...
JqGrid是一款基于jQuery的数据表格插件，它提供了一种高效、可定制的方式来展示和操作表格数据。本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题，以帮助开发者更好地理解和实现这一功能。 首先，JqGrid允许...
`loadonce: true` 这个配置项是关键，它告诉JQGrid只需请求一次数据，并在本地进行后续的分页操作。当这个选项被启用后，JQGrid会自动处理数据的分页，而不再向服务器发送新的请求。 服务器端需要返回所有数据，...
JqGrid是一款功能强大的...总之，C#封装的JqGrid插件为.NET开发者提供了一种高效且灵活的方式来处理网页上的数据展示和管理。通过学习和掌握C#与JqGrid的结合，你可以创建出功能强大、用户体验良好的数据驱动应用程序。
在本文中，我们将深入探讨Spring MVC分页组件和JqGrid如何协同工作，实现高效的数据展示和导出功能。Spring MVC作为Java企业级应用的主流框架，提供了强大的MVC架构支持，而JqGrid则是一个功能丰富的jQuery插件，专...
jqGrid是一款功能强大的JavaScript表格插件，用于在...总的来说，jqGrid是一个强大且灵活的数据网格组件，适用于各种数据展示和管理需求。通过深入理解和实践，开发者可以充分利用其特性，构建出高效、美观的数据应用。
如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下： var ids=$(‘#gridTable').jqGrid(‘getGridParam','selarrrow'); 如果想获取选择的行的数据，只要传入rowId即可，如下： var rowData = $...
本地数据分页是指在客户端进行数据的分页处理，而不是将所有数据一次性从服务器获取。这种模式适用于数据量不大，或者对实时性要求不高的场景。在jqGrid中，本地数据分页可以通过设置`datatype`为`local`来实现。...
jqGrid是一款功能强大的JavaScript数据网格组件，用于在Web应用中展示和操作大量数据。它基于jQuery库，提供了丰富的特性和自定义选项，使得在网页上创建交互式表格变得简单易行。这款组件的设计目标是提供数据的...
要加载本地数据，首先你需要准备一个二维数组或JSON对象，其中包含你要显示的数据。每行数据通常是一个对象，包含了对应列的键值对。例如： ```javascript var myData = [ {id: "1", name: "John Doe", age: "30...
jqGrid是一款功能强大的JavaScript表格插件，主要用于网页数据的展示、编辑和管理。它基于jQuery库，提供了丰富的功能，如分页、排序、过滤、编辑、添加、删除和搜索等，使得网页上的表格操作变得更加便捷和高效。在...
首先，JQGrid是一个强大的JavaScript组件，它提供了表格数据的展示、编辑、排序、过滤等多种功能。在MVC（Model-View-Controller）架构中，JQGrid通常作为View的部分，用于展示由Controller处理并传送到前端的数据...
"基于jqgrid实现树形菜单分页列表查询"这一主题，旨在创建一个既能展示层级结构又能进行高效分页查询的表格组件。jqGrid是一款强大的jQuery插件，它提供了丰富的功能，如数据网格、分页、排序、过滤、编辑等，同时...
`jqGrid`是一款基于JavaScript的开源数据网格组件，主要用于在Web应用中展示和管理大量结构化数据。它提供了丰富的特性和功能，包括数据的分页、排序、过滤、编辑以及对服务器端数据的异步操作。jqGrid与jQuery库...
jqGrid是一款基于JavaScript的开源数据网格组件，它是jQuery库的一部分，用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性，深受开发者的喜爱。它允许用户进行...
jqGrid是一款功能强大的JavaScript数据网格插件，常用于在网页中展示和操作大量结构化的数据。...但jqGrid作为一款经典的前端数据网格组件，其基础知识和使用经验对于前端开发人员来说依然有价值。
"jqgrid_位于上端的合计行" 指的是在 jqGrid 表格的顶部显示总计行，用于快速汇总列表中的数值数据。 要实现这个功能，我们需要了解 jqGrid 的几个关键配置选项和方法。首先，我们需要启用 `footerrow` 选项，这将...