1. 前言
最近在开发系统权限管理相关的功能，主要包含用户管理，资源管理，角色管理，组类别管理等小的模块。之前的Web开发中也用过jQueryEasyUI插件，感觉这款插件简单易用，上手很快。以前用到的主要是Datagrid组件，这次为了区分资源的父子关系，打造更好的用户体验，遂探索一下Treegrid组件。
2.jQueryEasyUI简介
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
EasyUI Treegrid树形网格：扩展自 $.fn.datagrid.defaults。通过 $.fn.treegrid.defaults 重写默认的 defaults。树形网格（treegrid）用于以网格形式显示分层数据。它是基于数据网格（datagrid）的，并结合了树视图（treeview）和可编辑网格。树形网格（treegrid）允许您创建可定制的、可异步展开的行，并以多列形式显示分层数据。
jQuery EasyUI官网：http://www.jeasyui.com/
jQuery EasyUI中文网：Treegrid：http://www.jeasyui.net/plugins/186.html
3.基于EasyUI Treegrid的权限管理资源列表
⑴ 引入EasyUI相关的js和css文件：
<script type="text/javascript" src="/assets/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/scripts/jquery-easyui-1.4.5/jquery.min.js"></script>
<script type="text/javascript" src="/assets/scripts/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/scripts/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/assets/scripts/jquery-easyui-1.4.5/themes/icon.css">
⑵ 在HTML标签中创建树形网格(treegrid)：
<table id="tgTab" title="查询结果" class="easyui-treegrid" style="width:1080px;height:450px">
<thead>
<tr>
<th data-options="field:'name',width:160">资源名称</th>
<th data-options="field:'description',width:100">资源描述</th>
<th data-options="field:'code',width:100, align:'center' ">标识码</th>
<th data-options="field:'type',width:50, align:'center' ">类型</th>
<th data-options="field:'status',width:40, align:'center' ">状态</th>
<th data-options="field:'gmtCreate',width:80,align:'center' ">创建时间</th>
<th data-options="field:'gmtModified',width:80, align:'center'">最后修改时间</th>
<th data-options="field:'id',width:60,formatter:rowFormatter, align:'center' ">操作</th>
</tr>
</thead>
</table>
⑶ Js初始化Treegrid资源列表：
(function($){
function pagerFilter(data){
if ($.isArray(data)){
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var state = dg.data('treegrid');
var opts = dg.treegrid('options');
var pager = dg.treegrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber: pageNum,
pageSize: pageSize,
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
dg.treegrid('loadData',state.originalRows);
},
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
if (!state.originalRows){
state.originalRows = data.rows;
}
var topRows = [];
var childRows = [];
$.map(state.originalRows, function(row){
row._parentId ? childRows.push(row) : topRows.push(row);
});
data.total = topRows.length;
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = $.extend(true,[],topRows.slice(start, end).concat(childRows));
return data;
}
var appendMethod = $.fn.treegrid.methods.append;
var loadDataMethod = $.fn.treegrid.methods.loadData;
$.extend($.fn.treegrid.methods, {
clientPaging: function(jq){
return jq.each(function(){
var state = $(this).data('treegrid');
var opts = state.options;
opts.loadFilter = pagerFilter;
var onBeforeLoad = opts.onBeforeLoad;
opts.onBeforeLoad = function(row,param){
state.originalRows = null;
onBeforeLoad.call(this, row, param);
};
$(this).treegrid('loadData', state.data);
$(this).treegrid('reload');
});
},
loadData: function(jq, data){
jq.each(function(){
$(this).data('treegrid').originalRows = null;
});
return loadDataMethod.call($.fn.treegrid.methods, jq, data);
},
append: function(jq, param){
return jq.each(function(){
var state = $(this).data('treegrid');
if (state.options.loadFilter == pagerFilter){
$.map(param.data, function(row){
row._parentId = row._parentId || param.parent;
state.originalRows.push(row);
});
$(this).treegrid('loadData', state.originalRows);
} else {
appendMethod.call($.fn.treegrid.methods, jq, param);
}
})
}
});
})(jQuery);
$(function(){
$('#tgTab').treegrid({
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: '../api/initResourcesList?type=-1',
method: 'get',
idField: 'id',
treeField: 'name',
pagination: true,
pageSize: 80,
pageList: [80,120,160]
}).treegrid('clientPaging');
});
function rowFormatter(value, row, index){
//value为该条数据的field字段的值，row为该行（显示在页面）数据的所有信息，index当前行，单引号里面必须双引号，双引号里面必须单引号，里面再有就需转义
return '<img id="update" src="/assets/images/layout/update.png" onclick="updateRes('+value+')"/> ' +
' <img id="delete" src="/assets/images/layout/delete.png" onclick="deleteRes('+value+')"/>';
}
⑷ Java后台生成资源列表JSON数据：
/**
* 将资源封装成资源树
* @param list
* @param parentId
*/
@SuppressWarnings("deprecation")
private List<Map<String,Object>> createTreeGridTree(List<UsersResource> list) {
//存放转换后的资源树
List<Map<String,Object>> treeGridList =new ArrayList<Map<String,Object>>(); for (int i = 0; i < list.size(); i++) {
Map<String, Object> map = null;
UsersResource res = list.get(i);
if (res.getParentId().equals(0)) {
map = new HashMap<String, Object>();
map.put("id", res.getId());
map.put("name", res.getName());
map.put("description", res.getDescription());
map.put("code", res.getCode());
if (res.getType() == 0) {
map.put("type", "URL资源");
} else if (res.getType() == 1) {
map.put("type", "组件资源");
} else {
map.put("type", "虚拟根资源");
}
if (res.getStatus() == 0) {
map.put("status", "隐藏");
} else {
map.put("status", "显示");
}
map.put("gmtCreate", res.getGmtCreate().toLocaleString());
map.put("gmtModified", res.getGmtModified().toLocaleString());
map.put("children", createTreeGridChildren(list, res.getId()));
}
if (map != null) {
treeGridList.add(map);
}
}
return treeGridList;
} /**
* 递归设置资源树
* @param list
* @param parentId
* @return childList
*/
@SuppressWarnings("deprecation")
private List<Map<String, Object>> createTreeGridChildren(List<UsersResource> list, int parentId) {
List<Map<String, Object>> childList = new ArrayList<Map<String, Object>>();
for (int j = 0; j < list.size(); j++) {
Map<String, Object> map = null;
UsersResource treeChild = list.get(j);
if (treeChild.getParentId().equals(parentId)) {
map = new HashMap<String, Object>();
map.put("id", treeChild.getId());
map.put("name", treeChild.getName());
map.put("description", treeChild.getDescription());
map.put("code", treeChild.getCode());
if (treeChild.getType() == 0) {
map.put("type", "URL资源");
} else if (treeChild.getType() == 1) {
map.put("type", "组件资源");
} else {
map.put("type", "虚拟根资源");
}
if (treeChild.getStatus() == 0) {
map.put("status", "隐藏");
} else {
map.put("status", "显示");
}
map.put("gmtCreate", treeChild.getGmtCreate().toLocaleString());
map.put("gmtModified", treeChild.getGmtModified().toLocaleString());
map.put("children", createTreeGridChildren(list, treeChild.getId()));
} if (map != null) {
childList.add(map);
}
}
return childList;
} @GET
@Path("initResourcesList")
@Override
public Object initResourcesList(String page, String rows, String name,
String code, int type) {
System.out.println("资源传参：page："+ page +"，rows："+ rows +
"，name："+ name +"，code："+ code + "，type："+ type); UsersResource usersRes = new UsersResource();
usersRes.setName(name);
usersRes.setCode(code);
usersRes.setType(type);
int recordNum = 0; // 总记录数
recordNum = usersResourceService.getUsersResourceTotalNumBySQL(usersRes);
//System.out.println("资源总条数：" + recordNum); // *******分页******************
int pageSize = 80;
pageSize = Integer.parseInt(rows);
int curPageNo = 1;
curPageNo = Integer.parseInt(page); // 当前页号
int startIndex = 0; // 开始索引
if (recordNum > 0) {
if (curPageNo == 1) {
startIndex = 0; // 开始索引
} else {
startIndex = curPageNo * pageSize - pageSize; // 开始索引
}
}
Map<String, Object> paramMap = new HashMap<String, Object>();
paramMap.put("startIndex", startIndex);
paramMap.put("pageSize", pageSize);
paramMap.put("name", name);
paramMap.put("code", code);
paramMap.put("type", type); List<UsersResource> resourceList = new ArrayList<UsersResource>();
resourceList = usersResourceService.searchUsersResourceBySQL(paramMap); Map<String, Object> result = new HashMap<String, Object>(2);
JSONArray jsonArray = new JSONArray(); List<Map<String,Object>> treeGridList =new ArrayList<Map<String,Object>>();
//调用方法实现树
treeGridList = createTreeGridTree(resourceList);
jsonArray = JSONArray.fromObject(treeGridList); result.put("total", recordNum);
result.put("rows", jsonArray);
//System.out.println("json：" + JSONObject.fromObject(result).toString());
return JSONObject.fromObject(result);
}
Model类：UsersResource
package com.ouc.mkhl.platform.authority.model; import java.io.Serializable;
import java.util.Date; //RBAC权限管理用户资源信息
public class UsersResource implements Serializable { private static final long serialVersionUID = 10002121L; private Integer id; //用户资源Id private Integer authId; //权限中心资源Id private String name; //资源名称 private String description; //资源描述 private String url; //链接地址 private Integer type; //资源类型：0-URL资源，1-组件资源 private Integer status; //状态：0-隐藏，1-展示 private String code; //标识码 private String configuration; //配置项 private String moduleName; //模块名称 private Date gmtCreate; //创建时间 private Date gmtModified; //最后修改时间 private String createBy; //创建人 private String lastModifedBy; //最后修改人 private Integer orderIndex; //排序号 private Integer parentId; //父资源 public Integer getId() {
return id;
} public void setId(Integer id) {
this.id = id;
} public Integer getAuthId() {
return authId;
} public void setAuthId(Integer authId) {
this.authId = authId;
} public String getName() {
return name;
} public void setName(String name) {
this.name = name == null ? null : name.trim();
} public String getDescription() {
return description;
} public void setDescription(String description) {
this.description = description == null ? null : description.trim();
} public String getUrl() {
return url;
} public void setUrl(String url) {
this.url = url == null ? null : url.trim();
} public Integer getType() {
return type;
} public void setType(Integer type) {
this.type = type;
} public Integer getStatus() {
return status;
} public void setStatus(Integer status) {
this.status = status;
} public String getCode() {
return code;
} public void setCode(String code) {
this.code = code == null ? null : code.trim();
} public String getConfiguration() {
return configuration;
} public void setConfiguration(String configuration) {
this.configuration = configuration == null ? null : configuration
.trim();
} public String getModuleName() {
return moduleName;
} public void setModuleName(String moduleName) {
this.moduleName = moduleName == null ? null : moduleName.trim();
} public Date getGmtCreate() {
return gmtCreate;
} public void setGmtCreate(Date gmtCreate) {
this.gmtCreate = gmtCreate;
} public Date getGmtModified() {
return gmtModified;
} public void setGmtModified(Date gmtModified) {
this.gmtModified = gmtModified;
} public String getCreateBy() {
return createBy;
} public void setCreateBy(String createBy) {
this.createBy = createBy == null ? null : createBy.trim();
} public String getLastModifedBy() {
return lastModifedBy;
} public void setLastModifedBy(String lastModifedBy) {
this.lastModifedBy = lastModifedBy == null ? null : lastModifedBy
.trim();
} public Integer getOrderIndex() {
return orderIndex;
} public void setOrderIndex(Integer orderIndex) {
this.orderIndex = orderIndex;
} public Integer getParentId() {
return parentId;
} public void setParentId(Integer parentId) {
this.parentId = parentId;
}
}
4.资源列表最终效果
最终效果丑了点，需要请美工美化一下，还有分页的地方有个Bug需要改一改。分页Bug如下图：
Treegrid扩展自Datagrid，用过Datagrid的这个学起来也不是很难。