使用Jquery+EasyUI 进行框架项目开发案例讲解之四---组织机构管理源码分享

　我们分享了使用Jquery EasyUI来进行ASP.NET项目的开发的相关方法，每一个模块都有其共用性，细细理解与掌握，我相信使用EasyUI进行开发还是相当方便的。

　　接下来我分享“组织机构管理”模块主要的核心代码组织机构管理使用的EasyUI控件，主要是EasyUI的TreeGrid控件，组织机构管理主界面如下图所示：

　在进行代码讲解之前，我们先来回顾一个TreeGrid相关的知识。easyUI TreeGrid 从$.fn.datagrid.defaults继承，覆盖默认值$.fn.treegrid.defaults。treegrid 是使用显示分层数据在grid中,treegrid 是基于datagrid和关联treeview 和关联可编辑的grid,treegrid 允许你创建定制的,异步加载展开行数据,和显示分层的数据在多列中。如下图所示：

使用示例

　　属性从 datagrid继承,以下是treegrid新增的属性.

事件

　　事件从datagrid继承, 以下是datagrid新增事件.

方法

$('#tt').treegrid('reload', 2);	// 重新加载指定id值是2的行  $('#tt').treegrid('reload');	// 重新加载所有行  

// 添加一些节点到选中节点  var node = $('#tt').treegrid('getSelected');  $('#tt').treegrid('append',{  	parent: node.id,  // 节点有一个'id'值,定义是通过'idField'属性  	data: [{  		id: '073',  		name: 'name73'  	}]  });  

以上知识对于充分理解并应用TreeGrid非常的重要，对于不明白的童鞋可以看下！下面分享如何使用EasyUI的TreeGrid控件进行我们的组织机构管理的开发，当然还涉及到其他的知识点，在前面的文章已有介绍，不明白的可以看下前面的文章，这儿重在说明一些方法，当然大家也可交流讨论，提出你们在开发过程中使用的常用方式方法。

　　一、“组织机构管理”主界面UI的ASPX代码如下：　　

　可以看到，代码非常的简洁，使用EasyUI开发的好处就在于此，不需要你拖动服务端的控件等这种常规的Asp.NET开发方式，对于这种开发方式的好处不言而喻。

　　绑定当前登录用户所拥有的功能按钮列表代码如下：　

添加组织机构界面窗口如下：

在添加组织机构界面，主负责人，副主管数据域的绑定控件使用的是“ComboGrid"控件，绑定的代码如下：

修改组织机构界面如下：

”修改组织机构“代码如下：

　删除组织机构代码如下：　

“用户-组织机构权限设置”功能主要用于设置特定用户可以访问的组织机构。有时我们会有这样的应用，某些数据属于某个组织机构内部的数据，只能指定其他组织机构特定的用户访问，那么通过此设置，我们就可以轻松的控制特定的用户访问指定的组织机构，“用户-组织机构权限设置”如下图所示。

　在上图中，我们可以看到对用户“陈俊熙”设置了他可以访问的组织机构，我们现在以他的用户“wikstone”登录系统，可以看到当前用户只能看到对应的组织机构了，如下图所示：

　　用户-组织机构权限设置代码如下：

“角色-组织机构权限设置”功能与“用户-组织机构权限设置”功能类似，这儿只是做的对角色的控制。（角色-组织机构）权限设置界面如下：。

本文转自yonghu86 51CTO博客，原文链接：http://blog.51cto.com/yonghu/1321302，如需转载请自行联系原作者