基于 jQuery zTree 構建動態加載的樹
一．下載、安裝zTree
zTree下載地址：http://code.google.com/p/jquerytree/downloads/list
這里我下載的是JQuery zTree v3.0。目前最新版是v3.1，一般不建議使用最新版。
下載完成后解壓，可以看到其中有三個文件夾和一個更新日志文件。
Css文件夾 zTree的樣式和圖片存放位置
Demo文件夾 存放zTree的一些實例
Js文件夾 存放的是所有與zTree相關的js文件。這里min是壓縮版，我們在開發的時候建議使用未壓縮版的（不含min的）。
開發時建議將這些壓縮包統一放在一個文件夾（比如zTree）下，這樣，如果需要查看對應的實例，可直接在當前工程下訪問并做修改，便于開發使用。當然，開發完成后可以刪除demo內容。
二．編輯頁面
<%@ page language="java" pageEncoding="UTF-8"%> <%@taglib uri="/struts-tags" prefix="s"%> <%@ include file="../common/header.jsp" %><!DOCTYPE html> <HTML> <HEAD> <title>指派權限</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${root}/css/dialogStyle.css"/> <link rel="stylesheet" href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <link rel="stylesheet" type="text/css" href="${root}/js/jquery/themes/icon.css" /> <STYLE type="text/css"> .btn { BACKGROUND: url(../images/bt_bg.gif); BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #CCCCCC 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #CCCCCC 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #999999 1px solid; } </STYLE> <!-- 為提高效率，建議將1.4.4換成1.6.4版 <script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script> --> <script type="text/javascript" src="${root}/js/jquery/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="${root}/js/jquery/jquery.easyui.min.js"></script> <script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"></script> <script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"></script> <script type="text/javascript" src="${root}/js/winutil.js"></script> <!-- <script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script> --> <SCRIPT type="text/javascript"> <!-- var setting = { async: { enable: true,//異步處理 //contentType: "application/json",//提交參數方式，這里 JSON 格式，默認form格式 url: '${root}/sys/listoper.action?roleId=${roleId}',//異步獲取json格式數據的路徑 autoParam: ["id","name"]//異步加載時需要提交的參數，多個用逗號分隔 }, callback: {//回調函數，在這里可做一些回調處理 //beforeAsync: zTreeBeforeAsync }, check: {//設置 zTree 的節點上是否顯示 checkbox / radio ,默認為false enable: true }, data: { simpleData: { /** 如果設置為 true，請務必設置 setting.data.simpleData 內的其他參數: idKey / pIdKey / rootPId 并且讓數據滿足父子關系。*/ enable: true,//true / false 分別表示 使用 / 不使用 簡單數據模式 idKey: "id", pIdKey: "pId", rootPId: 0 } } }; var zNodes =[];//樹節點，json格式，異步加載可設置為null或[] var zTreeObj;//樹對象 $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//實例化后直接返回樹對象 //異步提交表單 $('#permissionform').form({ url: '${root}/sys/PermissionManagerole.action', onSubmit: function() { //獲取樹對象中選中的節點 var nodes = zTreeObj.getCheckedNodes(); var s = '';//選中節點ids //遍歷選中的節點，為s賦值 for(var i=0; i<nodes.length; i++){ if (s != '') s += ','; s += nodes[i].id; } document.all("roledto.permissionIds").value = s; }, success: function(data) { //操作成功，返回信息 var data = jQuery.parseJSON(data); if(data.success == false){ alert(data.msg); } m_close(); } }); }); //--> </SCRIPT></HEAD>
<BODY onunload="m_close()" style="background-color: #f7f7f7;"> <div style="border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">
<!-- 樹加載后存放的容器 --> <ul id="permission_tree" class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul> <!-- 提交授權操作表單 --> <form id="permissionform" method="post"> <table> <tr> <td><input type="hidden" name="roledto.permissionIds" /></td> <td><input type="hidden" name="roledto.roleId" value="${roleId}"/></td> <td><input type="hidden" name="orgid" value="${orgId}"/></td> </tr> <tr> <td width="100%" align="right"> <input type="submit" style="width:60px;" class="btn" value="保存"/> <input type="button" style="width:60px;" class="btn" value="取消" onclick="m_close()"/> </td> </tr> </table> </form> </div></BODY> </HTML></pre>
三．后臺Action
private String id;private String roleId; /** * 顯示權限欄目樹 * 這里采用一次加載所有樹節點的方式 * 當然也可以換成逐級動態加載的方式 * @return * @throws IOException */ @SuppressWarnings("unchecked") public String list() throws IOException{ /** * 再次查詢時直接返回，這里采用所有節點一次加載的方式 * @param id 點擊樹的節點時傳遞到后臺的屬性id */ if(ValidateUtil.validateString(id)){ return SUCCESS; } //根據角色找到對應的操作權限id String operationids = this.getOperationIdsByRoleId(roleId); //查詢所有的權限分類，如系統管理、訂單管理、采購管理等等，作為樹的一級節點 List<OperationClass> list =operationClassServiceImpl.getAllOperationClass(); //存放樹節點信息 List<Map<String,Object>> items = new ArrayList<Map<String,Object>>(); //當前角色對應的操作 List<RoleOperation> rolist = this.roleServiceImpl.getRoleOperationByRoleId(roleId); for(OperationClass node: list){ //第一級遍歷，遍歷所有的權限分類 Map<String,Object> item = new HashMap<String,Object>(); //最外層，父節點 item.put("id", node.getOperationClassId());//id屬性 ，數據傳遞 item.put("name", node.getClassName()); //name屬性，顯示節點名稱 item.put("isParent", true);//設置為父節點，這樣所有最外層節點都是統一的圖標，看起來會舒服些 //item.put("iconSkin", "diy02");//設置節點的圖標皮膚， diy02在zTreeStyle.css中進行設置 /** * 如果當前節點（權限分類）有對應的操作（權限），添加操作權限作為該節點的子節點 */ if (node.getOperations()!=null&&node.getOperations().size()>0){ Iterator<Operation> it = node.getOperations().iterator(); //存放第一層子節點信息 List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>(); while(it.hasNext()){//對操作進行遍歷 Map<String,Object> subitem = new HashMap<String,Object>();//第二層 Operation oper = (Operation) it.next(); subitem.put("id", oper.getOperationId()+":oper");//id屬性 ，數據傳遞 subitem.put("name", oper.getOperationName()); //name屬性，顯示節點名稱 /** * 如果操作中有多個選項，添加選項作為第二層的子節點 */ if(oper!=null&&oper.getOptions()!=null){ String uoption = "";//有操作權限的操作選項 for(RoleOperation ro : rolist){ if(ro.getOperation().getOperationId(). equals(oper.getOperationId())){//如果當前角色有對應的操作 uoption = ro.getOptions(); } } String[] suboper = oper.getOptions().split(","); List<Map<String,Object>> items3 = new ArrayList<Map<String,Object>>(); //第三層 for(int i=0;i<suboper.length;i++){ Map<String,Object> item3 = new HashMap<String,Object>(); item3.put("id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id屬性 ，數據傳遞 item3.put("name", suboper[i]); //name屬性，顯示節點名稱 if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作選項 if(uoption.contains(suboper[i]+",")){//如果當前角色有此操作選項 item3.put("checked", true);//將此選項選中 } } items3.add(item3);//添加到樹的第三層 } subitem.put("children", items3);//添加第二層子節點 }else{//如果操作沒有選項 if(operationids.contains(oper.getOperationId())){//當前角色有此操作 subitem.put("checked", true);//將此操作選中 } } subitems.add(subitem);//添加到樹的第二層 } item.put("children", subitems);//添加第一層子節點 } items.add(item); //添加到樹的第一層 } JSONArray json = JSONArray.fromObject(items);//轉成json格式 jsonString = json.toString();//json格式字符串 return SUCCESS; }</pre> <p></p>四．編后語
公司之前用的jQuery dTree。dTree也是比較好用的，跟zTree的區別不是很大。但有一點比較讓人難以忍受，dTree在頁面的解析效率比較低。在權限操作這一塊兒換成zTree后速度提高了好幾倍。
zTree的具體使用已在頁面和action模塊做了細致的說明，如果對其中的用法比較有疑問可以查看官方的api，中文api地址如下：http://www.baby666.cn/v3/api.php</a></span>，或者也可以給我留言，我們共同探討。
轉自：http://hbxflihua.iteye.com/blog/1416383</span></span>
本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！