上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:
一、使用treegrid,需要以下支持
jquery.min.js+jquery.treegrid.min.js
二、后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页面上输出满足treegrid格式要求的html
前台:
rush:xhtml;">
@using Model
@{
Layout = null;
UserInfo userInfo = null;
用户列表
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',});
即可,绘制好树状表格。
效果图:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。
相关推荐
jQuery表单验证提交:前台验证一(图文+视频)
jQuery表单验证提交:前台验证二(图文+视频)
jQuery如何实时监听获取input输入框的值
JQuery怎么判断元素是否存在
jQuery如何实现定时重定向
jquery如何获取复选框选中的值
jQuery如何清空form表单数据
jQuery怎么删除元素节点
JQuery怎么循环输出数组元素
jquery怎么实现点击刷新当前页面
怎么用jquery实现文字左右展开收缩效果
jquery怎么删除html属性
如何用jquery实现图片翻转效果
jquery怎么删除样式属性
jquery如何获取当前元素的位置
如何用jquery实现点击展开收缩效果
jquery怎么实现点击隐藏显示效果
jQuery如何获取当前页面url
jQuery怎么获取鼠标的位置坐标
简洁易懂的jQuery:HTML表单与jQuery