引入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. pipenv 管理虚拟环境

    pipenv --python 3.6 创建虚拟环境 vim Pipfile —> 修改源 为阿里云镜像 https://mirrors.aliyun.com/pypi/simple [pack ...

  2. linux 进程通信之 信号

    一,管道PIPE 二,FIFO通信 三,mmap通信 四,信号的概念 信号的特点:简单,但不能携带大量的信息,满足特定条件就会发生 信号的机制:进程B发送信号给进程A.信号是由内核来处理的. 信号的产 ...

  3. linux wake on lan功能通过ethtool配置【转】

    转自:https://blog.csdn.net/fanlilei/article/details/38042063 ethtool工具中的wol功能一直很迷惑.今天看了代码将其帮助中下面的参数说明下 ...

  4. 08、启动过程+at+crond+anacron

    [root@li ~]# 加电--BIOS (basic input output system)--以什么设备来启动--/dev/sda -- mbr -- grub.conf --vmlinux ...

  5. lf 前后端分离 (6) 支付

    支付 import datetime from django.core.exceptions import ObjectDoesNotExist from rest_framework.views i ...

  6. 201871010135-张玉晶《面向对象程序设计(java)》第十周学习总结

    201871010135-张玉晶<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  7. day17_7.19包与logging模块,深浅拷贝

    一.包 在模块的定义里,模块就是方法的集合,可以将一些常用的方法封装到一个py文件中,通过调用使用,而且,其中的表现形式也有以包的形式导入. 其实,包就是一系列模块的结合体,表示形式就是一个文件夹,在 ...

  8. spring框架的定时任务cronExpression表达式详解

    附:cronExpression表达式解释: 0 0 12 * * ?---------------在每天中午12:00触发 0 15 10 ? * *---------------每天上午10:15 ...

  9. Spring Cloud微服务安全实战_4-2_常见的微服务安全整体架构

    这个图适用于中小公司的微服务架构 微服务:SpringBoot 写的Rest服务 服务注册与发现:微服务所必备的.每个微服务都会到上边去注册.不管是微服务之间的调用,还是服务网关到微服务的转发,都是通 ...

  10. TJOI 2015 概率论(生成函数)

    题意 ​ 求一棵随机生成的有根二叉树(节点无标号,各种不同构的情况随机出现)叶子结点个数的期望. 思路 ​ 用生成函数做是个好题. ​ 我们考虑设 \(n\) 个节点,所有不同构二叉树叶子结点的总和为 ...