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

朴灿烈づ我的快乐病毒、 2024-04-18 14:06 52阅读 0赞

使用jquery easyui和MVC实现无限级部门的treeview 升降级 重命名 新增等功能。

1、效果预览：

![2011092214560952.png][]

2、Department数据库设计：

Description暂时未用和Deep只是识别了一下深度为0的为root级部门（可以换用ParentId==null识别，Deep虽只是标示了root级别部门但在实现升降时候也做了相应的处理）。

![复制代码][copycode.gif]

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)

![复制代码][copycode.gif]

3、数据访问使用的是NHibernate 使用codesmith生成，并加以改造。

默认生成的hbm和model使用起来不是很方便hbm增加一个one-to-many的Departments来获取当前Department下的子部门。

改造后的hbm文件内容如下：

![复制代码][copycode.gif]

<?xml version="1.0" encoding="utf-8" ?>
    <hibernate-mapping xmlns="urn:nhibernate-mapping-2.2" namespace="IMubiao.Data.DomainModels" assembly="IMubiao.Data">
        <class name="IMubiao.Data.DomainModels.Department, IMubiao.Data" table="[dbo].[Department]" lazy="true">
            <id name="Id" column="[Id]">
                 <generator class="native" />
            </id>
            <property name="Name" column="[Name]" />
            <property name="Description" column="[Description]" />
            <property name="Deep" column="[Deep]" />
            <many-to-one name="DepartmentMember" column="[ParentId]" class="Department" />
        <bag name="Departments" lazy="true" cascade="all-delete-orphan" inverse="true" >
          <key column="[ParentId]"></key>
          <one-to-many class="Department"></one-to-many>
        </bag>
            <bag name="Hrms" lazy="true" cascade="all-delete-orphan" inverse="true" >
                <key column="[DepartmentId]"></key>
                <one-to-many class="Hrm"></one-to-many>
            </bag>
        </class>
    </hibernate-mapping>

![复制代码][copycode.gif]

对模板生成的model也要进行相应的修改（对应修改的hbm文件进行相应处理）

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>private</code> 
      <code>IList&lt;Department&gt; _dep = </code> 
      <code>new</code> 
      <code>List&lt;Department&gt;();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>[JsonProperty]</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>public</code> 
      <code>virtual</code> 
      <code>IList&lt;Department&gt; Departments</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>get</code> 
      <code>{ </code> 
      <code>return</code> 
      <code>_dep; }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>set</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>OnDepartmentsChanging();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>_dep = value;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>OnDepartmentsChanged();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>partial </code> 
      <code>void</code> 
      <code>OnDepartmentsChanging();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>partial </code> 
      <code>void</code> 
      <code>OnDepartmentsChanged();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

