jQuery树组件-jstree使用

前言

jstree是一个比较好用的，可定制化支持较好的一个jQuery树组件，最近项目里用到了它，但是发现网上的文档以及使用方式并不适合当前项目的实际开发，又或者是英文看起来比较复杂，因此对这次使用做出相关记录，以备不时之需。

相关文档
官网地址
github 地址

实例代码

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
/**
 * 构建课程结构树
 */
var jsTreeComponent = {
    init: function () {
        /*发起ajax请求*/
        $.getJSON('/你后台获取树结构的api'), function (data) {
            /*这一块的逻辑根据自己的需求进行处理*/
            if (data.success != true) {
                $jsTree.html('加载失败');
                return;
            } else if (data.data.structureList.length == 0) {
                $jsTree.html('暂无数据');
                return;
            }
            var structList = data.data.structureList;

            /*以下是jstree所需对象的特定格式（如果是异步请求，那么是另外一种格式，这里就不多介绍了）*/
            var jsTreeBean = {
                id: "string", // 必要的参数
                parent: "string", // 必要的参数
                text: "string", // 节点名称
                icon: "glyphicon glyphicon-tag", // 图标，可使用自定义样式
                state: {
                    opened: true,  // 配置是否打开
                    disabled: false,  // 配置是否不可选中
                    selected: false  // 配置是否选中
                },
                li_attr: {},  // attributes for the generated LI node
                a_attr: {}  // attributes for the generated A node
            };
            var jsTreeBeanList = [];

            /*根据后台返回来构建jsTreeBean对象，且填充到jsTreeBeanList数组*/
            for (var i = 0; i < structList.length; i++) {
                var current = structList[i];
                var newObj = Object.assign({}, jsTreeBean);

                newObj.id = current.id;
                newObj.text = current.name;
                newObj.cusLevel = current.level;    //自定义的层级，0是章，1是节
                if (current.level == 0) {
                    newObj.icon = 'glyphicon glyphicon-bookmark';
                    newObj.parent = '#';
                } else {
                    newObj.parent = current.parentId;
                }

                jsTreeBeanList.push(newObj);
            }

            /*核型配置类，用于使用构建好的数组生成树*/
            $jsTree.jstree({
                'core': {
                    'check_callback': true,
                    'data': jsTreeBeanList
                }
            });
        });
    },

    /*事件对象*/
    eventListener: function () {
        /*监听'改选'这个事件，其他事件的监听参考官方文档*/
        $jsTree.on("changed.jstree", function (e, data) {
            /*如果点击的cusLevel是1（节），则获取学习资源*/
            if (data.node.original.cusLevel == 1) {
                service.loadLearnResources(data.node.id)
            }
        });
    }
};