# 树形菜单

TIP

EAdmin集成了 ztree.js,提供了后台中最常用的3种功能,高级功能请参照官网文档自行实现

ztree.js官网

# api

Eadmin.tree

参数 说明 类型 默认值
dom 需要应用城市选择的input,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
checkbox 是否需要复选 boolean false
halfcheck 是否开启半选 boolean false
icon 是否需要图标 boolean false
data 数据,请采用 simpleData 模式,具体查看ztree官网介绍 array -

TIP

以下案例均已下方这种数据结构为例

let data = [
    {
        name : '一级菜单', 
        open : false, 
        children : [
            {
                name : '子菜单'
            }, 
            {
                name : '子菜单'
            }
        ]
    },
    {
        name : '二级菜单', 
        open : false, 
        children : [
            {
                name : '子菜单'
            }, 
            {
                name : '子菜单'
            }
        ]
    }
];
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

# 默认

<div id="p1"></div>
<script>
    (function(){
        Eadmin.tree('#p1', {
            data : data
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 没有图标

<div id="p1"></div>
<script>
    (function(){
        Eadmin.tree('#p2', {
            data : data,
            icon : false
        });
    })();
</script>
1
2
3
4
5
6
7
8
9

# 有复选框

<div id="p1"></div>
<script>
    (function(){
        let obj = Eadmin.tree('#p3', {
            data : data,
            // 开启复选框
            checkbox : true,
            // 开启半选
            halfcheck : true
        });
        // 获取选中的
        let checked = obj.getChecked();
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 获取ztree对象

在EAdmin提供的常用功能不满足的情况下,可以获取ztree对象后,自行参照官网文档来实现高级功能

<script>
    (function(){
        let obj = Eadmin.tree('#p3', {
            data : data,
            checkbox : true
        });
        // 获取ztree真实对象
        let ztree = obj.getZtree();
    })();
</script>
1
2
3
4
5
6
7
8
9
10