上一篇介绍了DataTable，这一篇在DT的基础之上再使用jquery的一款插件：treegrid,官网地址：
一、使用treegrid，需要以下支持
jquery.min.js+jquery.treegrid.min.js
二、后端提供树状列表格式的集合数据，借助前端的DT的配置控制，来在页面上输出满足treegrid格式要求的html
前台：
rush:xhtml;">
@using Model
@{
Layout = null;
UserInfo userInfo = null;
<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>列表
Box" name="" value="">
菜单名
请求路径
描述
添加时间
修改时间
if (ViewData["LoginUser"] != null)
{
userInfo = ViewData["LoginUser"] as UserInfo;
}
else
{
Response.Redirect("/Login/Index");
}
}
<!DOCTYPE html>
<div class="table">
<table id="table1" class="table table-border table-bordered table-bg table-hover">
后台：
rush:csharp;">
public ActionResult Search(DataTable dt)
{
int total;
IQueryable 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中的配置项：
rush:js;">
"rowCallback": function (row,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初始化好表格之后，调用
rush:js;">
$("#table1").treegrid({
"initialState": 'collapsed',});
即可，绘制好树状表格。
效果图：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！
相关文章
jQuery表单验证提交：前台验证二（图文+视频）
