jquery-treegrid树状表格的使用（.Net平台）
上一篇介绍了DataTable，这一篇在DT的基础之上再使用jquery的一款插件：treegrid,官网地址：http://maxazan.github.io/jquery-treegrid/
一、使用treegrid，需要以下支持
jquery.min.js+jquery.treegrid.min.js
二、后端提供树状列表格式的集合数据，借助前端的DT的配置控制，来在页面上输出满足treegrid格式要求的html
前台：
@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技术，必须放入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>请求路径</th>
<th>描述</th>
<th>添加时间</th>
<th>修改时间</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();
}); /*点击处理*/
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("请至少选择一个选项", { icon: 2, time: 2000 });
}
else {
layer.confirm('确认要删除吗？', 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("请选择一个选项", { 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("请选择一个选项", { icon: 2, time: 2000 });
}
else {
url += "?id=" + idArr[0];
layer_show(title, url, 600, 360);
}
});
} } /*初始化table*/
function initializeTable() {
var table = $("#table1").DataTable({
/****************************************表格数据加载****************************************************/
"serverSide": true,
"ajax": {//ajax请求数据源
"url": "/Power/Manager/Search",
"type": "post",
"data": function (data) {//添加额外的数据给服务器
}
},
"columns": [//列绑定
{ "defaultContent": "" },
{ "data": "PowerName" },
{ "data": "Url" },
{ "data": "Description" },
{ "data": "AddTime" },
{ "data": "ModifyTime" }
],
"columnDefs": [//列定义
{
"targets": [0],
"data": "PowerId",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<input type='checkbox' value='" + data + "' name='id'>";
}
},
{
"targets": [4],
"data": "AddTime",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
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.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
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) { //表格初始化完成后调用
$("#table1").treegrid({
"initialState": 'collapsed',
});
},
/****************************************表格数据加载****************************************************/
/****************************************表格样式控制****************************************************/
"dom": "t<'dataTables_info'il>p",//表格布局
"processing": true,//等待加载效果
"language": {//语言国际化
"lengthMenu": "每页 _MENU_ 条",
"zeroRecords": "没有找到记录",
"info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
"infoEmpty": "无记录",
"paginate":
{
"first": "首页",
"previous": "前一页",
"next": "后一页",
"last": "末页"
},
"processing": "表格在努力渲染中......",
"loadingRecords": "加载记录中...",//注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效
},
"paging": false,//分页功能
"ordering": false,//排序功能
"autoWidth": false,//自动宽度（这里关闭后，可以随着左侧的隐藏而扩展页面一起100%宽度）
/****************************************表格样式控制****************************************************/
});
return table;
} </script>
后台：
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转换为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 == "" || a.PowerId.Length == ).OrderBy(a => a.Sort))//一级菜单
{
treegridList.Add(powerOne);
foreach (var powerTwo in powerList.Where(a => a.ParentId != "" && a.PowerId.Length == && a.ParentId == powerOne.PowerId).OrderBy(a=>a.Sort))//二级菜单
{
treegridList.Add(powerTwo);
foreach (var powerBtn in powerList.Where(a => a.ParentId != "" && a.PowerId.Length == && a.ParentId == powerTwo.PowerId).OrderBy(a => a.Sort))//按钮
{
treegridList.Add(powerBtn);
}
}
} return treegridList;
}
解释说明：
treegrid是通过tr标签上的class内容和tr的位置关系来组织表格中行之间的父子关系和位置关系的，
DT中的配置项：
"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);
}
},
就是来控制父子关系的。
而后台的List顺序转换，是为了调整好输出的顺序，从而来控制tr之间的位置关系。
通过DT初始化好表格之后，调用
$("#table1").treegrid({
"initialState": 'collapsed',
});
即可，绘制好树状表格。
效果图：
jquery-treegrid树状表格的使用（.Net平台）的更多相关文章
- vue基于iview树状表格，封装完善
先安装iview后在使用 完善按钮不显示问题 ,当children过多时,点击不动问题等 封装 <template> <div :style="{width:tableWi ...
- EasyUI + ajax + treegrid/datagrid 接收 json 数据，显示树状/网状表结构
最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...
- 由简入繁实现Jquery树状结构
在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...
- jquery写的树状列表插件-alvintree
在做项目的时候遇到选择部门下人员的功能,可多选可单选,所以就想着使用树状列表来进行选择,但在网上找了很多,发现要么就是挺复杂,要么就是需要各种前端框架的支持,试了一个感觉难用,所以就想着自己写一个简便 ...
- JQuery 树状结构 jQuery-treeview.js 插件
由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...
- Tkinter 之TreeView表格与树状标签
一.TreeView介绍 TreeView组件是一个树状结构和表格的结合体.第一列是树状结构,后几列是列表.每一行表示一个item,树的item可以分级,每个item有子item,名称对应text标签 ...
- 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示
树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...
- Ztree行政地区树状展示
Ztree行政地区树状展示(点击加载) 效果如下: 开始贴代码: 实体类 Item,用于对Ztree的节点展示 public class Item { private String id; priva ...
- 分享使用NPOI导出Excel树状结构的数据，如部门用户菜单权限
大家都知道使用NPOI导出Excel格式数据 很简单,网上一搜,到处都有示例代码. 因为工作的关系,经常会有处理各种数据库数据的场景,其中处理Excel 数据导出,以备客户人员确认数据,场景很常见. ...
随机推荐
- 超大 Cookie 拒绝服务攻击
有没有想过,如果网站的 Cookie 特别多特别大,会发生什么情况? 不多说,马上来试验一下: for (i = 0; i < 20; i++) document.cookie = i + '= ...
- Bringing Whoops Back to Laravel 5
You might be missing the "prettier" Whoops error handler from Laravel 4. If so, here's how ...
- 如何在ASP.Net创建各种3D图表
我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...
- Android -- 真正的 高仿微信 打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
- SDWebImage源码解读之SDWebImageCache(上)
第五篇 前言 本篇主要讲解图片缓存类的知识,虽然只涉及了图片方面的缓存的设计,但思想同样适用于别的方面的设计.在架构上来说,缓存算是存储设计的一部分.我们把各种不同的存储内容按照功能进行切割后,图片缓 ...
- Java程序：从命令行接收多个数字，求和并输出结果
一.设计思想:由于命令行接收的是字符串类型,因此应先将字符串类型转化为整型或其他字符型,然后利用for循环求和并输出结果 二.程序流程图: 三.源程序代码: //王荣荣 2016/9/23 ...
- BPM配置故事之案例14-数据字典与数据联动
小明遇到了点麻烦,他昨天又收到了行政主管发来的邮件,要求把出差申请单改由H3 BPM进行,表单如下 行政主管的出差申请表 小明对表单进行了调整,设计出了一份适合在系统中使用的表单,但在"出差 ...
- BPM始终服务于人，落脚于人
数字经济时代下,云计算.大数据.移动互联已经成为当下企业必须采取的武装力量.随着互联网+.中国制造2025.工业4.0等国家战略的引导与支持,无数的企业在这场数字化浪潮中使尽浑身解数,想要抓住机遇奋力 ...
- SSH免手动输入密码和设置代理
通过使用sshpass将密码写入命令里,直接执行,免去手动密码输入的步骤命令如下: sshpass -p password_abc ssh user_abc@ssh_host -p ssh_port ...
- 关系型数据库与NoSQL数据库
关系型数据库的优缺点 优点: 可以做事务处理,从而保证了数据的一致性: 可以进行JOIN等多表查询: 由于以SQL标准化为前提,数据更新的开销很小(相同的字段基本上都只有一处). 缺点: 大量数据的写 ...