jQuery树组件 jstree使用

前言

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

相关文档
官网地址
github 地址

实例代码

    /**
     * 构建课程结构树
     */
    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)
                }
            });
        }
    };