參考文檔：https://www.cnblogs.com/tenWood/p/8620708.html
ztree api地址：http://www.treejs.cn/v3/api.php
說明：jsp頁面中有的方法在本實例中用不到，但是還是列出來了，目的是為了方便以后的擴展和改寫。
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <meta HTTP-EQUIV="expires" CONTENT="0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ${jqery1_7_1} ${zTree3_5_24} <script type="text/javascript"> var setting = { view: { selectedMulti: false }, async: { enable: true, //是否為異步加載 url:"/${contextName}/${sys_id}/viewAffix/getAsyncAffixTreeData", dataType: "json", /* * //異步加載時需要自動提交父節點屬性的參數。[setting.async.enable = true 時生效] * 1、 將需要作為參數提交的屬性名稱，制作成 Array 即可，例如：["id", "name"] * 2、可以設置提交時的參數名稱，例如 server 只接受 zId : ["id=zId"] * */ autoParam:["pk_id","fk_pid"], //Ajax 請求提交的靜態參數鍵值對。[setting.async.enable = true 時生效] otherParam:{"root_id":"${pk_id}"}, //用於對 Ajax 返回數據進行預處理的函數。[setting.async.enable = true 時生效] dataFilter: filter }, data:{ // keep:{ // parent: true // }, key:{ name:"f_name" }, //采用簡單數據類型，不必嵌套復雜json數據格式 simpleData:{ enable:true, ////是否之用簡單數據 idKey:"pk_id", pIdKey:"fk_pid", rootPId:"" } }, callback: { beforeClick: beforeClick, //用於捕獲單擊節點之前的事件回調函數，並且根據返回值確定是否允許單擊操作 beforeAsync: beforeAsync, //用於捕獲異步加載之前的事件回調函數，zTree 根據返回值確定是否允許進行異步加載 eg: 禁止 id 為 1 的父節點進行異步加載操作 onAsyncError: onAsyncError, //用於捕獲異步加載出現異常錯誤的事件回調函數。如果設置了 setting.callback.beforeAsync 方法，且返回 false，將無法觸發 onAsyncSuccess / onAsyncError 事件回調函數 onAsyncSuccess: onAsyncSuccess //用於捕獲異步加載正常結束的事件回調函數 。如果設置了 setting.callback.beforeAsync 方法，且返回 false，將無法觸發 onAsyncSuccess / onAsyncError 事件回調函數 } }; function filter(treeId, parentNode, childNodes) { // console.log('過濾數據!'); //判斷是否為父節點 for (var i = 0; i < childNodes.length; i++){ if (childNodes[i].f_type == '1') { childNodes[i].isParent = true; } } return childNodes; } //點擊節點 function beforeClick(treeId, treeNode) { if (!treeNode.isParent) { alert("請選擇父節點"); return false; } else { return true; } } //展開節點 function beforeAsync(treeId, treeNode) { return true; } function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) { console.log('異步加載發生了錯誤！'); } function onAsyncSuccess(event, treeId, treeNode, msg) { console.log('異步加載成功了'); } //初始化樹 一開始初始化完tree時候，讓第一個父節點展開了； function initZTree(){ // console.log('初始化數據！'); $.ajax({ url: "/${contextName}/${sys_id}/viewAffix/getAsyncAffixTreeData", type:"post", dataType: "json", cache:false, //是否緩存 async:true,//true 異步；false 同步 data:{ root_id: '${pk_id}' }, success: function(data){ if (!data) { return; } var nodes = data; // console.log(nodes); //判斷節點是否為父節點 for(var i=0;i<nodes.length;i++){ if (nodes[i].f_type == '1') { nodes[i].isParent = true; }/*else { nodes[i].isParent = false; }*/ } // console.log(nodes); var zTreeObj = $.fn.zTree.init($("#ztree"),setting, data); //讓第一個父節點展開 var rootNode_0 = zTreeObj.getNodeByParam('fk_pid',0,null); zTreeObj.expandNode(rootNode_0, true, false, false, false); }, error: function(){ alert('加載根節點發生了錯誤！'); } }); } //初始化樹的數據 $(document).ready(function(){ initZTree(); }); </script> <title>查看文件詳情</title> </head> <body> <div class="zTreeDemoBackground left"> <ul id="ztree" class="ztree"></ul> </div> </body> </html>
controller
/** * 資料查看公用 * @param pk_id：單項工程id */ @RequestMapping("/asyncAffixtree") public String asyncAffixtree(Model model,@RequestParam(value="pk_id", required=false)String pk_id){ model.addAttribute("pk_id", pk_id);//單項工程id return "/web/gz/viewAffix/asyncAffixTree"; } /** * 獲取附件樹 * @param root_id：根節點id */ @RequestMapping("/getAsyncAffixTreeData") @ResponseBody public Object getAsyncAffixTreeData(String root_id, String pk_id, String fk_pid){ return iViewAffixService.getAsyncAffixTreeData(root_id,pk_id,fk_pid); }
service
/** * 獲取ztree樹的數據 * @param root_id * @param pk_id * @param fk_pid * @return */ @Override public List<Map<String,Object>> getAsyncAffixTreeData(String root_id, String pk_id, String fk_pid) { List<Map<String,Object>> list = new ArrayList<>(); if (root_id == null || root_id.trim().isEmpty()) { return list; } String sys_id = getCurSysId(); //加載父節點和第一次子節點 if(fk_pid == null || fk_pid.trim().isEmpty()){ list = affixDao.getFirstLoadTreeData(sys_id, root_id); return list; } list = affixDao.getMapDataByFkPid(sys_id, pk_id); return list; }
mapper
<select id="getFirstLoadTreeData" resultType="com.base.obj.BaseMap" parameterType="string"> select pk_id, fk_pid, f_name, f_type from ${sys_id}_kyps.T_C_AFFIX where pk_id = #{pk_id} or fk_pid = #{pk_id} </select> <select id="getMapDataByFkPid" resultType="com.base.obj.BaseMap" parameterType="string"> select pk_id, fk_pid, f_name, f_type from ${sys_id}_kyps.T_C_AFFIX where FK_PID = #{fk_pid,jdbcType=VARCHAR} </select>
初始化
異步加載后
