MVC4中EasyUI Tree异步加载JSON数据生成树
1,首先构造tree接受的格式化数据结构MODEL
/// <summary>
/// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递
/// </summary>
// [DataContract]
[Serializable]
public class EasyTreeData
{
/// <summary>
/// ID
/// </summary>
// [DataMember]
public string id { get; set; }
/// <summary>
/// 节点名称
/// </summary>
// [DataMember]
public string text { get; set; }
/// <summary>
/// 是否展开
/// </summary>
//[DataMember]
public string state { get; set; }
/// <summary>
/// 图标样式
/// </summary>
// [DataMember]
public string iconCls { get; set; }
/// <summary>
/// 子节点集合
/// </summary>
// [DataMember]
public List<EasyTreeData> children { get; set; }
/// <summary>
/// 默认构造函数
/// </summary>
public EasyTreeData()
{
this.children = new List<EasyTreeData>();
this.state = "open";
}
/// <summary>
/// 常用构造函数
/// </summary>
public EasyTreeData(string id, string text, string iconCls = "", string state = "open")
: this()
{
this.id = id;
this.text = text;
this.state = state;
this.iconCls = iconCls;
}
/// <summary>
/// 常用构造函数
/// </summary>
public EasyTreeData(int id, string text, string iconCls = "", string state = "open", List<EasyTreeData> children=null )
: this()
{
this.id = id.ToString();
this.text = text;
this.state = state;
this.iconCls = iconCls;
this.children = children;
}
}
2,前台代码
2.1,前台代码html代码
<ul id="tt"></ul>
2.2,前台代码脚本
<script type="text/javascript">
$(function () {
$('#tt').tree({
checkbox: false,
url: '/Cultivate/GetUserTreeJson',
onClick: function (node) {
alert(node.id);
}
});
});
</script>
3,控制器(Cultivate)的方法GetUserTreeJson'
3.1,控制器(Cultivate)的方法GetUserTreeJson代码
[HttpPost]
public ActionResult GetUserTreeJson()
{
int PID = -1;
List<EasyTreeData> treeList = new List<EasyTreeData>();
if (PID == -1)
{
var list = (from p in db.cultivates
where p.NodePID == PID
orderby p.NodeID
select p).ToList();
foreach (cultivate info in list)
{ var child = (from p in db.cultivates
where p.NodePID == info.NodeID
orderby p.NodeID
select p).ToList();
if (child.Count ==0)
{
treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user"));
}
else
{
treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user","open", GetUserTreeJson2(info.NodeID)));
}
}
}
string json = ToJson(treeList);
return Content(json);
}
3.2,如果有N级菜单循环代码
private List<EasyTreeData> GetUserTreeJson2( int PID)
{
List<EasyTreeData> treeList = new List<EasyTreeData>();
var list = (from p in db.cultivates
where p.NodePID == PID
orderby p.NodeID
select p).ToList();
foreach (cultivate info in list)
{
var child = (from p in db.cultivates
where p.NodePID == info.NodeID
orderby p.NodeID
select p).ToList(); ;
if (child.Count == 0)
{
treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user"));
}
else
{
treeList.Add(new EasyTreeData(info.NodeID, info.NodeName, "icon-user", "closed", GetUserTreeJson2(info.NodeID)));
}
}
return treeList;
}
3.3,Json代码生成。
protected string ToJson(object obj)
{
string jsonData = (new JavaScriptSerializer()).Serialize(obj);
return jsonData;
}
MVC4中EasyUI Tree异步加载JSON数据生成树的更多相关文章
- spring mvc easyui tree 异步加载树
使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...
- jquery easyui tree异步加载子节点
easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立.如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数. <ul id=& ...
- EasyUI datagrid动态加载json数据
最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...
- 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...
- Android-LoaderManager异步加载数据库数据
LoaderManager异步加载数据库数据,是在(Activity/fragment/其他UI等) 加载大量的本地Database库表数据,由于数据大在加载过程中会导致UI线程阻塞,导致用户体验不好 ...
- ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据
为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...
- Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比--转载
在加载大量数据的时候,经常会用到异步加载,所谓异步加载,就是把耗时的工作放到子线程里执行,当数据加载完毕的时候再到主线程进行UI刷新.在数据量非常大的情况下,我们通常会使用两种技术来进行异步加载,一 ...
- Python爬虫爬取异步加载的数据
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:努力努力再努力 爬取qq音乐歌手数据接口数据 https://y.qq ...
- hive加载json数据解决方案
hive官方并不支持json格式的数据加载,默认支持csv格式文件加载,如何在不依赖外部jar包的情况下实现json数据格式解析,本编博客着重介绍此问题解决方案 首先创建元数据表: create EX ...
随机推荐
- 设置 textField.placeholder的颜色和大小
textField.placeholder = @"请输入手机号码"; [textField setValue:[UIColor blue] forKeyPath:@"_ ...
- Qt经典出错信息之”Basic XLib functionality test failed!”
解决方法: 此完整出错信息是在./configure阶段Basic XLib functionality test failed!You might need to modify the includ ...
- SGU 222.Little Rooks
题意: 求在n*n(n<10)的棋盘上放k个车(水平竖直行走)的方案数. Solution SGU220的简化版.直接DP 显然当k>n时,ans=0; f[i][j]代表在前n行放了j个 ...
- [转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:St ...
- cocod2d-x 之 CCTMXTiledMap & CCTMXLayer
cocos2dx框架自带的地图CCTMXTiledMap,继承自CCNode.CCTMXTiledMap的坐标系的原点位于左上角,以一个瓦片为单位,换句话说,左上角第一块瓦片的坐标为(0,0),而紧挨 ...
- hiho一下103周 平衡树·Treap
平衡树·Treap 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:小Hi,我发现我们以前讲过的两个数据结构特别相似. 小Hi:你说的是哪两个啊? 小Ho:就是二 ...
- MySQL 执行计划explain详解
MySQL 执行计划explain详解 2015-08-10 13:56:27 分类: MySQL explain命令是查看查询优化器如何决定执行查询的主要方法.这个功能有局限性,并不总会说出真相,但 ...
- TWIG整合
//数字格式化 {{ (p.oldprice * p.count)|number_format(2,'.',',') }}
- +=与join的性能测试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- matlab 全部的随机数函数
matlab 全部的随机数函数 (一)Matlab内部函数 a. 基本随机数 Matlab中有两个最基本生成随机数的函数. 1.rand() 生成(0,1)区间上均匀分布的随机变量.基本语法: ran ...