jQuery使用zTree插件實現可拖拽的樹代碼分享

來源：懂視網責編：小OO 時間：2020-11-27 20:04:09

jQuery使用zTree插件實現可拖拽的樹代碼分享

本文主要介紹js使用zTree插件實現可拖拽的樹示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。首先下載zTree所需的相關包，附上官方下載連接：zTree下載，引入相關文件后就可以進行zTree的構建了。首先在頁面上加ul標簽，然后為樹加上id，calss為ztree，前端頁面就完成了。注意：下面所有的代碼是根據我自己的需求寫的，且不完整，主要參考配置流程和回調函數的使用即可。前端頁面。；<；ul id="；modelTree"；class="；ztree"；>；<；/ul>；。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文主要介紹js使用zTree插件實現可拖拽的樹示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。首先下載zTree所需的相關包，附上官方下載連接：zTree下載，引入相關文件后就可以進行zTree的構建了。首先在頁面上加ul標簽，然后為樹加上id，calss為ztree，前端頁面就完成了。注意：下面所有的代碼是根據我自己的需求寫的，且不完整，主要參考配置流程和回調函數的使用即可。前端頁面。；<；ul id="；modelTree"；class="；ztree"；>；<；/ul>；。

在目前接觸到的樹插件中，我覺得zTree比較簡單，也容易上手。有一次業務需求是將某對象分組樹上的對象可以隨意拖拽，相當于改變了對象的分組，因此我用到了zTree，對其進行了一些列學習。

本文主要介紹js使用zTree插件實現可拖拽的樹示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。

首先下載zTree所需的相關包，附上官方下載連接：zTree下載，引入相關文件后就可以進行zTree的構建了。首先在頁面上加ul標簽，然后為樹加上id，calss為ztree，前端頁面就完成了。

注意：下面所有的代碼是根據我自己的需求寫的，且不完整，主要參考配置流程和回調函數的使用即可。

前端頁面：

 <ul id="modelTree" class="ztree"></ul>

然后寫JavaScript，寫之前一定要多多閱讀zTree的官方API，上面已經解釋的很詳細了，只需要照著一步一步做即可。首先就是配置setting，這個是整個zTree的核心配置，我這里除了基本配置外，因為需要拖拽功能，因此配置了edit，其中enable一定要設為true，其他參數看需求配置。callback中也配置相關的回調函數。

setting配置：

配置完setting，將各個回調函數補充完整，根據需求來定里面的內容，我這里根據父節點的類型以及一些其他一些規則對能否拖拽，拖拽能否成功進行了相應的限制。

回調函數：

上面的設置和相關函數完成以后，就可以調用zTree的初始化方法，通過Ajax請求回來的參數去填充我們所需要的樹了。

最后形成的樹（可以拖拽的）：