jsTree默认展开并选中所有checkbox复选框节点

AIGIS.

于 2021-10-20 09:49:52 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xiangshangdemayi/article/details/122237269

版权

jstree 树形结构前端开发数据初始化事件处理

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：最近写了个小demo，使用 jstree 来加载一棵树，网上也能搜到一部分资料，但是大都讲的不太明白，本文展示了一个简单但完整的示例。

整个过程可以分为四步：

0.前期准备

主要是引入一下jstree的css和js，以及jquery。

1.数据准备

2.初始化树

3.加载事件

废话不多说，直接上代码：

JavaScript Code

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

//数组准备
var arr = [
    {
        id: "root1" ,
        text: "根节点1" ,
        parent: "#" ,
        state:
        {
            opened: true ,
            selected: true ,
        }
    },
    {
        id: "root1_sub1" ,
        text: "子节点1" ,
        parent: "root1" ,
        state:
        {
            opened: true ,
            selected: true ,
        }
    },
    {
        id: "root1_sub2" ,
        text: "子节点2" ,
        parent: "root1" ,
        state:
        {
            opened: true ,
            selected: true ,
        }
    },
    {
        id: "root2" ,
        text: "根节点2" ,
        parent: "#" ,
        state:
        {
            opened: true ,
            selected: true ,
        }
    },
    {
        id: "root2_sub1" ,
        text: "子节点1" ,
        parent: "root2" ,
        state:
        {
            opened: true ,
            selected: true ,
        }
    },
    {
        id: "root2_sub2" ,
        text: "子节点2" ,
        parent: "root2" ,
        state:
        {
            opened: true ,
            selected: true ,
        }
    }
];
//初始化树
$( function ()
{
    $( "#treebox" ).jstree(
    {
        core:
        {
            data: arr,
            check_callback: true , //是否允许动态增加删除节点
            expand_selected_onload: true , //加载完成后是否展开所有选中的节点
            themes:
            {
                dots: true , //是否显示连接线
                icons: true , //是否显示图标
            }
        },
        plugins: [
             "checkbox"
        ],
        checkbox:
        {
            keep_selected_style: true , //是否默认选中
            three_state: true , //是否父子级别级联
            tie_selection: true , //复选框是否与树的选择绑定
            whole_node: true //复选框是否与节点关联
        }
    }
    );
}
);
var allLayers = [];
map.layers.forEach( function (item)
{
    allLayers.push(item.id);
}
);
//绑定事件
$( "#treebox" ).on( "changed.jstree" , function (event, data)
{
    console.log(data);
     //获取所有选中的节点，这些节点对应的图层要显示
     var needShowLayer = $( "#treebox" ).jstree().get_checked();
    needShowLayer.forEach( function (item)
    {
         //TODO:展示
    }
    );
     //找到所有要隐藏的图层
    allLayers.forEach( function (item)
    {
         if (needShowLayer.indexOf(item) == - 1 )
        {
             //TODO:隐藏
        }
    }
    );
}
);

结语：如果复选框不能出现，要看console里面有没有资源的报错说明，jstree的资源文件主要是两个，一个是雪碧图32px.png和一个loading的gif图标throbber.gif,所以这里面的复选框不是真正的复选框，而是一个图片。

最后，我们来看下32px.png长啥样：