涉及到的view index.aspx（显示效果就是开头的预览图效果）两个easyui-window 做部门降级和新增的容器 代码：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-panel"</code> 
      <code>title</code> 
      <code>=</code> 
      <code>"部门管理"</code> 
      <code>icon</code> 
      <code>=</code> 
      <code>"icon-option"</code> 
      <code>collapsible</code> 
      <code>=</code> 
      <code>"true"</code> 
      <code>minimizable</code> 
      <code>=</code> 
      <code>"true"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>maximizable</code> 
      <code>=</code> 
      <code>"false"</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"height: 500px; padding: 10px; background: #fafafa;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>ul</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"department_tree"</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"height: 350px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>ul</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"department_tree_menu"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-menu"</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"width: 120px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> onclick</code> 
      <code>=</code> 
      <code>"dep_up()"</code> 
      <code>iconcls</code> 
      <code>=</code> 
      <code>"icon-up"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>升级&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> onclick</code> 
      <code>=</code> 
      <code>"dep_down()"</code> 
      <code>iconcls</code> 
      <code>=</code> 
      <code>"icon-down"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>降级&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> class</code> 
      <code>=</code> 
      <code>"menu-sep"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> onclick</code> 
      <code>=</code> 
      <code>"dep_rename()"</code> 
      <code>iconcls</code> 
      <code>=</code> 
      <code>"icon-rename"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>重命名&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> class</code> 
      <code>=</code> 
      <code>"menu-sep"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> onclick</code> 
      <code>=</code> 
      <code>"department_add(0)"</code> 
      <code>iconcls</code> 
      <code>=</code> 
      <code>"icon-add"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>新增子部门&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> id</code> 
      <code>=</code> 
      <code>"show_d_tree"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-window"</code> 
      <code>closed</code> 
      <code>=</code> 
      <code>"true"</code> 
      <code>title</code> 
      <code>=</code> 
      <code>"选择上级部门"</code> 
      <code>iconcls</code> 
      <code>=</code> 
      <code>"icon-list"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>style</code> 
      <code>=</code> 
      <code>"width: 200px; height: 300px; padding: 5px; background: #fafafa;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> class</code> 
      <code>=</code> 
      <code>"easyui-layout"</code> 
      <code>fit</code> 
      <code>=</code> 
      <code>"true"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> region</code> 
      <code>=</code> 
      <code>"center"</code> 
      <code>border</code> 
      <code>=</code> 
      <code>"false"</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"padding: 10px; background: #fff; border: 1px solid #ccc;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> id</code> 
      <code>=</code> 
      <code>"load_tree"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> id</code> 
      <code>=</code> 
      <code>"department_add"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-window"</code> 
      <code>closed</code> 
      <code>=</code> 
      <code>"true"</code> 
      <code>title</code> 
      <code>=</code> 
      <code>"新增部门"</code> 
      <code>iconcls</code> 
      <code>=</code> 
      <code>"icon-add"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>style</code> 
      <code>=</code> 
      <code>"width: 300px; height: 200px; padding: 5px; background: #fafafa;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> class</code> 
      <code>=</code> 
      <code>"easyui-layout"</code> 
      <code>fit</code> 
      <code>=</code> 
      <code>"true"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> region</code> 
      <code>=</code> 
      <code>"center"</code> 
      <code>border</code> 
      <code>=</code> 
      <code>"false"</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"padding: 10px; background: #fff; border: 1px solid #ccc;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>ul</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>li</code> 
      <code> style</code> 
      <code>=</code> 
      <code>"list-style-type: none; height: 30px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code> type</code> 
      <code>=</code> 
      <code>"hidden"</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"parent_id"</code> 
      <code>value</code> 
      <code>=</code> 
      <code>""</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>label</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>上级部门:&lt;/</code> 
      <code>label</code> 
      <code>&gt;&lt;</code> 
      <code>label</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"parent_text"</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"color: Green;"</code> 
      <code>&gt;无&lt;/</code> 
      <code>label</code> 
      <code>&gt;&lt;/</code> 
      <code>li</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>li</code> 
      <code> style</code> 
      <code>=</code> 
      <code>"list-style-type: none; height: 30px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>label</code> 
      <code> for</code> 
      <code>=</code> 
      <code>"department_name"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>部门名称:&lt;/</code> 
      <code>label</code> 
      <code>&gt;&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text"</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"department_name"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>li</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>li</code> 
      <code> style</code> 
      <code>=</code> 
      <code>"list-style-type: none; height: 30px;"</code> 
      <code>&gt;&lt;</code> 
      <code>a</code> 
      <code>href</code> 
      <code>=</code> 
      <code>"javascript:department_create()"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-linkbutton"</code> 
      <code>icon</code> 
      <code>=</code> 
      <code>"icon-save"</code> 
      <code>&gt;保存&lt;/</code> 
      <code>a</code> 
      <code>&gt;&lt;/</code> 
      <code>li</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>ul</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code> style</code> 
      <code>=</code> 
      <code>"margin: 10px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>a</code> 
      <code> href</code> 
      <code>=</code> 
      <code>"javascript:department_add()"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-linkbutton"</code> 
      <code>icon</code> 
      <code>=</code> 
      <code>"icon-add"</code> 
      <code>&gt;新增部门&lt;/</code> 
      <code>a</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>a</code> 
      <code> href</code> 
      <code>=</code> 
      <code>"javascript:reload();"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-linkbutton"</code> 
      <code>icon</code> 
      <code>=</code> 
      <code>"icon-reload"</code> 
      <code>&gt;重新加载&lt;/</code> 
      <code>a</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

