# 树节点排序

# 页面初始排序

  1. 配置项添加sort: true,则开启初始节点排序
  2. 设置排序参数initSort:
    • id: 对某一个节点排序, 不传则对最外层节点
    • field: 按某个字段排序,如果是数字则按大小排序,如果是字符串,则按字母排序
    • type: 升序还是降序,asc:升序, desc:降序
    • depth: 排序节点深度,不传则为最深层,支持数字,1/2/3
  3. 对于懒加载,如果开启排序,并且不传深度,则执行排序,如果传深度,需要手动执行sort方法

# 直接调用排序方法

el.sort({
    id: "001002",
    field: "label", 
    type: "asc", 
    depth: 2
})
1
2
3
4
5
6

# 示例

<div>
    <label for="asc">升序</label><input id="asc" type="radio" name="sort" value="asc" checked />
    <label for="desc">降序</label><input id="desc" type="radio" name="sort" value="desc" />
</div>
<div class="eletree13"></div>

<script>
var el1 = eleTree({
    el: '.eletree13',
    url: '/eleTree/json/1.json?v=2.0.12',
    highlightCurrent: true,
    showCheckbox: true,
    showRadio: true,
    imgUrl: "/eleTree/images/",
    icon: {
        fold: "fold.png",
        leaf: "leaf.png",
        checkFull: ".eletree_icon-check_full",
        checkHalf: ".eletree_icon-check_half",
        checkNone: ".eletree_icon-check_none",
        dropdownOff: ".eletree_icon-dropdown_right",
        dropdownOn: ".eletree_icon-dropdown_bottom",
        loading: ".eleTree-animate-rotate.eletree_icon-loading1",
    },
    rightMenuList: [
        {name: "子节点升序", value: "asc"},
        {name: "子节点降序", value: "desc"},
    ],
    sort: true,
    initSort: {
        field: "label",
        type: "asc",
    }
});
[].slice.call(document.querySelectorAll("input[name='sort']")).forEach(function(item) {
    item.onclick = function() {
        el1.sort({
            field: "label", 
            type: this.value, 
        })
    }
})
el1.on("custom_asc", function(data) {
    el1.sort({
        id: data.data.id,
        field: "label", 
        type: "asc", 
        depth: 1,
    })
    data.load()
}).on("custom_desc", function(data) {
    el1.sort({
        id: data.data.id,
        field: "label", 
        type: "desc", 
        depth: 1,
    })
    data.load()
})

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
显示代码

# 懒加载排序示例(传depth属性)

<div class="eletree14"></div>

<script>
var el2 = eleTree({
    el: '.eletree14',
    highlightCurrent: true,
    showCheckbox: true,
    showRadio: true,
    imgUrl: "/eleTree/images/",
    icon: {
        fold: "fold.png",
        leaf: "leaf.png",
        checkFull: ".eletree_icon-check_full",
        checkHalf: ".eletree_icon-check_half",
        checkNone: ".eletree_icon-check_none",
        dropdownOff: ".eletree_icon-dropdown_right",
        dropdownOn: ".eletree_icon-dropdown_bottom",
        loading: ".eleTree-animate-rotate.eletree_icon-loading1",
    },
    lazy: true,
    data: [
        {"label": "安徽省","id": "01",},
        {"label": "河南省","id": "02","isLeaf": true},
        {"label": "江苏省","id": "03","isLeaf": true}
    ],
    sort: true,
    initSort: {
        field: "label",
        type: "desc",
        depth: 3
    }
});
el2.on('lazyload', function(d) {
    var data = d.data;
    var load = d.load;
    var loadData = [];
    switch (data.id) {
        case "01":
            loadData = [
                {"label": "合肥市","id": "0101","isLeaf": true},
                {"label": "马鞍山市","id": "0102",},
            ]
            break;
        case "0102":
            loadData = [
                {"label": "花山区","id": "010201","isLeaf": true},
                {"label": "雨山区","id": "010202",},
            ]
            break;
        default:
            break;
    }
    setTimeout(function() {
        load(loadData)
        el2.sort({
            id: data.id,
            field: "label",
            type: "desc",
            depth: 1
        })
    }, 500)
})

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
显示代码
Last Updated: 5/28/2021, 4:22:15 PM