zTree的拖拽排序


ztree本身是可以支持拖拽的,但是卻沒有找到明確的支持拖拽的排序,也就是說,在拖拽過程中,需要自定義維護拖拽后的順序並保存至后台。

在這樣一個比較常規的需求情況下,網上也有朋友給出了一些解決方案,比如自定義一個tree傳入ztree, 不使用ztree的識別字段,而是使用自定義字段,然后當ztree的節點發生變化時,維護這些自定義字段,從而使得整個tree是有序的,並支持拖拽。

上邊的這個解決方案,有一個問題,就是使用javascript構造的tree,傳入ztree之后,會發生堆棧溢出,初步推測是ztree在實現過程中,針對這種傳入的數據結構進行構造tree展示的時候,發生雙向循環引用,而這時javascript最容易出現內存問題的情況。

經過分析,可以得出以下可用方案:

1.使用自定義tree,然后傳入ztree,通過hash表解決雙向引用。
2.自定義一個對象樹,然后做一個轉換過程,轉換為ztree需要的簡單數據結構,維護指針關系即可。    
3.自定義一個對象樹,然后對象樹本身是不互相引用的,用一個函數對自定義樹做排序,傳入ztree, 維護時則只需要維護前后指針和上級指針。

后來在實現第三種方案時,發現一個重要的信息,就是ztree本身不嚴格區分上級節點和下級節點的順序。發現這個信息之后,我們就可以對第三種方案做一個根本性優化,不用構造任何tree,只需要一個普通的一維數組,對其做相應的排序即可。

 

下圖為思考草圖,思考不僅在於"復雜問題簡單化",更在體現於"復雜方案簡單化".

 

 

所以對這個一維數組排序,要實現類似於鏈表排序的方法,要點 :

a.只對一個層級的節點排序。

b.排序時,每次掃描只掃描准確節點(根據p->或n->)。

c.排序方法參考冒泡排序(也可以遞歸),對這個排序過程還有優化空間。

對於這樣一個解決問題的過程,想來想去還是有必要寫一篇記錄。對於以后大家遇到zTree的拖拽排序需求,也可以直接使用這個方案。

所以綜上所述,通過對拖拽動作的記錄(更新到服務端),頁面加載的時候,從服務器端獲取ztree的節點數據,調用這里實現好的ztree排序方法,即可實現ztree的排序功能。

開源代碼地址:http://git.oschina.net/gavinhacker/ztree.linked.js

 

別忘了關注我的公眾號,當然,前提是你對Java, Scala, Python等技術經驗,以及編程日記,感興趣的話。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM