寫在前面
jQuery的 zTree插件
關鍵代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@include file="/context/mytags.jsp" %> <!DOCTYPE html > <html> <head> <title>菜單列表</title> <t:base type="jquery"></t:base> <link rel="stylesheet" type="text/css" href="plug-in/ztree/css/metroStyle.css"> <script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js"></script> <script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.excheck-3.5.min.js"></script> <script type="text/javascript"> var setting = { check: { enable: false,// 是否啟用復選框 chkboxType: {"Y": "", "N": ""} }, data: { simpleData: { enable: true } }, callback: { onExpand: zTreeOnExpand } }; //加載展開方法 function zTreeOnExpand(event, treeId, treeNode) { var treeNodeFuncId = treeNode.id; $.post( 'whiteListController.do?getMenuInfo', {parentFuncId: treeNodeFuncId}, function (data) { var d = $.parseJSON(data); if (d.success) { var dbDate = eval(d.msg); var tree = $.fn.zTree.getZTreeObj("menuSelect"); if (!treeNode.zAsync) { tree.addNodes(treeNode, dbDate); treeNode.zAsync = true; } else { tree.reAsyncChildNodes(treeNode, "refresh"); } } } ); } //首次進入加載level為1的 $(function () { $.post( 'whiteListController.do?getMenuInfo', function (data) { var d = $.parseJSON(data); if (d.success) { var dbDate = eval(d.msg); $.fn.zTree.init($("#menuSelect"), setting, dbDate); } } ); }); </script> </head> <body style="overflow-y: auto" scroll="no"> <ul id="menuSelect" class="ztree" style="margin-top: 30px;"></ul> </body> </html>
jsp代碼解讀
1."<!DOCTYPE html>" 是必需的, 進行 W3C 申明
<!DOCTYPE html >
2.zTree 的容器 className 設置為 "ztree"
<ul id="menuSelect" class="ztree" style="margin-top: 30px;"></ul>
3.然后看js部分
3.1頁面初始化執行代碼
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
init方法為 zTree 初始化方法，創建 zTree 必須使用此方法
1、頁面需要進行 W3C 申明，例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。
2、需要首先加載 jquery-1.4.2.js 或其他更高版本的 jQuery 。
3、需要加載 jquery-ztree.core-3.0.js，如果需要用到 編輯功能 或 checkbox / radio 還需要分別加載 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。
4、需要加載 zTreeStyle.css 以及 zTreeStyle 目錄下的 img 文件。
5、如果需要使用自定義圖標請參考相應的Demo。
6、請注意設置 zTree 的容器樣式 class="ztree"，其中 "ztree" 這個 className，可以根據需要隨意修改，別忘了修改 css 中對應名字就是了，對於容器如果需要增加其他特殊樣式，可根據自己的需要進行修改。
該init方法參數說明(obj, zSetting, zNodes)三個參數
objjQuery Object
用於展現 zTree 的 DOM 容器
zSettingJSON
zTree 的配置數據，具體請參考 “setting 配置詳解”中的各個屬性詳細說明
zNodesArray(JSON) / JSON
zTree 的節點數據，具體請參考 “treeNode 節點數據詳解”中的各個屬性詳細說明
1、v3.x 支持單獨添加一個節點，即如果只新增一個節點，不用必須包在數組中
2、如果需要異步加載根節點，可以設置為 null 或 [ ]
3、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明
返回值JSON
zTree 對象，提供操作 zTree 的各種方法，對於通過 js 操作 zTree 來說必須通過此對象
如果不需要自行設定全局變量保存，可以利用 $.fn.zTree.getZTreeObj 方法隨時獲取
3.2節點展開執行方法即setting中設置的callback函數zTreeOnExpand
該回調函數共有三個參數(event, treeId, treeNode)
參數說明
eventjs event 對象
標准的 js event 對象
treeIdString
對應 zTree 的 treeId，便於用戶操控
treeNodeJSON
被展開的節點 JSON 數據對象
被展開的節點json對象可以獲取到該節點id, 傳到后台通過判斷該節點是否為父節點(即是否有子節點), 如果有子節點則后台查詢出的子節點信息由前台接收后通過addNodes方法添加子節點.或通過reAsyncChildNodes方法強行異步加載父節點的子節點(parentNode, reloadType, isSilent, callback)
addNodes方法參數說明(parentNode, [index], newNodes, isSilent)
parentNodeJSON
指定的父節點，如果增加根節點，請設置 parentNode 為 null 即可。
請務必保證此節點數據對象 是 zTree 內部的數據對象
[index]Number
新節點插入的位置（從 0 開始）
index = -1 時，插入到最后
此參數可忽略
v3.5.19+
newNodesJSON / Array(JSON)
需要增加的節點數據 JSON 對象集合，數據只需要滿足 zTree 的節點數據必需的屬性即可，詳細請參考“treeNode 節點數據詳解”
1、v3.x 支持單獨添加一個節點，即如果只新增一個節點，不用必須包在數組中
2、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明
isSilentBoolean
設定增加節點后是否自動展開父節點。
isSilent = true 時，不展開父節點，其他值或缺省狀態都自動展開。
返回值Array(JSON)
返回值是 zTree 最終添加的節點數據集合
如果 newNodes 是單個節點數據 JSON，返回值也是將其包在 Array 內
請務必記住：返回值中的數據對象 是 newNodes 被 clone 后的，所以絕對不相等！
reAsyncChildNodes方法參數說明(parentNode, reloadType, isSilent, callback)
parentNodeJSON
指定需要異步加載的父節點 JSON 數據
1、parentNode = null 時，相當於從根節點 Root 進行異步加載
2、parentNode.isParent = false 時，不進行異步加載
3、請務必保證此節點數據對象 是 zTree 內部的數據對象
reloadTypeString
reloadType = "refresh" 表示清空后重新加載。
reloadType != "refresh" 時，表示追加子節點處理。
isSilentBoolean
設定異步加載后是否自動展開父節點。
isSilent = true 時，不展開父節點，其他值或缺省狀態都自動展開。
callbackfunction
刷新完成后的回調函數。
返回值無
目前無任何返回值
java代碼解讀
/** * 查詢菜單信息 * @param request * @return */ @RequestMapping(params = "getMenuInfo") @ResponseBody public AjaxJson getMenuInfo(HttpServletRequest request) { AjaxJson j = new AjaxJson(); String parentFuncId = request.getParameter("parentFuncId"); CriteriaQuery cq = new CriteriaQuery(TSFunction.class); if (parentFuncId != null) { cq.eq("TSFunction.id", parentFuncId); } else { cq.eq("functionLevel", Short.valueOf("0")); } cq.addOrder("functionOrder", SortDirection.asc); cq.add(); // 獲取裝載數據權限的條件HQL cq = HqlGenerateUtil.getDataAuthorConditionHql(cq, new TSFunction()); cq.add(); List<TSFunction> functionList = systemService.getListByCriteriaQuery(cq, false); Collections.sort(functionList, new NumberComparator()); List<Map<String, Object>> menuList = new ArrayList<Map<String, Object>>(); if (functionList.size() > 0) { Map<String, Object> map = null; String sql = null; Object[] params = null; for (int i = 0; i < functionList.size(); i++) { map = new HashMap<String, Object>(); map.put("id", functionList.get(i).getId()); map.put("name", functionList.get(i).getFunctionName()); map.put("code", functionList.get(i).getFunctionUrl()); if (StringUtils.isNotBlank(parentFuncId)) { map.put("pId", parentFuncId); } else { map.put("pId", "1"); } // 根據id判斷是否有子節點 sql = "select count(1) from T_S_FUNCTION t where t.PARENTFUNCTIONID = ?"; params = new Object[] { functionList.get(i).getId() }; long count = this.systemService.getCountForJdbcParam(sql, params); if (count > 0) { map.put("isParent", true); } menuList.add(map); } } net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(menuList); j.setMsg(jsonArray.toString()); return j; }
該方法是從數據表中查詢菜單信息並轉為json傳給前台.
當parentFuncId為空即初始時查詢的是一級菜單, 當不為空時即前台點擊某個節點將該節點id傳到后台查詢該節點下的子節點信息同樣轉為json傳給前台.
這么着一看也沒太復雜, 接下來看一下通過Vue.js加載樹.
效果:https://refined-x.com/Vue-Giant-Tree/
源碼:https://github.com/tower1229/Vue-Giant-Tree
感謝