部门降级用到了一个PreDown.aspx的PartialView 代码如下：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;</code> 
      <code>int</code> 
      <code>&gt;" %&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>ul</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"pre_down"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>ul</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>li</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"list-style-type: none; margin-top: 5px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>label</code> 
      <code>for</code> 
      <code>=</code> 
      <code>"selected"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>已选择:&lt;/</code> 
      <code>label</code> 
      <code>&gt;&lt;</code> 
      <code>label</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"selected"</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"color: Green;"</code> 
      <code>&gt;未选择&lt;/</code> 
      <code>label</code> 
      <code>&gt;&lt;/</code> 
      <code>li</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>li</code> 
      <code>style</code> 
      <code>=</code> 
      <code>"list-style-type: none;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"hidden"</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"id_transfer"</code> 
      <code>value="&lt;%=Model %&gt;" /&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"hidden"</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"selected_id"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;</code> 
      <code>a</code> 
      <code>href</code> 
      <code>=</code> 
      <code>"javascript:submit_down()"</code> 
      <code>icon</code> 
      <code>=</code> 
      <code>"icon-ok"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"easyui-linkbutton"</code> 
      <code>&gt;确认降级&lt;/</code> 
      <code>a</code> 
      <code>&gt;&lt;/</code> 
      <code>li</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>$(function () { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$('#pre_down').tree({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>checkbox: false,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>url: '&lt;%=Url.Action("PreDownData","Department",new {id=Model}) %&gt;?' + new Date().getTime(),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>onClick: function (node) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$('#selected').text(node.text);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$('#selected_id').val(node.id);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(this).tree('toggle', node.target);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>function submit_down() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$.post('&lt;%=Url.Action("Down","Department") %&gt;', { id: $('#id_transfer').val(), pid: $('#selected_id').val() }, function () { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$('#show_d_tree').window('close');</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$('#department_tree').tree('reload');</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>script</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

效果预览：

![2011092215502234.png][]

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

用到的几个js function：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>//初始化部门的tree</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_tree'</code> 
      <code>).tree({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>animate: </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>url: </code> 
      <code>'&lt;%=Url.Action("DataList","Department") %&gt;'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>onClick: </code> 
      <code>function</code> 
      <code>(node) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>this</code> 
      <code>).tree(</code> 
      <code>'toggle'</code> 
      <code>, node.target);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>onDblClick: </code> 
      <code>function</code> 
      <code>(node) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'beginEdit'</code> 
      <code>, node.target);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>onAfterEdit: </code> 
      <code>function</code> 
      <code>(node) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$.post(</code> 
      <code>'&lt;%=Url.Action("Edit","Department") %&gt;'</code> 
      <code>, { id: node.id, name: node.text });</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>reload();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>onContextMenu: </code> 
      <code>function</code> 
      <code>(e, node) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>e.preventDefault();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'select'</code> 
      <code>, node.target);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_tree_menu'</code> 
      <code>).menu(</code> 
      <code>'show'</code> 
      <code>, { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>left: e.pageX,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>top: e.pageY</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>//刷新部门树</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>function</code> 
      <code>reload() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'reload'</code> 
      <code>);</code> 
     </div> 
     <div></div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>//部门升级</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>function</code> 
      <code>dep_up() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code> node = $(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'getSelected'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$.post(</code> 
      <code>'&lt;%=Url.Action("UP","Department") %&gt;'</code> 
      <code>, { id: node.id }, </code> 
      <code>function</code> 
      <code> () { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'reload'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>//部门降级</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>function</code> 
      <code>dep_down() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code> node = $(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'getSelected'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#load_tree'</code> 
      <code>).empty().load(</code> 
      <code>'&lt;%=Url.Action("PreDown","Department") %&gt;/'</code> 
      <code>+ node.id, </code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#show_d_tree'</code> 
      <code>).window(</code> 
      <code>'open'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>//重命名</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>function</code> 
      <code>dep_rename() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code> node = $(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'getSelected'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'beginEdit'</code> 
      <code>, node.target);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>//新增部门</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>function</code> 
      <code>department_add(val) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>if</code> 
      <code> (val == undefined || val == </code> 
      <code>null</code> 
      <code>) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#parent_id'</code> 
      <code>).val(</code> 
      <code>''</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#parent_text'</code> 
      <code>).text(</code> 
      <code>'无'</code> 
      <code>);</code> 
     </div> 
     <div></div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>else</code> 
      <code> { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code> node = $(</code> 
      <code>'#department_tree'</code> 
      <code>).tree(</code> 
      <code>'getSelected'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#parent_id'</code> 
      <code>).val(node.id);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#parent_text'</code> 
      <code>).text(node.text);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_name'</code> 
      <code>).val(</code> 
      <code>''</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_add'</code> 
      <code>).window(</code> 
      <code>'open'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>//新增窗体里保存按钮的提交操作</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>function</code> 
      <code>department_create() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code> pid = $(</code> 
      <code>'#parent_id'</code> 
      <code>).val();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code> name = $(</code> 
      <code>'#department_name'</code> 
      <code>).val();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>name = encodeURIComponent(name);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$.post(</code> 
      <code>'&lt;%=Url.Action("Create","Department") %&gt;'</code> 
      <code>, { pid: pid, name: name });</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>reload();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>$(</code> 
      <code>'#department_add'</code> 
      <code>).window(</code> 
      <code>'close'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp; </code> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

DepartmentController Actions说明：

提供无限级tree数据的DataList 内容：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>public string DataList(int? id)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code>preModel = db.Departments.Where(x =&gt; x.Deep == 0);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>return</code> 
      <code>Convert(preModel).ToJson();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>private List&lt;Models.EUITreeModel&gt; Convert(IQueryable&lt;Department&gt; model)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>List&lt;Models.EUITreeModel&gt; result = </code> 
      <code>new</code> 
      <code>List&lt;Models.EUITreeModel&gt;();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>foreach (</code> 
      <code>var</code> 
      <code>v </code> 
      <code>in</code> 
      <code>model)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>var</code> 
      <code> temp = </code> 
      <code>new</code> 
      <code> Models.EUITreeModel</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>id = v.Id,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>text = v.Name,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>attributes = string.Empty,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>iconCls = string.Empty,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>if</code> 
      <code> (v.Departments.Count &gt; 0)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>temp.children = Convert(v.Departments.AsQueryable());</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>result.Add(temp);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>return</code> 
      <code> result;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Convert方法做无限级部门的递归，绑定jquery easyui tree data。

对应　jquery easyui tree 的EUITreeModel 属性：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>public</code> 
      <code> class</code> 
      <code>EUITreeModel</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp; </code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>public</code> 
      <code>int</code> 
      <code>id { </code> 
      <code>get</code> 
      <code>; </code> 
      <code>set</code> 
      <code>; }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>public</code> 
      <code>string</code> 
      <code>text { </code> 
      <code>get</code> 
      <code>; </code> 
      <code>set</code> 
      <code>; }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>public</code> 
      <code>string</code> 
      <code>iconCls { </code> 
      <code>get</code> 
      <code>; </code> 
      <code>set</code> 
      <code>; }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>public</code> 
      <code>bool</code> 
      <code>@</code> 
      <code>checked</code> 
      <code>{ </code> 
      <code>get</code> 
      <code>; </code> 
      <code>set</code> 
      <code>; }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>public</code> 
      <code>List&lt;EUITreeModel&gt; children { </code> 
      <code>get</code> 
      <code>; </code> 
      <code>set</code> 
      <code>; }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>public</code> 
      <code>string</code> 
      <code>attributes { </code> 
      <code>get</code> 
      <code>; </code> 
      <code>set</code> 
      <code>; }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp; </code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

其他一些Action辅助做一些数据的更新和新增工作！

![2011092216042991.png][]

[2011092214560952.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/1e7c56fb40fc4d549425c230321023ad.png
[copycode.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/69f037d8ec91412e87fb40bd76e97dfe.gif
[Link 1]: http://www.cnblogs.com/mzlee/archive/2011/09/22/department_treeview.html#
[2011092215502234.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6a571907ed4b4ae0972b07006c755a25.png
[2011092216042991.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6e92105951ac455c8f28b551bfc67e03.png