react中如何實現簡單樹形結構的構建？介紹zTree

問題：需求是樹形接口數據有多級結構，並且功能有增查刪改重命名拖拽等~

使用場景：針對於react項目中,以爲zTree使用起來特別方便，並且以爲資料挺少的，因此，就作一個總結!

一：在react項目中若是引入zTree呢：

首先：npm install zTree --save

而後：import zTree from './zTree'

二：zTree的介紹：

一、zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分經常使用功能的 Tree 插件

二、zTree v3.0 將核心代碼按照功能進行了分割，不須要的代碼能夠不用加載

三、採用了 延遲加載 技術，上萬節點輕鬆加載，即便在 IE6 下也能基本作到秒殺

四、兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器

五、支持 JSON 數據

六、支持靜態 和 Ajax 異步加載節點數據

七、支持任意更換皮膚 / 自定義圖標（依靠css）

八、支持極其靈活的 checkbox 或 radio 選擇功能

九、提供多種事件響應回調

十、靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還能夠多節點拖拽喲

十一、在一個頁面內可同時生成多個 Tree 實例

十二、簡單的參數配置實現 靈活多變的功能

三：核心的函數和屬性介紹：

核心：zTree(setting, [zTreeNodes]) 這個函數接受一個JSON格式的數據對象setting和一個JSON格式的數據對象zTreeNodes，從而創建 Tree。

核心參數：setting zTree 的參數配置都在這裏完成，簡單的說：樹的樣式、事件、訪問路徑等都在這裏配置

相關配置以下：

東西和須要注意的地方有點多，你們有須要的能夠參考官方網址哦~

四：下面將介紹重點zTree的詳細資料：

zTree官方網址: www.ztree.me/v3/main.php…

zTree中demo演示： www.treejs.cn/v3/demo.php…

zTree中API文檔：www.treejs.cn/v3/api.php

實現的效果以下所示：

文檔中右側有個文件路徑，根據這個能夠找到左側中間效果的代碼

備註：react項目中具體使用方式能夠參考這個，實現的功能多，並且很方便，後續還會有補充~

目的：僅僅做爲我的筆記使用，若是文中有不對的，歡迎隨時指出，謝謝!