jquery插件treegrid树状表格的使用方法详解(.Net平台)

前端之家收集整理的这篇文章主要介绍了jquery插件treegrid树状表格的使用方法详解(.Net平台)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上一篇介绍了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="/tag/yonghu/" target="_blank" class="keywords">用户</a>列表

<div class="table">
<table id="table1" class="table table-border table-bordered table-bg table-hover">

Box" name="" value=""> 菜单名 请求路径 描述 添加时间 修改时间

后台

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初始化好表格之后,调用

即可,绘制好树状表格。

效果图:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的jQuery相关文章