由于業(yè)務提個結構樹編輯功能需求，起初用iview的樹組件實現(xiàn)了節(jié)點的增刪改功能，后期又新增修改父節(jié)點功能，因為對節(jié)點拖拽沒有深入調研換去另一種方式實現(xiàn)如圖：

雖然投機取巧實現(xiàn)了修改父節(jié)點功能，但業(yè)務方仍堅持用拖拽的方式來處理，沒辦法業(yè)務方的需求推不了，接下來開始調研結構樹的js插件，發(fā)現(xiàn)zTree的功能與項目所需很契合，于是開始學習文檔api文檔?文檔寫的很詳細，功能很全。

但是應用到項目中發(fā)現(xiàn)一個問題 就是圖標UI風格比較淳樸 與現(xiàn)有項目UI不搭，查看源碼是引用精靈圖片，雖然這種方式能提高性能，但還是決定改用自定義圖標來美化一下，各種百度、各種查詢，都沒有一種方案適合，后來發(fā)現(xiàn)開源項目堡壘機開源項目引用的zTree并實現(xiàn)了自定義圖標，便在git上找到css文件才發(fā)現(xiàn)是在class類名下引用fonawesome字體，并沒有直接使用zTree官方css文件，順著這個思路，自定義圖標得以實現(xiàn)。

在jumpserver項目發(fā)現(xiàn)將增刪改功能放在右鍵菜單，并加了一些對節(jié)點其他屬性的修改功能，便又借鑒這種交互方式進行功能優(yōu)化，說了這么多直接上效果圖?源碼地址