很遗憾，过去将近一年的时间里一直在学习，工作之中涉及到Java和Flex，业余时间在和朋友搞Android，实际开发中遇到很多问题都需要学习，偶而挤出来那么一点时间自己也在了解一些新的东西，感觉太多的东西想学，只是时间少的可怜。
从今天开始，计划每周不低于一篇文章，把《ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合》写完，下一系列准备写个SSH2.0+EasyUI的框架，我还是依旧那么的喜欢开源技术。
Tree结构应该说是Web开发中必会的对象之一，在关系型数据库中体现为一种“一对多”的父子表，最为典型的就是系统“管理菜单”和角色“权限”，在本篇之中，“菜单”和“权限”实际上是一张数据表，“菜单”仅涉及到显示数据，“权限”涉及到更多的ExtJS API操作，正面分别讲解这两种情况下的使用。
1 ExtJS 代码
理论上说“管理菜单”应该根据当前登录用户（所属角色）的权限，显示相应的菜单结构，这个可以通过继承System.Web.Mvc.AuthorizeAttribute来实现，在需要验证权限的Controller或方法上添加“特性(Attribute)”即可。权限的实现过程准备单独写一篇说明。
本文章的“管理菜单”涉及到以下几个js文件：
app/controller/menu.js
app/store/menu.js
app/view/menu/tree.js
1.1 先看一下控制器类（app/controller/menu.js）代码
Ext.define(‘Manage.controller.Menu‘, {
extend: ‘Ext.app.Controller‘,
stores: [‘Menu‘],
views: [‘menu.Tree‘],
init: function() {
this.control({
‘menuTree‘: {
itemclick: this.selectItem
}
});
},
selectItem: function (view, record, item, index) {
Ext.Ajax.request({
url: ‘/Manage/Category/Query.aspx?id=‘ + record.data.id,
success: function (response) {
var menu = Ext.JSON.decode(response.responseText);
var url = menu.children.MenuUrl;
if (url.length > 0) {
var body = Ext.getCmp(‘bodyID‘);
body.removeAll();
body.add({
xtype: url
});
}
}
});
}
});
1.2 看下store(app/store/menu.js)中的定义
Ext.define(‘Manage.store.Menu‘, {
extend: ‘Ext.data.TreeStore‘,
autoLoad: true,
sorters: [{
property: ‘leaf‘,
direction: ‘ASC‘
}],
root: {
nodeType: ‘async‘,
expanded: true
},
proxy: {
type: ‘ajax‘,
api: {
read: ‘/Manage/Authorize/Menu.aspx‘
},
reader: {
type: ‘json‘,
root: ‘children‘
}
}
});
“管理菜单”仅涉及到“读”操作，所以这里的proxy只设置了一个read URL：/Manage/Authorize/Menu.aspx，先把view代码看完再回过头看这个URL返回的值。
1.3 view(app/view/menu/tree.js)代码
Ext.define(‘Manage.view.menu.Tree‘, {
extend: ‘Ext.tree.Panel‘,
alias: ‘widget.menuTree‘,
header : false,
border : 0,
store: ‘Menu‘,
rootVisible: false
});
视图代码很简单，定义了不显示header，边框为0，以及不显示根节点。
2 C# 代码
ExtJS 中相应的controll、store、view代码都很简单，而C#返回的结果也很简单，“管理菜单”所请求的URL是：/Manage/Authorize/Menu.aspx，打开Areas/Manage/Controllers/AuthorizeController.cs文件：
public class AuthorizeController : Controller
{
public IRoleService RoleService { get; set; }
public IAuthorizeService AuthorizeService { get; set; }
public ActionResult Menu()
{
Role role = this.RoleService.Read("12");
var childs = this.MenuChildrens(ref role, null);
var root = new
{
id = 0,
text = "根",
expanded = true,
leaf = !childs.Any(),
children = childs
};
return Json(root, JsonRequestBehavior.AllowGet);
}
[NonAction]
private IList<object> MenuChildrens(ref Role role, string parent)
{
var list = String.IsNullOrEmpty(parent)
? role.Categories.Where(x => String.IsNullOrEmpty(x.ParentCode))
: role.Categories.Where(x => x.ParentCode == parent);
IList<object> childs = new List<object>();
if (!list.Any())
{
return childs;
}
foreach (var row in list)
{
var children = this.MenuChildrens(ref role, row.Code);
childs.Add(new
{
id = row.Code,
text = row.Name,
expanded = true,
leaf = !children.Any(),
children = children
});
}
return childs;
}
}
在关系型数据库中为了表示一个tree结构，一般都会设计两个主要的字段：ID和父ID，在遍历tree时就可以使用父ID来向下索引子节点。这里的代码我就不详述了，如果有不清晰或疑问请留言。最后，这里实际的返回串类似这样：
{"id":0,"text":"根","expanded":true,"leaf":false,"children":[{"id":"11","text":"数据管理","expanded":true,"leaf":false,"children":[{"id":"1111","text":"新闻管理","expanded":true,"leaf":true,"children":[]}]},{"id":"12","text":"系统管理","expanded":true,"leaf":false,"children":[{"id":"1211","text":"文章模版","expanded":true,"leaf":true,"children":[]}]},{"id":"13","text":"系统配置","expanded":true,"leaf":false,"children":[{"id":"1311","text":"角色管理","expanded":true,"leaf":true,"children":[]},{"id":"1312","text":"管理员管理","expanded":true,"leaf":true,"children":[]},{"id":"1313","text":"权限分配","expanded":true,"leaf":true,"children":[]},{"id":"1314","text":"分类管理","expanded":true,"leaf":true,"children":[]},{"id":"1315","text":"文章管理","expanded":true,"leaf":true,"children":[]}]}]}
使用工具格式化一下再看就比较清晰了：
在线格式化工具：http://tool.oschina.net/codeformat/json
或者使用Sublime Text编辑器，64位：http://download.csdn.net/detail/xz2001/6490993，32位：http://download.csdn.net/detail/xz2001/6490973
{
"id": 0,
"text": "根",
"expanded": true,
"leaf": false,
"children": [{
"id": "11",
"text": "数据管理",
"expanded": true,
"leaf": false,
"children": [{
"id": "1111",
"text": "新闻管理",
"expanded": true,
"leaf": true,
"children": []
}]
}, {
"id": "12",
"text": "系统管理",
"expanded": true,
"leaf": false,
"children": [{
"id": "1211",
"text": "文章模版",
"expanded": true,
"leaf": true,
"children": []
}]
}, {
"id": "13",
"text": "系统配置",
"expanded": true,
"leaf": false,
"children": [{
"id": "1311",
"text": "角色管理",
"expanded": true,
"leaf": true,
"children": []
}, {
"id": "1312",
"text": "管理员管理",
"expanded": true,
"leaf": true,
"children": []
}, {
"id": "1313",
"text": "权限分配",
"expanded": true,
"leaf": true,
"children": []
}, {
"id": "1314",
"text": "分类管理",
"expanded": true,
"leaf": true,
"children": []
}, {
"id": "1315",
"text": "文章管理",
"expanded": true,
"leaf": true,
"children": []
}]
}]
}
返回的节点属性中，id必须唯一，text是显示出的文本，expanded表示默认该节点是否打开，leaf表示是否是叶节点，children是子节点集合，详细的属性请查阅ExtJS API文档，最终显示的结果如下：
下一篇说下TreePanel一些复杂的操作，如节点遍历和复选框的读、写操作等。
ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合十：TreePanel 之 管理菜单,布布扣,bubuko.com