MVC+Jquery easyui实现无限级部门小示例

使用jquery easyui和MVC实现无限级部门的treeview 升降级 重命名 新增等功能。
1、效果预览：

2、Department数据库设计：
Description暂时未用和Deep只是识别了一下深度为0的为root级部门（可以换用ParentId==null识别，Deep虽只是标示了root级别部门但在实现升降时候也做了相应的处理）。
CREATE TABLE [dbo].[Department] ( Id int identity(1,1) NOT NULL, Name nvarchar(50) NOT NULL, [Description] nvarchar(400) NOT NULL, ParentId int NULL, Deep int NOT NULL default(0), ) --主键 ALTER TABLE [dbo].[Department] ADD CONSTRAINT [PK_Department] PRIMARY KEY (Id) --自引用外键 ALTER TABLE [dbo].[Department] ADD CONSTRAINT [FK_Department_ParentId] FOREIGN KEY (ParentId) REFERENCES [dbo].[Department] (Id)
3、数据访问使用的是NHibernate 使用codesmith生成，并加以改造。
默认生成的hbm和model使用起来不是很方便hbm增加一个one-to-many的Departments来获取当前Department下的子部门。
改造后的hbm文件内容如下：

对模板生成的model也要进行相应的修改（对应修改的hbm文件进行相应处理）
private IList _dep = new List(); [JsonProperty] public virtual IList Departments { get { return _dep; } set { _disibledevent=>
涉及到的view index.aspx（显示效果就是开头的预览图效果）两个easyui-window 做部门降级和新增的容器 代码：

升级
降级
重命名
新增子部门

• 上级部门:无
• 部门名称:
• 确认降级

效果预览：

部门降级只能降至当前部门上级部门的子部门一下部门，也就是这个原因没有使用easyui tree的拖拽功能去做功能调整。
用到的几个js function：

DepartmentController Actions说明：
提供无限级tree数据的DataList 内容：
public string DataList(int? id) { var preModel = db.Departments.Where(x => x.Deep == 0); return Convert(preModel).ToJson(); } private List Convert(IQueryable model) { List result = new List(); foreach (var v in model) { var temp = new Models.EUITreeModel { id = v.Id, text = v.Name, attributes = string.Empty, iconCls = string.Empty, }; if (v.Departments.Count > 0) { temp.children = Convert(v.Departments.AsQueryable()); } result.Add(temp); } return result; }
Convert方法做无限级部门的递归，绑定jquery easyui tree data。
对应　jquery easyui tree 的EUITreeModel 属性：
public class EUITreeModel { public int id { get; set; } public string text { get; set; } public string iconCls { get; set; } public bool @checked { get; set; } public List children { get; set; } public string attributes { get; set; } }
其他一些Action辅助做一些数据的更新和新增工作！


Tags: 

延伸阅读