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):框架搭建 ...
随机推荐
- Django 练习班级管理系统二 -- 添加班级数据
在上一篇中(Django 练习班级管理系统一 https://www.cnblogs.com/klvchen/p/11078174.html),使用的是莫泰对话框的方式提交数据,适用于数据量少的操作. ...
- HBuilder创建app 3
一.Audio 模块实现开启手机摄像头 基于html5 plus http://www.html5plus.org/doc/zh_cn/audio.html 栗子: <!DOCTYPE html ...
- 201871010106-丁宣元 《面向对象程序设计(java)》第十六周学习总结
201871010106-丁宣元 <面向对象程序设计(java)>第十六周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nw ...
- 交互器中python中的帮助使用
C:\Users\ceshi>pythonPython 2.7.12 (v2.7.12:d33e0cf91556, Jun 27 2016, 15:24:40) [MSC v.1500 64 b ...
- 洛谷 U87561 魔法月饼
洛谷 U87561 魔法月饼 洛谷传送门 题目背景 \(9102\)年的中秋节注定与往年不同...因为在\(9102\)年的中秋节前夕,\(Seaway\)被告知今年的中秋节要新出一款月饼--魔法月饼 ...
- spring框架的定时任务cronExpression表达式详解
附:cronExpression表达式解释: 0 0 12 * * ?---------------在每天中午12:00触发 0 15 10 ? * *---------------每天上午10:15 ...
- 修改Feign数据解析,由jackson改为fastjson,同时解决fastjson中Content-Type问题
https://my.oschina.net/u/3419586/blog/2964047 背景:在用Feign Client 接口调用,由于jackson对null等特殊值处理存在异常,故改用fas ...
- Linux学习笔记-第7天 - 编程还是要多写多练
编程思路很重要,多写是要熟悉命令用法,多练不只是要熟悉语句常用在什么环境,更要在其基础上,尝试更多的写法.
- cmd 批处理创建 IIS 站点
windows 创建站点命令 appcmd C:\Windows\System32\inetsrv\appcmd.exe SITE 虚拟站点的管理 APP 管理应用程序 VDIR 管理虚拟目录 APP ...
- CentOS7 部署nfs服务
参考博客 参考博客 https://blog.51cto.com/addam/1576144 错误1: 客户端挂载nfs报错mount: wrong fs type, bad option, bad ...