上一篇介紹了DataTable，這一篇在DT的基礎(chǔ)之上再使用jquery的一款插件：treegrid,官網(wǎng)地址：http://maxazan.github.io/jquery-treegrid/
一、使用treegrid，需要以下支持
jquery.min.js+jquery.treegrid.min.js
二、后端提供樹狀列表格式的集合數(shù)據(jù)，借助前端的DT的配置控制，來在頁面上輸出滿足treegrid格式要求的html
前臺：
@using Model@{ Layout = null; UserInfo userInfo = null; if (ViewData["LoginUser"] != null) { userInfo = ViewData["LoginUser"] as UserInfo; } else { Response.Redirect("/Login/Index"); }}<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>用戶列表</title> <link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" /> <link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" /> <link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" /> <link href="~/Content/Scripts/treegrid/css/jquery.treegrid.css" rel="stylesheet" /> <style> .page-container { padding: 10px; } .operation { background: #EFEEF0; padding: 3px; } .search { background: #EFEEF0; padding: 5px; margin-top: 5px; } .table { margin-top: 10px; } .dataTables_info { margin-left: 5px; } #table1_info { padding: 0; } #table1_length { margin-left: 15px; } </style> <!--引入腳本解決兼容性(hack技術(shù)，必須放入head中)--> <!--[if lt IE 9]> <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script> <script src="~/Content/Scripts/html5_css3/respond.min.js"></script> <script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script> <![endif]--></head><body> <div class="page-container"> <div class="operation"> @Html.Partial("CRUDBtn", userInfo) </div> <div class="table"> <table id="table1" class="table table-border table-bordered table-bg table-hover"> <thead> <tr class="text-c"> <th><input type="checkbox" name="" value=""></th> <th>菜單名</th> <th>請求路徑</th> <th>描述</th> <th>添加時間</th> <th>修改時間</th> </tr> </thead> </table> </div> </div> </body></html><script src="~/Content/Scripts/jquery-2.0.3.min.js"></script><script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script><script src="~/Content/Scripts/layer/2.1/layer.js"></script><script src="~/Content/Scripts/My97DatePicker/WdatePicker.js"></script><script src="~/Content/Scripts/h-ui/js/H-ui.js"></script><script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script><script src="~/Content/Scripts/treegrid/js/jquery.treegrid.min.js"></script><script type="text/javascript"> var table1 = null; $(function () { table1 = initializeTable(); clickDeal(); }); /*點擊處理*/ function clickDeal() { var addBtn = $("#add"); var deleteBtn = $("#delete"); var editBtn = $("#edit"); var viewBtn = $("#view"); $("#search").click(function () { table1.ajax.reload(); return false; }); if (addBtn != null) { addBtn.click(function () { var title = $(this).text().substring(1).trim(); var url = $(this).attr("url"); layer_show(title, url, 600, 360); }); } if (deleteBtn != null) { deleteBtn.click(function () { var idArr = []; var url = $(this).attr("url"); $("input:checkbox[name=id]:checked").each(function () { var item = this; idArr.push($(item).val()); }); if (idArr.length == 0) { layer.msg("請至少選擇一個選項", { icon: 2, time: 2000 }); } else { layer.confirm('確認要刪除嗎？', function (index) { var loadIndex = layer.load(); $.ajax({ url: url, type: "post", data: { "idArrStr": idArr.toString() }, dataType: "json", success: function (data) { if (data.Pass) { layer.close(loadIndex); layer.msg(data.Msg, { icon: 1, time: 2000 }); table1.ajax.reload(null, false); } else { layer.msg(data.Msg, { icon: 1, time: 2000 }); } }, error: function (msg) { layer.msg(msg.status); } }); }); } }); } if (editBtn != null) { editBtn.click(function () { var idArr = []; var title = $(this).text().substring(1).trim(); var url = $(this).attr("url"); $("input:checkbox[name=id]:checked").each(function () { var item = this; idArr.push($(item).val()); }); if (idArr.length != 1) { layer.msg("請選擇一個選項", { icon: 2, time: 2000 }); } else { url += "?id=" + idArr[0]; layer_show(title, url, 600, 360); } }); } if (viewBtn != null) { viewBtn.click(function () { var idArr = []; var title = $(this).text().substring(1).trim(); var url = $(this).attr("url"); $("input:checkbox[name=id]:checked").each(function () { var item = this; idArr.push($(item).val()); }); if (idArr.length != 1) { layer.msg("請選擇一個選項", { icon: 2, time: 2000 }); } else { url += "?id=" + idArr[0]; layer_show(title, url, 600, 360); } }); } } /*初始化table*/ function initializeTable() { var table = $("#table1").DataTable({ /****************************************表格數(shù)據(jù)加載****************************************************/ "serverSide": true, "ajax": {//ajax請求數(shù)據(jù)源 "url": "/Power/Manager/Search", "type": "post", "data": function (data) {//添加額外的數(shù)據(jù)給服務(wù)器 } }, "columns": [//列綁定 { "defaultContent": "" }, { "data": "PowerName" }, { "data": "Url" }, { "data": "Description" }, { "data": "AddTime" }, { "data": "ModifyTime" } ], "columnDefs": [//列定義 { "targets": [0], "data": "PowerId", "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥 return "<input type='checkbox' value='" + data + "' name='id'>"; } }, { "targets": [4], "data": "AddTime", "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥 if (data == null || data.trim() == "") { return "/"; } else { var dateTime = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10)); var month = dateTime.getMonth() + 1 < 10 ? "0" + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1; var date = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate(); return dateTime.getFullYear() + "/" + month + "/" + date; } } }, { "targets": [5], "data": "ModifyTime", "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥 if (data == null || data.trim() == "") { return "/"; } else { var dateTime = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10)); var month = dateTime.getMonth() + 1 < 10 ? "0" + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1; var date = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate(); return dateTime.getFullYear() + "/" + month + "/" + date; } } }, ], "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); } }, "initComplete": function (settings, json) { //表格初始化完成后調(diào)用 $("#table1").treegrid({ "initialState": 'collapsed', }); }, /****************************************表格數(shù)據(jù)加載****************************************************/ /****************************************表格樣式控制****************************************************/ "dom": "t<'dataTables_info'il>p",//表格布局 "processing": true,//等待加載效果 "language": {//語言國際化 "lengthMenu": "每頁 _MENU_ 條", "zeroRecords": "沒有找到記錄", "info": "當(dāng)前顯示 _START_ 到 _END_ 條，共 _TOTAL_條", "infoEmpty": "無記錄", "paginate": { "first": "首頁", "previous": "前一頁", "next": "后一頁", "last": "末頁" }, "processing": "表格在努力渲染中......", "loadingRecords": "加載記錄中...",//注意該參數(shù)在從服務(wù)器加載的時候無效，只有Ajax和客戶端處理的時候有效 }, "paging": false,//分頁功能 "ordering": false,//排序功能 "autoWidth": false,//自動寬度（這里關(guān)閉后，可以隨著左側(cè)的隱藏而擴展頁面一起100%寬度） /****************************************表格樣式控制****************************************************/ }); return table; }</script>后臺：
public ActionResult Search(DataTable dt) { int total; IQueryable<Model.Power> powerIq = CurrentBllSession.PowerBll.GetIQueryable(); total = powerIq.Count(); List<Model.Power> powerList = powerIq.ToList(); powerList = TreeGridList(powerList); dt.recordsTotal = total; dt.recordsFiltered = total; dt.data = powerList; return Json(dt); } /// <summary> /// 將List轉(zhuǎn)換為TreeGrid格式的List /// </summary> private List<Model.Power> TreeGridList(List<Model.Power> powerList) { List<Model.Power> treegridList=new List<Model.Power>(); foreach (var powerOne in powerList.Where(a => a.ParentId == "0" || a.PowerId.Length == 4).OrderBy(a => a.Sort))//一級菜單 { treegridList.Add(powerOne); foreach (var powerTwo in powerList.Where(a => a.ParentId != "0" && a.PowerId.Length == 8 && a.ParentId == powerOne.PowerId).OrderBy(a=>a.Sort))//二級菜單 { treegridList.Add(powerTwo); foreach (var powerBtn in powerList.Where(a => a.ParentId != "0" && a.PowerId.Length == 8 && a.ParentId == powerTwo.PowerId).OrderBy(a => a.Sort))//按鈕 { treegridList.Add(powerBtn); } } } return treegridList; }解釋說明：
treegrid是通過tr標(biāo)簽上的class內(nèi)容和tr的位置關(guān)系來組織表格中行之間的父子關(guān)系和位置關(guān)系的，
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); } },就是來控制父子關(guān)系的。
而后臺的List順序轉(zhuǎn)換，是為了調(diào)整好輸出的順序，從而來控制tr之間的位置關(guān)系。
通過DT初始化好表格之后，調(diào)用
$("#table1").treegrid({ "initialState": 'collapsed', });即可，繪制好樹狀表格。
效果圖：
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持武林網(wǎng)！
新聞熱點
疑難解答
