easyui treegrid的使用示例
一、前端:
<div id="tbList" fit="true"></div> $(function () {
$("#tbList").treegrid({
url: "/Action/MenuIndex/",
method: 'post',
title: '菜单列表',
idField: 'Id',
treeField: 'Name',
iconCls: 'ext-icon-application_side_tree',
rownumbers: true,
animate: true,
fitColumns: true,
resizable: true,
frozenColumns: [[
{ title: '菜单名称', field: 'Name', width: 200 }
]],
columns: [[
{ title: '排序', field: 'DisOrder', width: 40 },
{ title: '区域名', field: 'AreaName', width: 80},
{ title: '控制器名', field: 'ControllerName', width: 80},
{ title: 'Action方法名', field: 'ActionName', width: 80 },
{
title: 'FormMethod', field: '请求方式', width: 80,
formatter: function (value, row, index) {
return new Object(row["FormMethodDictionary"]).Name;
}
},
{
title: 'OperationType', field: '操作类型', width: 80,
formatter: function (value, row, index) {
return new Object(row["OperationTypeDictionary"]).Name;
}
},
{
field: 'IsShow', title: '显示', width: 25, align: 'center', formatter: function (colData) {
return colData ? "√" : "X";
}
},
{
field: 'IsLink', title: '链接', width: 25, align: 'center', formatter: function (colData) {
return colData ? "√" : "X";
}
},
{ title: '备注', field: 'Remark', width: 150 },
{ title: 'ParentId', field: 'ParentId', hidden: true }
]],
toolbar: [{
text: "添加",
iconCls: 'icon-add',
handler: add
}, '-', {
text: "修改",
iconCls: 'icon-edit',
handler: modify
}, '-', {
text: "删除",
iconCls: 'icon-remove',
handler: remove
}] });
});
二、后端:
public ActionResult MenuIndex(FormCollection form)
{
//取从数据字典中取中Menu对应的ID号
var dic = _dictionaryService.Single(o => o.Name == "MENU" && o.IsDeleted == false);
var menuId = dic.Id; //查询所有菜单信息
var menus = _actionService.Where(o => o.IsDeleted == false && o.OperationType == menuId && o.IsShow == true, o => o.DisOrder, true, "FormMethodDictionary", "OperationTypeDictionary").ToList(); //构造TreeGrid的数据
RSCC.Model.PageData<ActionViewModel> treegrids = new RSCC.Model.PageData<ActionViewModel>();
treegrids.total = menus.Count();
treegrids.rows = menus.Select(o => o.ToViewModel()).ToList(); //转化为JSON格式
var strJson = operationContext.ToJson(treegrids);
return Content(strJson); }
三、注意事项:
对应的ViewModel中必须有 _parentId 和 state 属性,iconCls 可选。
四、实现效果如下:
easyui treegrid的使用示例的更多相关文章
- EasyUi TreeGrid封装
礼物一:树型实体的抽象与封装 所谓树型实体,就是具有树型结构关系的实体,比如省.市.区.对于初学者,可能会创建三张表进行存储,有经验的开发者通过引入ParentId将设计简化为一张表,但是基于Pare ...
- 基于EasyUI Treegrid的权限管理资源列表
1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...
- Jquery easyui treegrid实现树形表格的行拖拽
前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
- easy-ui treegrid 实现分页 并且添加自定义checkbox
首先第一点easy-ui treegrid 对分页没有好的实现, 因为在分页的过程中是按照 根节点来分页的 后台只能先按照 根节点做分页查询 再将子节点关联进去, 这样才能将treegrid 按 ...
- easyui treegrid idField 所在属性中值有花括号(如Guid)当有鼠标事件时会报错,行记录一下
easyui treegrid idField 所在属性中值有花括号(如Guid)当有鼠标事件时会报错,行记录一下
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- EasyUI treegrid 加载checked
EasyUI treegrid 加载checked $(function () { $('#tbDictContTree').treegrid({ title: '数据字典目录管理', iconCl ...
- Easyui treegrid 无法显示树形结构解决办法
easyui treegrid 中检查了数据结构没有问题的,但就是不展示树形结构, 检查发现原来是 var columnsAll = [ { title: '任务ID', field: 'TaskID ...
- 适用于zTree 、EasyUI tree、EasyUI treegrid
#region System.Text.StringBuilder b_appline = new System.Text.StringBuilder(); Syste ...
随机推荐
- Java中的线程Thread方法之---join()
上一篇我们说到了Thread中的stop方法,这一篇我们再来看一下方法join的使用,那么方法Join是干啥用的? 简单回答,同步,如何同步? 怎么实现的? 下面将逐个回答. join方法从字面上的意 ...
- NX二次开发-获取UG界面窗口句柄UF_UI_get_default_parent
1 extern "C" DllExport void ufusr(char *param, int *retcod, int param_len) 2 { 3 4 if (UF_ ...
- [Nowcoder] 保护
题意:... 思路: \(LCA\)乱搞+启发式合并(堆) #include <bits/stdc++.h> using namespace std; const int maxn = 2 ...
- Python codecs小Tips
Python codecs小Tips 用codecs.open读进来的字符串都是unicode表示的.
- mysql删除字段为null的数据
delete FROM main_bussiness_cost1 where date is null; 不能用 date = null:
- Tomcat下载部署及解决中文乱码显示
一.下载 tomcat下载链接:https://tomcat.apache.org/ 1.进入tomcat官网后,我使用的是tomcat9,所以我选择tomcat9.然后点击core下的zip包下载. ...
- 剑指offer——36二叉树和为某一值的路径
题目描述 输入一颗二叉树的根节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大 ...
- Logstash2.3.4趟坑之集成Redis哨兵模式
最新在使用Lostash2.3.4收集数据的时候,在读取redis数据的时候,报了如下的一个异常: 异常如下 Pipeline aborted due to error {:exception=> ...
- [转载]ConcurrentHashMap之实现细节
http://www.iteye.com/topic/344876 ConcurrentHashMap是Java 5中支持高并发.高吞吐量的线程安全HashMap实现.在这之前我对Concurrent ...
- JVM基本知识总结
大概两三个月之前阅读了<深入理解Java虚拟机>(周志明著),也为了加深印象,这里简单的做下总结,想完整点了解JVM知识的也可以阅读本书,书写的不错,相当通俗易懂. 第一部分 内存管理机制 ...