引入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. Bayesian Optimization使用Hyperopt进行参数调优

    超参数优化 Bayesian Optimization使用Hyperopt进行参数调优 1. 前言 本文将介绍一种快速有效的方法用于实现机器学习模型的调参.有两种常用的调参方法:网格搜索和随机搜索.每 ...

  2. gerrit的使用以及问题总结

    看到了一篇很好的博客,大纲如下: 链接如下: https://www.ieclipse.cn/2016/05/14/other/tech-gerrit-guide/index.html 另外一篇: 代 ...

  3. 浏览器地址栏输入url回车之后发生了些什么

    1.输入地址 当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全ur ...

  4. c# 第二节 c#的常用IDE环境

    本节内容: 1:常用ide环境 2:Visual Studio 简介 3:Visual Studio Express简介 4:Sharp Develop 5:  IDE 与 .Net的版本 1:常用i ...

  5. day44_9_3前端(1)

    一.http协议. 1.在软件开发架构中 有两种模式:1.b/s.2.c/s. 其中b/s就是以浏览器作为客户端,所以,需要服务器同一遵循同一规则,向浏览器发送数据,这个规则就是http协议,存在以应 ...

  6. flask如何返回真正意义上的json字符串?以及中文如何正常显示?

    flask中,不能直接return字典,需要把字典转换为json字符串方式有三种:1. return str(字典)2.return json.dumps(字典)3.return jsonify(字典 ...

  7. zz深度学习论文合集大全

        Pull requestsIssues Marketplace Explore             Learn Git and GitHub without any code! Using ...

  8. Associatively Segmenting Instances and Semantics in Point Clouds

    论文引入一个简单且灵活的框架同时分割点云中的实例和语义,进一步提出两种方法让两个任务从彼此受益. 代码: https://github.com/WXinlong/ASIS 论文: https://ar ...

  9. matlab的clc,close,close all,clear,clear all命令

    clc:清除命令窗口的内容,对工作环境中的全部变量无任何影响 close:关闭当前的Figure窗口 close all:关闭所有的Figure窗口 clear:清除工作空间的所有变量 clear a ...

  10. [RN] React-Native中Array渲染的优化

    React-Native中Array渲染的优化 例如用Push加进去的数据: constructor(props){    super(props);    this.state = {      b ...