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等技術經驗，以及編程日記，感興趣的話。