html5表格树,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");

}

}

用户列表

.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;

}

@Html.Partial("CRUDBtn", userInfo)

菜单名请求路径描述添加时间修改时间

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");