最近在开发系统权限管理相关的功能，主要包含用户管理，资源管理，角色管理，组类别管理等小的模块。之前的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 /> ' + ' <img >; }