MVC4中EasyUI Tree异步加载JSON数据生成树
Posted 每天进步多一点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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数据生成树的主要内容，如果未能解决你的问题，请参考以下文章
easyui tree 异步需要加载两个数据集，例如公司和部门
[转]easyui tree 模仿ztree 使用扁平化加载json