上一篇介绍了DataTable，这一篇在DT的基础之上再使用jquery的一款插件：treegrid,官网地址：
一、使用treegrid，需要以下支持
jquery.min.js+jquery.treegrid.min.js
二、后端提供树状列表格式的集合数据，借助前端的DT的配置控制，来在页面上输出满足treegrid格式要求的html
前台：
if (ViewData["LoginUser"] != null)
{
userInfo = ViewData["LoginUser"] as UserInfo;
}
else
{
Response.Redirect("/Login/Index");
}
}
<!DOCTYPE html> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>列表
Box" name="" value="">
菜单名
请求路径
描述
添加时间
修改时间
{
userInfo = ViewData["LoginUser"] as UserInfo;
}
else
{
Response.Redirect("/Login/Index");
}
}
<!DOCTYPE html> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<div class="table">
<table id="table1" class="table table-border table-bordered table-bg table-hover">
后台：
powerIq = CurrentBllSession.PowerBll.GetIQueryable();
total = powerIq.Count();
List powerList = powerIq.ToList();
powerList = TreeGridList(powerList);
dt.recordsTotal = total;
dt.recordsFiltered = total;
dt.data = powerList;
return Json(dt);
}
///
/// 将List转换为TreeGrid格式的List
///
private List TreeGridList(List powerList)
{
List treegridList=new List();
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标签上的class内容和tr的位置关系来组织表格中行之间的父子关系和位置关系的，
DT中的配置项：
就是来控制父子关系的。
而后台的List顺序转换，是为了调整好输出的顺序，从而来控制tr之间的位置关系。
通过DT初始化好表格之后，调用
即可，绘制好树状表格。
效果图：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！
原文链接：https://www.f2er.com/jquery/42930.html