.Net Mvc 返回Json，动态生成EasyUI Tree
最近做一个项目，开始接触EasyUI，感觉很强大，很适合我这种对前台不是很感冒的人。在学习Tree的过程中，感觉网上的资料挺乱的，很多只是把EasyUI API 抄了一遍。现在把最近这段时间的学到的，给大家分享一下吧，也请大家提意见共同研究。废话不多说了，要实现全动态生成无限级Tree。
1.最终的效果图，可以实现无限分层。
2.数据库表的生成代码：
CREATE TABLE [dbo].[Tree](
[ID] [int] IDENTITY(1,1) NOT NULL,
[CityName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[ParentID] [int] NULL,
[State] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[Url] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
说明：这个是EasyUI tree的数据库表生成代码。对应的字段有ID，CityName，ParentID，State，Url。其中ParentID是父节点ID，Url是指向的页面。
3. EasyUI Tree需要的的数据格式要符合json。根据EasyUI Tree的API 中常用属性，我们来制作.NET中的Model，先来看代码，后面说明。
namespace MvcDemo.Model
{
public class JsonTree
{
private int _id;
private string _text;
private string _state="open";
private Dictionary<string, string> _attributes=new Dictionary<string, string>();
private object _children; public int id
{
get { return _id; }
set { _id = value; }
}
public string text
{
get { return _text; }
set { _text = value; }
}
public string state
{
get { return _state; }
set { _state = value; }
}
public Dictionary<string, string> attributes
{
get { return _attributes; }
set { _attributes = value; }
}
public object children
{
get { return _children; }
set { _children = value; }
}
}
}
说明（从EasyUI 的API中复制）：
- id：节点ID，对加载远程数据很重要。
- text：显示节点文本。
- state：节点状态，'open' 或 'closed'，默认：'open'。在设置为'closed'的时候，当前节点的子节点将会从远程服务器加载他们。
- attributes: 被添加到节点的自定义属性。（Url属性就在这个里面，用Dictionary可以方便的扩展attribute。）
- children: 一个节点数组声明了若干节点。（这个是子节点，它拥有所有的父节点属性）
children 类型为Object ，如果把children也定义为JsonTree类型,形成嵌套类，但是实例化的时候则会出现死循环问题，一直没有解决，如果哪位知道如何解决，可以给我留言。如果对Object不明白，可以参考微软MSDN。
4. 从数据库得到的DataTable转成成EasyUI所需要的对象结合，下面也是本文的核心代码
namespace MvcDemo.Common
{
public class EasyUITree
{
public List<JsonTree> initTree(DataTable dt)
{
DataRow[] drList = dt.Select("parentid=0");
List<JsonTree> rootNode = new List<JsonTree>();
foreach (DataRow dr in drList)
{
JsonTree jt = new JsonTree();
jt.id = int.Parse(dr["id"].ToString());
jt.text = dr["cityname"].ToString();
jt.state = dr["state"].ToString();
jt.attributes = CreateUrl(dt, jt);
jt.children = CreateChildTree(dt, jt);
rootNode.Add(jt);
}
return rootNode;
} private List<JsonTree> CreateChildTree(DataTable dt, JsonTree jt)
{
int keyid = jt.id; //根节点ID
List<JsonTree> nodeList = new List<JsonTree>();
DataRow[] children = dt.Select("Parentid='" + keyid + "'");
foreach (DataRow dr in children)
{
JsonTree node = new JsonTree();
node.id = int.Parse(dr["id"].ToString());
node.text = dr["cityname"].ToString();
node.state = dr["state"].ToString();
node.attributes = CreateUrl(dt, node);
node.children = CreateChildTree(dt, node);
nodeList.Add(node);
}
return nodeList;
}
private Dictionary<string, string> CreateUrl(DataTable dt, JsonTree jt) //把Url属性添加到attribute中，如果需要别的属性，也可以在这里添加
{
Dictionary<string, string> dic = new Dictionary<string, string>();
int keyid = jt.id;
DataRow[] urlList = dt.Select("id='" + keyid + "'");
string url = urlList[]["Url"].ToString();
dic.Add("url", url);
return dic;
}
}
}
说明：上面这三段代码，最主要的是前两段递归生成树。先生成根节点，然后在依次生成此节点的子节点。CreateUrl方法生成EasyUI Tree所需要的结构。
5.在Controller中调用initTree方法，获得对象集合，然后把集合转变成json对象
public ActionResult JsonTreeTest()
{
EasyUIBLL bll = new EasyUIBLL();
EasyUITree EUItree=new EasyUITree();
DataTable dt = bll.GetTable();
List<JsonTree> list = EUItree.initTree(dt);
var json = JsonConvert.SerializeObject(list); //把对象集合转换成Json
return Content(json);
}
说明：“var json = JsonConvert.SerializeObject(list);” 此步骤需要用 Newtonsoft.Json.dll 下载，使用这个动态连接库，不用再为拼接json字符串而苦恼，可以把更多经历放在逻辑上，注意记得添加引用 “using Newtonsoft.Json;”
6.前台的代码：
$('#tree').tree({
url: '/EasyUI/JsonTreeTest',
checkbox:true
});
前台就采用EasyUI提供的方法。url值就是controller中对应的方法。
7.获得到的Json格式数据： 由于比较长，此处折叠起来了
[
{
"id": 1,
"text": "中国",
"state": "open",
"attributes": {
"url": ""
},
"children": [
{
"id": 2,
"text": "北京",
"state": "open",
"attributes": {
"url": ""
},
"children": [
{
"id": 8,
"text": "海淀区",
"state": "",
"attributes": {
"url": ""
},
"children": []
},
{
"id": 9,
"text": "朝阳区",
"state": "",
"attributes": {
"url": ""
},
"children": []
}
]
},
{
"id": 3,
"text": "上海",
"state": "open",
"attributes": {
"url": ""
},
"children": []
},
{
"id": 4,
"text": "河南",
"state": "open",
"attributes": {
"url": ""
},
"children": [
{
"id": 5,
"text": "郑州",
"state": "open",
"attributes": {
"url": ""
},
"children": []
},
{
"id": 6,
"text": "焦作",
"state": "open",
"attributes": {
"url": ""
},
"children": [
{
"id": 7,
"text": "解放区",
"state": "open",
"attributes": {
"url": ""
},
"children": [
{
"id": 10,
"text": "建设路",
"state": "",
"attributes": {
"url": ""
},
"children": []
}
]
}
]
}
]
}
]
}
]
JsonTree格式代码
8.提示一下，后台所有的转换，都是为了返回EasyUI所需要的Json格式。需要注意的是：Json格式中，所有属性的字母都是小写的，所以在封装JsonTree对象时记得小写,避免不必要的麻烦。
9.由于本人的语言表达能力有限，如果有什么地方没有说明白，可以加我QQ：2413660559 ，也欢迎给我指出文中的错误。
总结：采用这种方式，可以从数据库读取出数据，通过递归生成树形对象，再把树形对象转成Json对象，传递给前台显示，这种方式，代码的整齐度大大提高，面向对象，易于扩展。
转载请标明出处。
最新文章
- Oracle在线重定义DBMS_REDEFINITION 普通表—>分区表
- 作业七：团队项目——Alpha版本冲刺阶段004
- [问题2015S08] 复旦高等代数 II（14级）每周一题（第九教学周）
- angular中的promise
- A Round Peg in a Ground Hole - POJ 1584 (判断凸多边形&判断点在多边形内&判断圆在多边形内)
- myeclipse spket spket-1.6.23.jar 破解安装教程
- linux杂记（五）正确关机方法（shutdown，reboot，init，halt）
- curl模拟带验证码的登录
- My97DatePicker选择两个日期范围不超过30天的demo
- 20 ViewPager总结
- [LeetCode] Implement Rand10() Using Rand7() 使用Rand7()来实现Rand10()
- 《microsoft sql server 2008技术内幕 t-sql语言基础》
- ActiveSupport::Concern 和 gem 'name_of_person'（300✨） 的内部运行机制分析
- tomcat7简单优化
- 启动MyEclipse8.5时未响应
- 散列表（HashTable）
- sql server 创建内联表值函数
- ViewPager欢迎界面
- python程序练习题集
- ubuntu16.04系统上安装CAJViewer方法步骤教程详解