ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合十:TreePanel 之 管理菜单
来源:互联网 发布:linux help分段显示 编辑:程序博客网 时间:2024/04/30 10:39
很遗憾,过去将近一年的时间里一直在学习,工作之中涉及到Java和Flex,业余时间在和朋友搞Android,实际开发中遇到很多问题都需要学习,偶而挤出来那么一点时间自己也在了解一些新的东西,感觉太多的东西想学,只是时间少的可怜。
下一系列准备写个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 之 管理菜单
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合一:构建项目框架
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合三:EF构建持久层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合二:生成数据库
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合四:DbContext生命周期
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合五:数据访问层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合六:业务逻辑层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合七:数据传输对象
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合八:ExtJS及其MVC
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合九:搭建布局结构
- Extjs4 treePanel异步加载菜单
- EXTJS4 之 TreePanel
- EXTJS4之TreePanel
- ExtJs4 之 TreePanel
- Extjs4之TreePanel、TreeGrid
- Extjs4之 treepanel 操作
- extjs4,spring mvc3上传文件
- EXTJs4 TreePanel
- 最短路kruskal算法
- 感知机算法的matlab实现
- 第三周作业
- Anagrams
- FragmentTransaction 实用方法
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合十:TreePanel 之 管理菜单
- python中的迭代器与生成器详解
- 常用PHP操作MySQL命令
- about php.ini
- nyoj_273字母小游戏
- java正则表达式
- java基础_14_正则表达式
- HLSL错误及如何执行龙书中的代码
- Binary Tree Maximum Path Sum