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) {if (row.filePath!=null) {return "<a title='预览' href=\"javascript:showFile('" + row.Id + "')\">" + row.TreeName + "</a>";} else {return row.TreeName;}}},{title: '上传时间',field: 'CommitStartTime',width: 180,align: 'center',},{title: '上传人',field: 'UserName',width: 180,align: 'center',}]],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.Idreturn 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 > 0) //如果搜索不为空，需将搜索到的一级节点parentid置为0{rootList[0].ParentId = 0;//搜索的结果集根节点不一定是0，此处需处理}var newList = rootList.Select(n => new{n.Idn.TreeName,state = n.parentId == 0 ? "open" : bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //treeGrid关键字段,有子级文件夹图标，无子级文件图标并且没有展开合并符号n.Level,_parentId = n.parentId== 0 ? 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.Idn.TreeName,state = bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //有子级文件夹图标，无子级文件图标并且没有展开合并符号n.Level,_parentId = n.parentId== 0 ? null : n.parentId.ToString()});var rows = Newtonsoft.Json.JsonConvert.SerializeObject(newList);return rows;
}

asp.net MVC中使用EasyUI Treegrid 树形网格相关推荐

php 可以编辑treegrid,Easyui Treegrid 树形网格_EasyUI 插件
扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid.defaults 重写默认的 defaults. 树形网格(treegrid)用于以网格形式显示分层数据.它是基 ...
EasyUI Treegrid 树形网格（官网没有提到的实现方式）
官网实现方式:EasyUI Treegrid 没有提到的实现方式:_parentId {"id": 1,"name": "1"," ...
ASP.NET MVC+EF框架+EasyUI实现权限管理(附源码)
前言目录前言:时间很快,已经快到春节的时间了,这段时间由于生病,博客基本没更新,所以今天写一下我们做的一个项目吧,是对权限的基本操作的操作,代码也就不怎么说了,直接上传源码和图片展示,下面我们直接进 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(13)-权限设计 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建 ASP.NET MV ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除) 原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)...
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框 ...
easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...
通过源代码研究ASP.NET MVC中的Controller和View（二）
通过源代码研究ASP.NET MVC中的Controller和View(一) 在开始之前,先来温习下上一篇文章中的结论(推论): IView是所有HTML视图的抽象 ActionResult是Cont ...

asp.net MVC中使用EasyUI Treegrid 树形网格

asp.net MVC中使用EasyUI Treegrid 树形网格相关推荐

最新文章

热门文章