【ztree系列】完美实现复选框功能

       在权限系统中，大多数的页面都用到了树形结构，其中最常用的便是树资源的加载和单击事件，除此之外ztree还可以实现很多功能。今天以实现复选框的添加功能为例，咱们再来深入的学习下ztree的应用。

一、实例描述

       在用户管理模块中，需要给用户添加角色，而用户与角色的之间是一个多对多的关系。这里我们可以先加载两个角色树资源，通过两个树之间数据的交换，从而得到用户所拥有的角色资源，实现效果如下：

1.用户信息入口

2.加载角色信息

       Datagrid表格中的“分配”按钮是针对单个用户的角色分配，而搜索框下边的“批量分配角色”按钮是针对多个用户的角色分配，在实现过程中把二者结合在了一起。

1）如果选择的是一位用户，则右侧角色树“已分配角色”中是该用户已经拥有的角色，左侧角色树“可分配角色”中是除该用户拥有的角色之外所有的角色。

2）如果选择的是多位用户，则右侧角色树为空，左侧角色树是所有的角色

3.实现添加、移除等功能

       具体的功能实现由几个按钮完成，在上图中“添加、全部添加、移除、全部移除”四个按钮用来管理两个角色树之间的数据传输，与后台没有交互；“确定”按钮用来把页面的操作结果保存到数据库中；“重置”按钮负责角色分配窗口恢复到初始化状态。

       “确定”后，数据库中就保存了相应的用户角色信息。

二、具体实现

1.HTML中，先设计一个Windows窗口，用来盛放两个角色树

<div id="groupDistributeRole" class="easyui-window" title="批量分配角色" style="width:700px;height:500px;padding:0px;" data-options="collapsible:false,minimizable:false,maximizable:false,modal:true" >
    <div class="easyui-layout" style="width: 630px; height: 370px; margin-top: 20px; margin-left: 20px; margin-right: 20px">

        @*1.左：所有的角色*@
        <div data-options="region:'west',title:'可分配角色',accordion:'false'" style="width: 260px;">
            <ul id="roleTree" class="ztree"></ul>
        </div>
        @*2.中：添加移除按钮*@
        <div id="RoleButton" data-options="region:'center'" style="width: 100px; border: 0px; font-size: 26px; text-align: center; margin-top: 60px">
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="addRole()">添　加　>