一.AdminLTE介绍
1.介绍
AdminLTE是一个开源的后台控制面板和仪表盘 WebApp 模板，是建立在Bootstrap3框架和JQuery之上的开源模板主题工具，它提供了一系列响应的组件，并内置了多个模板页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站。
2.下载
我们可以到其官网下载：https://adminlte.io/
也可选择中文版本的地址：http://adminlte.la998.com/index2.html
其中有一些模板是收费的，当然也有挺多免费的，看需求自行选择。
3.AdminLTE的简单使用
AdminLTE的使用并不难，和使用Bootstrap类似。我们将下载的文件导入到我们的工程当中，进行适当的删改即可。当然，我们也可以只使用其中的一小部分，甚至是一个小组件。详见其官方文档：
中文文档：http://adminlte.la998.com/documentation/#introduction
二.zTree的简单使用
1.简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的 Web 显示、权限管理等等。
特点
- zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载。
- 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀。
- 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器。
- 支持 JSON 数据。
- 支持静态和 Ajax 异步加载节点数据。
- 支持任意更换皮肤 / 自定义图标（依靠 css）。
- 支持极其灵活的 checkbox 或 radio 选择功能。
- 提供多种事件响应回调。
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟。
- 在一个页面内可同时生成多个 Tree 实例。
- 简单的参数配置实现 灵活多变的功能。
2.基本使用
第一步：导入zTree组件
代码语言：javascript复制<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
代码语言：javascript复制<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>树菜单
代码语言：javascript复制<!-- 树菜单 -->
<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>
<!-- 树菜单 /-->第三步：Controller返回正确的json格式数据
Tips: 分析页面所需json数据格式为：
[{ id:11, pId:1, name:"系统", checked:true}, { id:12, pId:1, name:"财务"，checked:false}]
因此可以将数据查出来后自行转为json格式的。也可通过sql语句直接查出我们所需要的数据格式：
代码语言：javascript复制<!-- 查找角色权限的功能模块(一条语句,包含所有模块及当前角色的模块权限标记)注意返回的是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>Controller返回json数据
代码语言：javascript复制//页面加载完毕后直接发起异步请求初始化 权限菜单树
@RequestMapping(value = "/initModuleData",name = "加载角色权限")
public @ResponseBody List initModuleData(@RequestParam("roleid") String id){
List<Map> list = roleService.findTreeJson(id);
return list;
}这样，页面就可以根据我们的json数据动态的生成一个zTree树啦！
