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数据生成树的更多相关文章

  1. spring mvc easyui tree 异步加载树

    使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...

  2. jquery easyui tree异步加载子节点

    easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立.如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数. <ul id=& ...

  3. EasyUI datagrid动态加载json数据

    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

  4. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  5. Android-LoaderManager异步加载数据库数据

    LoaderManager异步加载数据库数据,是在(Activity/fragment/其他UI等) 加载大量的本地Database库表数据,由于数据大在加载过程中会导致UI线程阻塞,导致用户体验不好 ...

  6. ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  7. Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比--转载

     在加载大量数据的时候,经常会用到异步加载,所谓异步加载,就是把耗时的工作放到子线程里执行,当数据加载完毕的时候再到主线程进行UI刷新.在数据量非常大的情况下,我们通常会使用两种技术来进行异步加载,一 ...

  8. Python爬虫爬取异步加载的数据

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:努力努力再努力 爬取qq音乐歌手数据接口数据 https://y.qq ...

  9. hive加载json数据解决方案

    hive官方并不支持json格式的数据加载,默认支持csv格式文件加载,如何在不依赖外部jar包的情况下实现json数据格式解析,本编博客着重介绍此问题解决方案 首先创建元数据表: create EX ...

随机推荐

  1. Perl数组: shift, unshift, push, pop

    pop pop函数会删除并返回数组的最后一个元素. .. ; $fred = pop(@array); # $fred变成9,@array 现在是(5,6,7,8) $barney = pop @ar ...

  2. Linux技巧总结(个人经验版)

    1:善用桌面:1.图形界面的编辑,2.终端只要开机就在第2桌面,3.浏览器在第3桌面,4.娱乐在第4桌面. 2:cd命令中,输入中文目录很不方便,用 ln -s 桌面 desktop 创建软链接,不必 ...

  3. 常见ORACLE错误,及解决方案(遇则即时更新)

    1.当登陆时提示“ORA-03113:通信通道的文件结束”时:        解决方案:                     需在X:\oraclexe\app\oracle\product\10 ...

  4. 如何用angularjs制作一个完整的表格之五__完整的案例

    由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...

  5. linux主要目录的作用

    手动敲一遍.算是加强记忆吧~ /:文件系统的入口,也是最高一级的目录 /bin:最基本的且着急用户和普通用户都可以使用的命令放在此目录下,如:ls.cp等 /boot:存放Linux的内核及引导系统所 ...

  6. 转:PHP如何阻止用户上传成人照片或者裸照

    原文来自于:http://www.hackbase.com/tech/2014-10-12/69367.html 当前,网络淫秽色情信息屡禁不止.屡打不绝,严重危害未成年人身心健康,严重败坏社会风气, ...

  7. House Of Hello恶搞包为什么如此受热捧!

    凤凰时尚    在大多数人的心中,奢侈品都是昂贵的,摆在精美的橱窗中,动辄上万的价格,高贵而冷艳,也让很多人望而却步.然而,最近在很多时尚年轻一族中却流传着这样一句话“昂贵不等于奢侈,奢侈是一种生活态 ...

  8. BZOJ 1014 火星人prefix

    Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...

  9. 【技术贴】解决前台js传参中文乱码

    方法1: 前台两次编码,后台一次解码.因为getParamet已经自动解了一次了. JavaScript: window.self.location="list.jsp?searchtext ...

  10. SharePoint ListTemplateType enumeration

    from microsoft http://msdn.microsoft.com/en-us/library/office/microsoft.sharepoint.client.listtempla ...