jquery-treegrid树状表格的使用（.Net平台）

上一篇介绍了DataTable，这一篇在DT的基础之上再使用jquery的一款插件：treegrid,官网地址：http://maxazan.github.io/jquery-treegrid/

一、使用treegrid，需要以下支持

jquery.min.js+jquery.treegrid.min.js

二、后端提供树状列表格式的集合数据，借助前端的DT的配置控制，来在页面上输出满足treegrid格式要求的html

前台：

  1 @using Model
  2 @{
  3     Layout = null;
  4     UserInfo userInfo = null;
  5 
  6     if (ViewData["LoginUser"] != null)
  7     {
  8         userInfo = ViewData["LoginUser"] as UserInfo;
  9     }
 10     else
 11     {
 12         Response.Redirect("/Login/Index");
 13     }
 14 }
 15 
 16 <!DOCTYPE html>
 17 
 18 <html>
 19 <head>
 20     <meta charset="utf-8">
 21     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 22     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 23     <title>用户列表</title>
 24     <link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" />
 25     <link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" />
 26     <link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" />
 27     <link href="~/Content/Scripts/treegrid/css/jquery.treegrid.css" rel="stylesheet" />
 28 
 29     <style>
 30         .page-container {
 31             padding: 10px;
 32         }
 33 
 34         .operation {
 35             background: #EFEEF0;
 36             padding: 3px;
 37         }
 38 
 39         .search {
 40             background: #EFEEF0;
 41             padding: 5px;
 42             margin-top: 5px;
 43         }
 44 
 45         .table {
 46             margin-top: 10px;
 47         }
 48 
 49         .dataTables_info {
 50             margin-left: 5px;
 51         }
 52 
 53         #table1_info {
 54             padding: 0;
 55         }
 56 
 57         #table1_length {
 58             margin-left: 15px;
 59         }
 60     </style>
 61     <!--引入脚本解决兼容性(hack技术，必须放入head中)-->
 62     <!--[if lt IE 9]>
 63     <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
 64     <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
 65     <script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script>
 66     <![endif]-->
 67 </head>
 68 <body>
 69     <div class="page-container">
 70         <div class="operation">
 71             @Html.Partial("CRUDBtn", userInfo)
 72         </div>
 73 
 74         <div class="table">
 75             <table id="table1" class="table table-border table-bordered table-bg table-hover">
 76                 <thead>
 77                     <tr class="text-c">
 78                         <th><input type="checkbox" name="" value=""></th>
 79                         <th>菜单名</th>
 80                         <th>请求路径</th>
 81                         <th>描述</th>
 82                         <th>添加时间</th>
 83                         <th>修改时间</th>
 84                     </tr>
 85                 </thead>
 86             </table>
 87         </div>
 88     </div>     
 89 </body>
 90 </html>
 91 <script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
 92 <script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script>
 93 <script src="~/Content/Scripts/layer/2.1/layer.js"></script>
 94 <script src="~/Content/Scripts/My97DatePicker/WdatePicker.js"></script>
 95 <script src="~/Content/Scripts/h-ui/js/H-ui.js"></script>
 96 <script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script>
 97 <script src="~/Content/Scripts/treegrid/js/jquery.treegrid.min.js"></script>
 98 
 99 <script type="text/javascript">
