引入CSS和JS

<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" rel="stylesheet">
<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/icon.css" rel="stylesheet">
<script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

前台核心代码

<table id="tg" class="table easyui-treegrid" title="" style="width:100%;overflow-y:auto"></table>
<script type="text/javascript">
$(function () {
//加载树数据
$('#tg').treegrid({
rownumbers: true,
animate: false,
striped: false,
fitColumns: true,
scrollbarSize: 0,
url: "/Home/GetRootList?keywords=null",
singleSelect: false,
checkOnSelect: true,
selectOnCheck: true,
loadMsg: "正在加载数据...",
method: 'get',
idField: 'Id',
treeField: 'TreeName',
showFooter: false,
columns: [[
{
title: '节点名称',
field: 'TreeName',
width: 380,
formatter: function (value, row, index) {
var drawingId = row.DrawingId;
if (row.DrawingLeave==6) {
return "<a title='预览' href=\"javascript:showFile('" + row.Id + "')\">" + row.TreeName + "</a>";
} else {
return row.TreeName;
}
}
}
]],
onLoadSuccess: function (row, data) {
console.log(data);
},
onBeforeSelect: function (row) {
if (selectType == 0) {
$('#tg').treegrid("unselectAll");//单选,选择之前清除已选择列表
return true;
}
},
onSelect: function (row) { },
onClickRow: function (row) { },
onDblClickRow: function (row) { },
onBeforeExpand: function (node) {
$('#tg').treegrid('options').url = '/Home/GetChirdList?Id=' + node.Id
return true;
},
rowStyler: function (row, rowindex) { }
});
$('#tg').treegrid('resize', {
height: document.body.clientHeight - 130,
});
}); </script>

后台代码

/// <summary>
/// 视图页
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
/// <summary>
/// 首次加载跟节点,此处加载1,2级;1级展开,所有二级合并
/// </summary>
/// <returns></returns>
public string GetRootList(string keywords)
{
var rootList = bll.GetList(keywords);//获取所有树形结构
if (!string.IsNullOrEmpty(keywrods) && rootList.Count > ) //如果搜索不为空,需将搜索到的一级节点parentid置为0
{
rootList[].ParentId = ;//搜索的结果集根节点不一定是0,此处需处理
}
var newList = rootList.Select(n => new
{
n.Id
n.TreeName,
state = n.parentId == ? "open" : bll.GetAllList("parentId='" + n.Id + "'").Count > ? "closed" : "open", //treeGrid关键字段,有子级文件夹图标,无子级文件图标并且没有展开合并符号
n.Level,
_parentId = n.parentId== ? null : n.parentId.ToString(),//(必须):记得前面有“_” ,他是用来记录父级节点,没有这个属性,是没法展示父级节点 其次就是这个父级节点必须存在,不然信息也是展示不出来,在后台遍历组合的时候,如果父级节点不存在或为0时,此时 _parentId 应该不赋值。如果赋值 “0” 则显示不出来
//checked是否选中(用于复选框)
//iconCls 选项前面的图标,如果自己不设定,父级节点默认为文件夹图标,子级节点为文件图标
}); var result = Newtonsoft.Json.JsonConvert.SerializeObject(newList);
result = "{ \"total\":" + newList.Count() + ",\"rows\":" + result + "}";
return result;
}
/// <summary>
/// 根据选择的Id查询下一级节点
/// </summary>
/// <returns></returns>
public string GetChirdList(int Id)
{
var rootList = bll.GetChridList(Id);
var newList = rootList.Select(n => new
{
n.Id
n.TreeName,
state = bll.GetAllList("parentId='" + n.Id + "'").Count > ? "closed" : "open", //有子级文件夹图标,无子级文件图标并且没有展开合并符号
n.Level,
_parentId = n.parentId== ? null : n.parentId.ToString() });
var rows = Newtonsoft.Json.JsonConvert.SerializeObject(newList);
return rows;
}

asp.net MVC中使用EasyUI Treegrid 树形网格的更多相关文章

  1. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  2. jquery easyui:EasyUI Treegrid 树形网格

    用jquery easyui 的 Treegrid 树形网格 进行数据展示,不过官网的API 和 demo 让我愣了好久,摸索后整理出来供大家详细参看. jquery easyui 官网:http:/ ...

  3. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(24)-权限组的设计和实现(附源码)(终结)

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  4. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  5. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(22)-为用户设置角色

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  6. ASP.NET MVC+EF框架+EasyUI实现权限管理系列

    http://www.cnblogs.com/hanyinglong/archive/2013/03/22/2976478.html ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开 ...

  7. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明     ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框 ...

  8. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(20)-多条件模糊查询和回收站还原的实现

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(20)-多条件模糊查询和回收站还原的实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架 ...

  9. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览  ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    ...

随机推荐

  1. leetcode整理(一)

    leetcode题目整理,基本上不是最优解 1. 回文数 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 ...

  2. Linux内存管理(最透彻的一篇)【转】

    转自:https://www.cnblogs.com/ralap7/p/9184773.html 摘要:本章首先以应用程序开发者的角度审视Linux的进程内存管理,在此基础上逐步深入到内核中讨论系统物 ...

  3. UiPath:Split(","c)以逗号区分遍历字符串数组

    学习中遇到同一用户多种职业的情况,因为所有的数据都是从Excel里面取的,所以只能把所有的职业写在一个单元格里,以逗号区分. 那么就需要先把字符串转为数组,然后遍历数组去添加职位.如图 Split(& ...

  4. Python运维中20个常用的库和模块

    1.psutil是一个跨平台库(https://github.com/giampaolo/psutil) 能够实现获取系统运行的进程和系统利用率(内存,CPU,磁盘,网络等),主要用于系统监控,分析和 ...

  5. TortoiseSVN客户端(七)

    TortoiseSVN 是一个 Windows 下的版本控制系统 Apache™ Subversion®的客户端工具. 一.安装 官网下载地址:https://tortoisesvn.net/down ...

  6. zz扔掉anchor!真正的CenterNet——Objects as Points论文解读

    首发于深度学习那些事 已关注写文章   扔掉anchor!真正的CenterNet——Objects as Points论文解读 OLDPAN 不明觉厉的人工智障程序员 ​关注他 JustDoIT 等 ...

  7. USACO Making the Grade

    洛谷 P2893 [USACO08FEB]修路Making the Grade https://www.luogu.org/problemnew/show/P2893 JDOJ 2566: USACO ...

  8. NOI2016优秀的拆分

    一种想法是枚举分割位置, 然后考虑前面部分有多少种可行的AA拆分方式, 后面部分有多少种可行的BB拆分方式, 然后乘法原理即可 那么问题是如何快速求出合法方案 解法是首先枚举长度len, 然后将序列分 ...

  9. WPF 目录树绑定 与 遍历

    定义树节点,(编译环境VS2017) public class GBTreeNode : INotifyPropertyChanged { private string _deviceId = str ...

  10. java web开发入门十(idea创建maven SSM项目)基于intellig idea

    一.搭建项目骨架 二.配置pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xm ...