asp.net MVC中使用EasyUI Treegrid 树形网格
引入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 树形网格的更多相关文章
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- jquery easyui:EasyUI Treegrid 树形网格
用jquery easyui 的 Treegrid 树形网格 进行数据展示,不过官网的API 和 demo 让我愣了好久,摸索后整理出来供大家详细参看. jquery easyui 官网:http:/ ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(24)-权限组的设计和实现(附源码)(终结)
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(22)-为用户设置角色
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列
http://www.cnblogs.com/hanyinglong/archive/2013/03/22/2976478.html ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(20)-多条件模糊查询和回收站还原的实现
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(20)-多条件模糊查询和回收站还原的实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 ...
随机推荐
- 【Linux】-- 认识bash shell
一.前言 我们知道管理整个计算机硬件的其实是系统的内核,这个内核是需要被保护的,所以我们一般用户就只能通过shell来跟内核通信,以让内核达到我们所想要达到的工作.那么Linux系统有多少shell可 ...
- Python微信公众号开发—小白篇(1)
本文面向想通过Python学习公众号开发的同学.一站式解决新手开发微信公众号遇到的所有问题. 为了防止我的文章被到处转载,贴一下我的公众号[智能制造社区],欢迎大家关注. github仓库地址http ...
- ssh config 配置
一个打开新连接免密码的小技巧 Host * ControlMaster auto ControlPath ~/.ssh/master-%r@%h:%p
- 使用nginx配置带有权限验证的反向代理
环境:centos6u3 1.安装nginx (1)上传nginx nginx-1.14.0.tar.gz.可以从nginx官网下载http://nginx.org/en/download.html ...
- mysql版本引起的驱动问题
mysql版本引起的驱动问题 com.mysql.jdbc.Driver 是 mysql-connector-java 5中的, com.mysql.cj.jdbc.Driver 是 mysql-co ...
- python SSL 错误
python 使用pip 安装模块是提示SSL错误 出现该问题的原因由于系统的openssl是1.0.1的版本,对于python3.7太老了,需要更新为openssl1.0.2或者libressl2. ...
- shell的变量以及常见符号
shell的变量以及常见符号 常见变量 不同于其它语言需要先声明变量,shell的变量直接使用 eg: a=15 调用变量的话 $a 或者 ${a} $? #判断上一条命令执行的是否成功 0 ...
- JDOJ 2782: 和之和
JDOJ 2782: 和之和 JDOJ传送门 Description 给出数n,求ans=(n+1)+(n+2)+...+(n+n) Input 一行,一个整数n Output 一行,一个整数ans% ...
- 【电脑】XSHELL破解
序列号
- 【Mybatis】CDATA
忽视内部尖括号那些东西