zTree節點排序、jsTree節點排序

數字字母混合排序可以參考：https://www.cnblogs.com/sangzs/p/12893309.html

 

正文：

項目中遇到了這個問題，網上也沒找到比較清晰的答案，索性提供一個方案吧。

原理：將整個樹形插件的數據源進行排序，插件在構造UI時，自然也是按照順序來排列的，目前這種思路適用於 zTree 和 jsTree 類庫（當然jsTree本身也有自己的排序插件），其他類庫大家自行嘗試。

這里拿zTree類庫舉例：

 

未排序的效果圖如下

下面這段是zTree初始化的代碼，各科樹形類庫大同小異，總之都有一個數據源（例如此處的 treeData）

$.fn.zTree.init($(parentContainer), setting, treeData);

 

那么我們只需要在初始化之前，自己構造方法把 treeData 進行排序即可

// 先排序
treeData = treeData.sort(function (a, b) {

    // 以下是兩種自定義排序規則，此處我們選擇按樓層高度屬性排序(由高到低)

    // 按節點名稱字符串，進行排序
    // let param1 = a.name;
    // let param2 = b.name;
    // return param1.localeCompare(param2, "zh");

    // 按樓層高度屬性，進行排序
    let param1 = a.elevation;
    let param2 = b.elevation;
    return param2 - param1;
});

// 再初始化
$.fn.zTree.init($(parentContainer), setting, treeData);

 

經過排序后的效果圖如下