100     var table1 = null;
101     $(function () {
102         table1 = initializeTable();
103         clickDeal();
104     });
105 
106     /*点击处理*/
107     function clickDeal() {
108         var addBtn = $("#add");
109         var deleteBtn = $("#delete");
110         var editBtn = $("#edit");
111         var viewBtn = $("#view");
112 
113         $("#search").click(function () {
114             table1.ajax.reload();
115             return false;
116         });
117         if (addBtn != null) {
118             addBtn.click(function () {
119                 var title = $(this).text().substring(1).trim();
120                 var url = $(this).attr("url");
121 
122                 layer_show(title, url, 600, 360);
123             });
124         }
125         if (deleteBtn != null) {
126             deleteBtn.click(function () {
127                 var idArr = [];
128                 var url = $(this).attr("url");
129 
130                 $("input:checkbox[name=id]:checked").each(function () {
131                     var item = this;
132                     idArr.push($(item).val());
133                 });
134                 if (idArr.length == 0) {
135                     layer.msg("请至少选择一个选项", { icon: 2, time: 2000 });
136                 }
137                 else {
138                     layer.confirm('确认要删除吗？', function (index) {
139                         var loadIndex = layer.load();
140                         $.ajax({
141                             url: url,
142                             type: "post",
143                             data: { "idArrStr": idArr.toString() },
144                             dataType: "json",
145                             success: function (data) {
146                                 if (data.Pass) {
147                                     layer.close(loadIndex);
148                                     layer.msg(data.Msg, { icon: 1, time: 2000 });
149                                     table1.ajax.reload(null, false);
150                                 } else {
151                                     layer.msg(data.Msg, { icon: 1, time: 2000 });
152                                 }
153                             },
154                             error: function (msg) {
155                                 layer.msg(msg.status);
156                             }
157                         });
158                     });
159                 }
160             });
161         }
162         if (editBtn != null) {
163             editBtn.click(function () {
164                 var idArr = [];
165                 var title = $(this).text().substring(1).trim();
166                 var url = $(this).attr("url");
167 
168                 $("input:checkbox[name=id]:checked").each(function () {
169                     var item = this;
170                     idArr.push($(item).val());
171                 });
172                 if (idArr.length != 1) {
173                     layer.msg("请选择一个选项", { icon: 2, time: 2000 });
174                 }
175                 else {
176                     url += "?id=" + idArr[0];
177                     layer_show(title, url, 600, 360);
178                 }
179             });
180         }
181         if (viewBtn != null) {
182             viewBtn.click(function () {
183                 var idArr = [];
184                 var title = $(this).text().substring(1).trim();
185                 var url = $(this).attr("url");
186 
187                 $("input:checkbox[name=id]:checked").each(function () {
188                     var item = this;
189                     idArr.push($(item).val());
190                 });
191                 if (idArr.length != 1) {
192                     layer.msg("请选择一个选项", { icon: 2, time: 2000 });
193                 }
194                 else {
195                     url += "?id=" + idArr[0];
196                     layer_show(title, url, 600, 360);
197                 }
198             });
199         }
200 
201     }
202 
203     /*初始化table*/
204     function initializeTable() {
205         var table = $("#table1").DataTable({
206             /****************************************表格数据加载****************************************************/
207             "serverSide": true,
208             "ajax": {//ajax请求数据源
209                 "url": "/Power/Manager/Search",
210                 "type": "post",
211                 "data": function (data) {//添加额外的数据给服务器
212                 }
213             },
214             "columns": [//列绑定
215                 { "defaultContent": "" },
216                 { "data": "PowerName" },
217                 { "data": "Url" },
218                 { "data": "Description" },
219                 { "data": "AddTime" },
220                 { "data": "ModifyTime" }
221             ],
222             "columnDefs": [//列定义
223                 {
224                     "targets": [0],
225                     "data": "PowerId",
226                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
227                         return "<input type='checkbox' value='" + data + "' name='id'>";
228                     }
229                 },
230                 {
231                     "targets": [4],
232                     "data": "AddTime",
233                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
234                         if (data == null || data.trim() == "") { return "/"; }
235                         else {
236                             var dateTime = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10));
237                             var month = dateTime.getMonth() + 1 < 10 ? "0" + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1;
238                             var date = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate();
239                             return dateTime.getFullYear() + "/" + month + "/" + date;
240                         }
241                     }
242                 },
243                 {
244                     "targets": [5],
245                     "data": "ModifyTime",
246                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
247                         if (data == null || data.trim() == "") { return "/"; }
248                         else {
249                             var dateTime = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10));
250                             var month = dateTime.getMonth() + 1 < 10 ? "0" + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1;
251                             var date = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate();
252                             return dateTime.getFullYear() + "/" + month + "/" + date;
253                         }
254                     }
255                 },
256             ],
257             "rowCallback": function (row, data, displayIndex) {//行定义
258                 if (data.ParentId != "0") {
259                     $(row).attr("class", "text-c treegrid-" + data.PowerId + " treegrid-parent-" + data.ParentId);
260                 } else {
261                     $(row).attr("class", "text-c treegrid-" + data.PowerId);
262                 }
263             },
264             "initComplete": function (settings, json) { //表格初始化完成后调用
265                 $("#table1").treegrid({
266                     "initialState": 'collapsed',
267                 });
268             },
269             /****************************************表格数据加载****************************************************/
270             /****************************************表格样式控制****************************************************/
271             "dom": "t<'dataTables_info'il>p",//表格布局
272             "processing": true,//等待加载效果
273             "language": {//语言国际化
274                 "lengthMenu": "每页 _MENU_ 条",
275                 "zeroRecords": "没有找到记录",
276                 "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
277                 "infoEmpty": "无记录",
278                 "paginate":
279                 {
280                     "first": "首页",
281                     "previous": "前一页",
282                     "next": "后一页",
283                     "last": "末页"
284                 },
285                 "processing": "表格在努力渲染中......",
286                 "loadingRecords": "加载记录中...",//注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效
287             },
288             "paging": false,//分页功能
289             "ordering": false,//排序功能
290             "autoWidth": false,//自动宽度（这里关闭后，可以随着左侧的隐藏而扩展页面一起100%宽度）
291             /****************************************表格样式控制****************************************************/
292         });
293         return table;
294     }
295 
296 </script>

