很久沒搞過樹形控件了 ， 再次接觸看官網文檔有點沒懂，於是在網上找了個代碼copy上，但數據是寫死的，就想這在用ajax異步取出數據替換，下面是js代碼
<SCRIPT type="text/javascript" > //定義全局ztree數據 var zNodes; /* 初始化ztree數據 */ function initZtree(){ $.ajax({ type: "GET", url: "<%=request.getContextPath() %>/articleType/getArticleType", dataType: "json", async:false, success: function(data){ var str=""; for(var i =0;i<data.type.length;i++){ str += "{id:'"+ data.type[i].id+"', pId:'"+data.type[i].pid+"', name:'"+data.type[i].name+"'},\n"; } alert("["+str+"]"); zNodes='['+str+']'; $("#ztree").val(zNodes); } }); } $(function(){ //initZtree(); alert($("#ztree").val()+"999"); alert(zNodes); zNodess = zNodes; alert("8888"+zNodess); }) var zTreeObj, setting = { view: { selectedMulti: false }, async: { enable: true, url: "<%=request.getContextPath() %>/articleType/getArticleType", otherParam: { "id":"1", "name":"test"} }, data: { simpleData: { enable:true, idKey: "id", pIdKey: "pId", rootPId: "" } }, callback: { onClick: function(treeId, treeNode) { var treeObj = $.fn.zTree.getZTreeObj(treeNode); var selectedNode = treeObj.getSelectedNodes()[0]; $("#txtId").val(selectedNode.id); $("#txtAddress").val(selectedNode.name); } } } $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#tree"), setting,zNodess ); }); </SCRIPT>
代碼捏有點亂，大概就是想用ajax取出數據，但遇到個問題，取出來的數據拼接成json 不能被識別。
於是又繼續看官網demo 和api
找到個基礎的動態取數據
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Async</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script> <!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>--> <SCRIPT type="text/javascript"> <!-- var setting = { async: { enable: true, url:"../asyncData/getNodes.php", autoParam:["id", "name=n", "level=lv"], otherParam:{"otherParam":"zTreeAsyncTest"}, dataFilter: filter } }; function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; for (var i=0, l=childNodes.length; i<l; i++) { childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); } return childNodes; } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting); }); //--> </SCRIPT> </HEAD> <BODY> <h1>異步加載節點數據的樹</h1> <h6>[ 文件路徑: core/async.html ]</h6> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>1、setting 配置信息說明</h2> <ul class="list"> <li class="highlight_red">使用異步加載，必須設置 setting.async 中的各個屬性，詳細請參見 API 文檔中的相關內容</li> </ul> </li> <li class="title"><h2>2、treeNode 節點數據說明</h2> <ul class="list"> <li>異步加載功能對於 treeNode 節點數據沒有特別要求，如果采用簡單 JSON 數據，請設置 setting.data.simple 中的屬性</li> <li>如果異步加載每次都只返回單層的節點數據，那么可以不設置簡單 JSON 數據模式</li> </ul> </li> <li class="title"><h2>3、其他說明</h2> <ul class="list"> <li class="highlight_red">觀察 autoParam 和 otherParam 請使用 firebug 或 瀏覽器的開發人員工具</li> <li class="highlight_red">此 Demo 只能加載到第 4 級節點（level=3）</li> <li class="highlight_red">此 Demo 利用 dataFilter 對節點的 name 進行了修改</li> </ul> </li> </ul> </div> </div> </BODY> </HTML>
在閱讀官網demo的時候不能看到demo的具體js代碼 這時你需要下載ztree插件 在下載好的文件夾里面會有demo的js代碼
那個路徑就是下載下來的文件夾路徑，這也是后面發現才找到的js代碼
下面是后面根據demo修改的js代碼
<SCRIPT type="text/javascript"> var setting = { view: { selectedMulti: false }, async: { enable: true, url:"<%=request.getContextPath() %>/Type/Type", autoParam:[], contentType: "application/json", otherParam:{}, dataFilter: filter //異步獲取的數據filter 里面可以進行處理 filter 在下面 }, data: { simpleData: { enable:true, idKey: "id", pIdKey: "pid", rootPId: "" } },//個人理解加上這個就能按級別顯示，其中的id pid 對應你的實體類 callback: { onClick: function(treeId, treeNode) { var treeObj = $.fn.zTree.getZTreeObj(treeNode); var selectedNode = treeObj.getSelectedNodes()[0]; $("#txtId").val(selectedNode.id); $("#txtAddress").val(selectedNode.name); } } //這里是節點點擊事件 }; function filter(treeId, parentNode, childNodes) { alert(childNodes.length); if (!childNodes) return null; for (var i=0, l=childNodes.length; i<l; i++) { childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); } return childNodes; } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting); }); </SCRIPT>
其異步獲取后台數據要轉json
@RequestMapping(value="getArticleType") //@ResponseBody public void getArticleType(HttpServletRequest request ,HttpServletResponse response,ArticleTypeQuery query){ response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); Map<String, Object> map=new HashMap<String,Object>(); try { List<ArticleType> list=articleTypeMapper.selectArticleTypeByQuery(query); map.put("type", list); response.getWriter().print(JSON.toJSONString(list)); } catch (Exception e) { // TODO: handle exception } //return map; }
上面注釋的修改過的，也就是最開始的寫法，用map返回的json數據，不知道不能識別是不是因為這個原因，后面就改了不用map了
結合上面兩段代碼，能正常顯示出樹形來了！
對了 還的有頁面代碼
頁頭記得加上ztree相關的js和css喲
<div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div>
ztree官網：http://www.treejs.cn/