1.介紹
AdminLTE是一個開源的后台控制面板和儀表盤 WebApp 模板，是建立在Bootstrap3框架和JQuery之上的開源模板主題工具，它提供了一系列響應的組件，並內置了多個模板頁面，包括儀表盤、郵箱、日歷、鎖屏、登錄及注冊、404錯誤、500錯誤等頁面。通過AdminLTE，我們可以快速的創建一個響應式的Html5網站。
2.下載
我們可以到其官網下載：https://adminlte.io/
也可選擇中文版本的地址：http://adminlte.la998.com/index2.html
其中有一些模板是收費的，當然也有挺多免費的，看需求自行選擇。
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組件
<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
<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> <!-- 樹菜單 /-->
Tips: 分析頁面所需json數據格式為：
[{ id:11, pId:1, name:"系統", checked:true}, { id:12, pId:1, name:"財務"，checked:false}]
因此可以將數據查出來后自行轉為json格式的。也可通過sql語句直接查出我們所需要的數據格式：
<!-- 查找角色權限的功能模塊(一條語句,包含所有模塊及當前角色的模塊權限標記)注意返回的是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數據
//頁面加載完畢后直接發起異步請求初始化 權限菜單樹 @RequestMapping(value = "/initModuleData",name = "加載角色權限") public @ResponseBody List initModuleData(@RequestParam("roleid") String id){ List<Map> list = roleService.findTreeJson(id); return list; }
這樣，頁面就可以根據我們的json數據動態的生成一個zTree樹啦！
喜歡的朋友可以關注我的公眾號，需要廣告托管的朋友可以加QQ哦！
