jquery插件treegrid樹狀表格的使用方法詳解（.Net平臺(tái)）
更新時(shí)間：2017年01月03日 11:12:21 作者：童小魚
本文主要介紹了jquery插件treegrid樹狀表格的使用方法，具有一定的參考作用，下面跟著小編一起來看下吧
上一篇介紹了DataTable，這一篇在DT的基礎(chǔ)之上再使用jquery的一款插件：treegrid,官網(wǎng)地址：http://maxazan.github.io/jquery-treegrid/
一、使用treegrid，需要以下支持
jquery.min.js+jquery.treegrid.min.js
二、后端提供樹狀列表格式的集合數(shù)據(jù)，借助前端的DT的配置控制，來在頁(yè)面上輸出滿足treegrid格式要求的html
前臺(tái)：
@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>請(qǐng)求路徑</th>
<th>描述</th>
<th>添加時(shí)間</th>
<th>修改時(shí)間</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();
});
/*點(diǎn)擊處理*/
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("請(qǐng)至少選擇一個(gè)選項(xiàng)", { icon: 2, time: 2000 });
}
else {
layer.confirm('確認(rèn)要?jiǎng)h除嗎？', 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("請(qǐng)選擇一個(gè)選項(xiàng)", { 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("請(qǐng)選擇一個(gè)選項(xiàng)", { 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請(qǐng)求數(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.列名獲取,一般單個(gè)列值用data PS:這里的render是有多少列就執(zhí)行多少次方法。。。不知道為啥
return "<input type='checkbox' value='" + data + "' name='id'>";
}
},
{
"targets": [4],
"data": "AddTime",
"render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個(gè)列值用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.列名獲取,一般單個(gè)列值用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": {//語言國(guó)際化
"lengthMenu": "每頁(yè) _MENU_ 條",
"zeroRecords": "沒有找到記錄",
"info": "當(dāng)前顯示 _START_ 到 _END_ 條，共 _TOTAL_條",
"infoEmpty": "無記錄",
"paginate":
{
"first": "首頁(yè)",
"previous": "前一頁(yè)",
"next": "后一頁(yè)",
"last": "末頁(yè)"
},
"processing": "表格在努力渲染中......",
"loadingRecords": "加載記錄中...",//注意該參數(shù)在從服務(wù)器加載的時(shí)候無效，只有Ajax和客戶端處理的時(shí)候有效
},
"paging": false,//分頁(yè)功能
"ordering": false,//排序功能
"autoWidth": false,//自動(dòng)寬度（這里關(guān)閉后，可以隨著左側(cè)的隱藏而擴(kuò)展頁(yè)面一起100%寬度）
/****************************************表格樣式控制****************************************************/
});
return table;
}
</script>
后臺(tái)：
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))//一級(jí)菜單
{
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))//二級(jí)菜單
{
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中的配置項(xiàng)：
"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)系的。
而后臺(tái)的List順序轉(zhuǎn)換，是為了調(diào)整好輸出的順序，從而來控制tr之間的位置關(guān)系。
通過DT初始化好表格之后，調(diào)用
$("#table1").treegrid({
"initialState": 'collapsed',
});
即可，繪制好樹狀表格。
效果圖：
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
與大家一起分享8款精美的jQuery圖片播放插件,有興趣的朋友可以下載使用和研究；廢話不多說了，直接上這些插件,希望這些插件對(duì)你有所幫助2013-02-02
基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能，實(shí)現(xiàn)非常簡(jiǎn)單，我們直接可以利用jQuery內(nèi)部封裝的拖拽接口即可簡(jiǎn)單實(shí)現(xiàn)在網(wǎng)頁(yè)上拖拽任意元素的功能，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了避免jQuery名字沖突，noConflict()方法，感興趣的朋友可以參考一下2016-07-07
jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼
這篇文章主要介紹了jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
jquery如何實(shí)現(xiàn)點(diǎn)擊空白處隱藏元素
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊空白處隱藏元素div等方法和實(shí)現(xiàn)代碼的講解，一起學(xué)習(xí)下。2017-12-12
jQuery中attr()和prop()在修改checked屬性時(shí)的區(qū)別
使用語句$.attr('checked',true)，將復(fù)選框的屬性改為被選中，在chrome瀏覽器中第一次點(diǎn)擊有效后面就不行了，IE8倒是沒有問題2014-07-07
jquery 操作DOM案例，實(shí)現(xiàn)圖片的顯示，需要的朋友可以參考下2012-04-04
jquery select操作的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼
是很簡(jiǎn)單的代碼 不過我自己操作的時(shí)候才發(fā)現(xiàn)我自己還有很多不懂，要多實(shí)際應(yīng)用才發(fā)現(xiàn)問題，哎~~2009-12-12
jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法
這篇文章主要介紹了jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法,涉及animate方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JQuery頁(yè)面地址處理插件jqURL詳解的相關(guān)資料,需要的朋友可以參考下2015-05-05