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="1080px;height:450px"> <thead> <tr> <th data-options="field:'name',160">资源名称</th> <th data-options="field:'description',100">资源描述</th> <th data-options="field:'code',100, align:'center' ">标识码</th> <th data-options="field:'type',50, align:'center' ">类型</th> <th data-options="field:'status',40, align:'center' ">状态</th> <th data-options="field:'gmtCreate',80,align:'center' ">创建时间</th> <th data-options="field:'gmtModified',80, align:'center'">最后修改时间</th> <th data-options="field:'id',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的这个学起来也不是很难。