View Code

后台：

 1 public ActionResult Search(DataTable dt)
 2         {
 3             int total;
 4 
 5             IQueryable<Model.Power> powerIq = CurrentBllSession.PowerBll.GetIQueryable();
 6             total = powerIq.Count();
 7             List<Model.Power> powerList = powerIq.ToList();
 8             powerList = TreeGridList(powerList);
 9             dt.recordsTotal = total;
10             dt.recordsFiltered = total;
11             dt.data = powerList;
12 
13             return Json(dt);
14         }
15 
16         /// <summary>
17         /// 将List转换为TreeGrid格式的List
18         /// </summary>
19         private List<Model.Power> TreeGridList(List<Model.Power> powerList)
20         {
21             List<Model.Power> treegridList=new List<Model.Power>();
22 
23             foreach (var powerOne in powerList.Where(a => a.ParentId == "0" || a.PowerId.Length == 4).OrderBy(a => a.Sort))//一级菜单
24             {
25                 treegridList.Add(powerOne);
26                 foreach (var powerTwo in powerList.Where(a => a.ParentId != "0" && a.PowerId.Length == 8 && a.ParentId == powerOne.PowerId).OrderBy(a=>a.Sort))//二级菜单
27                 {
28                     treegridList.Add(powerTwo);
29                     foreach (var powerBtn in powerList.Where(a => a.ParentId != "0" && a.PowerId.Length == 8 && a.ParentId == powerTwo.PowerId).OrderBy(a => a.Sort))//按钮
30                     {
31                         treegridList.Add(powerBtn);
32                     }
33                 }
34             }
35 
36             return treegridList;
37         }

View Code

解释说明：

treegrid是通过tr标签上的class内容和tr的位置关系来组织表格中行之间的父子关系和位置关系的，

DT中的配置项：

"rowCallback": function (row, data, displayIndex) {//行定义
                if (data.ParentId != "0") {
                    $(row).attr("class", "text-c treegrid-" + data.PowerId + " treegrid-parent-" + data.ParentId);
                } else {
                    $(row).attr("class", "text-c treegrid-" + data.PowerId);
                }
            },

就是来控制父子关系的。

而后台的List顺序转换，是为了调整好输出的顺序，从而来控制tr之间的位置关系。

通过DT初始化好表格之后，调用

$("#table1").treegrid({
"initialState": 'collapsed',
});

即可，绘制好树状表格。

效果图：

你的山楂能分点给我吗？

相关阅读:
面试题系列--【vue的生命周期】
面试题系列--【hash和history的区别】
ES6系列--【事件循环 EventLoop（Promise，setTimeOut，async/await执行顺序）】
ES6系列--【ES6数组新增方法】
ES6系列--【ES6 新增字符串方法】
微信小程序系列--【VXML语法、VMSS样式、条件渲染、列表渲染、模板、引用、组件、事件系统】
微信小程序系列--【小程序注册、工程创建、全局配置、页面配置】
微信小程序系列---【五星好评案例】
react系列---【Hooks】
2019.9.18-单向循环链表删除元素（+之前完整代码）
原文地址：https://www.cnblogs.com/Txy-Net/p/Treegrid01.html