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 ...
随机推荐
- 简单的SqlHelper
namespace Login { class SqlHelper { //连接数据库的字符串 //static string dataConnection = "server=***-PC ...
- 解读oracle执行计划-待续
Cost(%CPU): 优化器估算出完成当前操作的代价(包含子操作的代价),它是IO代价和CPU 代价总和.其中IO代价是最基本的代价.而对于CPU代价,在默认情况下,优化器会将CPU代价计算在内,而 ...
- iOS 使用 FFmpeg
iOS 使用 FFmpeg 字数486 阅读288 评论7 喜欢5 集成 下载FFmpeg For iOS编译脚本: 打开 terminal 执行sh build-ffmpeg.sh: 步骤2执行完成 ...
- javascript 之DOM篇
要怎么样的开场白才能使我有力气再更新学习进度呢?啊啊啊啊啊,表示好累啊~~~默念“棒棒棒,我最棒~”召唤精气神开总结敲字咯.哈哈哈. --------------------------------- ...
- scons小结
scons是用python写的,据说是比make要方便很多,其实我都没写过makeFile...... 1.安装 方式1:下载安装包安装,需要用python setup.py install去编译 方 ...
- excel poi 文件导出,支持多sheet、多列自动合并。
参考博客: http://www.oschina.net/code/snippet_565430_15074 增加了多sheet,多列的自动合并. 修改了部分过时方法和导出逻辑. 优化了标题,导出信息 ...
- java中的异常结构
1.基类为Throwable. 2.Error和Exception分别继承Throwable. 3.Error类异常描述了Java运行系统中的内部错误以及资源耗尽的情形.应用程序不应该抛出这种类型的对 ...
- mysql 语句资料总结
一.UNION命令 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SE ...
- nodejs版本控制
本方法基于https://segmentfault.com/a/1190000004855835修改 配置: 使用的nvmw的git 地址https://github.com/hakobera/nvm ...
- Webservices-1.web服务定义简介
一.WEB服务定义(摘自维基百科)详情:http://zh.wikipedia.org/wiki/Web%E6%9C%8D%E5%8A%A1 Web服务是一种服务导向架构的技术,通过标准的Web协议提 ...