AdminLTE介绍和zTree的简单使用

<link rel="stylesheet" href="${ctx }/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="${ctx }/components/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx }/components/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctx }/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>

<script type="text/javascript">
   // 1.设置树的配置信息
   var setting = {
       check: { // 复选框可用
           enable: true
       },
       data: {  // 定义使用简单json数据格式，如下所示：
           simpleData: {
               enable: true
           }
       }
   };
   /** 简单json数据格式：
    * [{ id:11, pId:1, name:"系统", checked:true}, { id:12, pId:1, name:"财务"，checked:false}]
    * 当前项id  父项id  名称         是否勾选
    */

   // 2.页面加载完毕后发起异步请求获得json格式的数据
   $(document).ready(function(){
       $.get("${ctx}/system/role/initModuleData.do?roleid=${role.id}",function(data) {
           initZtree(data);
       },"json");
   });

   // 3.定义zTree树
   var zTreeObj; 
   // 4.根据获取到的json数据展示ztree树
   function initZtree(data) {
       //第一个参数：树显示的位置，第二个参数：树的配置信息，第三个参数：要展示的数据
       zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
       zTreeObj.expandAll(true);//true：展开所有节点
   }

   // 5.实现权限分配（zTree树复选框提交时）
   function submitCheckedNodes() {
       //1.获取所有的勾选权限节点
       var nodes = zTreeObj.getCheckedNodes(true);//true:被勾选，false：未被勾选
       //2.循环nodes，获取每个节点的id， 拼接模块字符串（以，分隔）
       var moduleIds = "";
       for(var i=0;i<nodes.length;i++) {
           moduleIds += nodes[i].id +",";
       }
       if(moduleIds.length>0) {
           //substr : 字符串剪切    0 ：起始位置， 第二个参数：最大长度
           //123456789,      0   9
           moduleIds = moduleIds.substr(0,moduleIds.length-1);
       }
       $("#moduleIds").val(moduleIds); // 设置表单隐藏域的值
       $("#icform").submit();  // 提交表单
   }
</script>

<!-- 树菜单 -->
<form name="icform" id="icform" method="post" action="${ctx}/system/role/updateRoleModule.do">
    <input type="hidden" name="roleid" value="${role.id}"/>
    <input type="hidden" id="moduleIds" name="moduleIds" value=""/>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left" style="overflow: visible">
          <!-- 展示zTree树的地方 -->
            <ul id="treeDemo" class="ztree"></ul>  
        </div>
    </div>
</form>
<!-- 树菜单 /-->

<!-- 查找角色权限的功能模块(一条语句,包含所有模块及当前角色的模块权限标记)注意返回的是map类型 -->
<select id="findTreeJson" parameterType="string" resultType="map">
    select
    module_id as id ,
    parent_id as pId,
    name as name,
    case when module_id in (select module_id from pe_role_module where role_id = #{roleId})
    then 'true'
    else 'false'
    end
    as checked
    from ss_module;
</select>

//页面加载完毕后直接发起异步请求初始化 权限菜单树
@RequestMapping(value = "/initModuleData",name = "加载角色权限")
public @ResponseBody List initModuleData(@RequestParam("roleid") String id){
    List<Map> list = roleService.findTreeJson(id);
    return list;
}