1.和另一篇文章--[TreeGrid 實現增刪改查]前面的內容一致，只需要創建一個html頁面，命名為ztree-01.html，粘貼如下網址的代碼進入ztree-01.html。

訪問http://www.treejs.cn/v3/faq.php#_206復制這些代碼

html>

ZTREE DEMO TITLE>

HEAD>

• ul>

div>

BODY>

HTML>

2.在ztree-01.html做如圖所示修改

第一步:引入所需的css樣式和js

第二步:修改代碼，如圖所示：

說明：訪問http://www.treejs.cn/v3/faq.php#_206，點擊demo

可以看到左面菜單欄里有最簡單的樹選項，點擊第一個--最簡單的樹 -- 標準JSON數據，如圖所示

3.第三步:第一個既然不是我們要找的格式，就查看第二個 最簡單的樹 -- 簡單JSON數據，如圖所示

4.第四步：訪問訪問http://www.treejs.cn/v3/faq.p...，點擊上方的API文檔，找到data里面的simpleData，參考下圖查找到這里

4-1復制這塊的代碼進入html頁面

3.在html頁面把如下沒用的代碼刪除掉

------刪除掉這些代碼--------

var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ];

在var settting里添加如下代碼：

data:{ simpleData:{ enable:true, idKey:"id", pIdKey:"parentId", rootPId:null

}

}

如圖所示：

4.在function做如下修改

$(document).ready(function () {

let url="http://localhost:8080/category/doFindCategorys";

$.get(url,function (result){ console.log(result); zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, result);

})

});

修改后的代碼如圖所示

頁面運行效果如圖所示：

文章來源: segmentfault.com，作者：于影，版權歸原作者所有，如需轉載，請聯系作者。

原文鏈接：segmentfault.com/a/1190000038138328

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ztree java 增删改_Ztree实现增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。