前言

jstree是一個(gè)比較好用的，可定制化支持較好的一個(gè)jQuery樹組件，最近項(xiàng)目里用到了它，但是發(fā)現(xiàn)網(wǎng)上的文檔以及使用方式并不適合當(dāng)前項(xiàng)目的實(shí)際開發(fā)顶燕，又或者是英文看起來(lái)比較復(fù)雜，因此對(duì)這次使用做出相關(guān)記錄冈爹，以備不時(shí)之需涌攻。

相關(guān)文檔
官網(wǎng)地址
github 地址

實(shí)例代碼

    /**
     * 構(gòu)建課程結(jié)構(gòu)樹
     */
    var jsTreeComponent = {
        init: function () {
            /*發(fā)起ajax請(qǐng)求*/
            $.getJSON('/你后臺(tái)獲取樹結(jié)構(gòu)的api'), function (data) {
                /*這一塊的邏輯根據(jù)自己的需求進(jìn)行處理*/
                if (data.success != true) {
                    $jsTree.html('加載失敗');
                    return;
                } else if (data.data.structureList.length == 0) {
                    $jsTree.html('暫無(wú)數(shù)據(jù)');
                    return;
                }
                var structList = data.data.structureList;

                /*以下是jstree所需對(duì)象的特定格式（如果是異步請(qǐng)求，那么是另外一種格式频伤，這里就不多介紹了）*/
                var jsTreeBean = {
                    id: "string", // 必要的參數(shù)
                    parent: "string", // 必要的參數(shù)
                    text: "string", // 節(jié)點(diǎn)名稱
                    icon: "glyphicon glyphicon-tag", // 圖標(biāo)恳谎，可使用自定義樣式
                    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 = [];

                /*根據(jù)后臺(tái)返回來(lái)構(gòu)建jsTreeBean對(duì)象，且填充到j(luò)sTreeBeanList數(shù)組*/
                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;    //自定義的層級(jí)憋肖，0是章因痛，1是節(jié)
                    if (current.level == 0) {
                        newObj.icon = 'glyphicon glyphicon-bookmark';
                        newObj.parent = '#';
                    } else {
                        newObj.parent = current.parentId;
                    }

                    jsTreeBeanList.push(newObj);
                }

                /*核型配置類，用于使用構(gòu)建好的數(shù)組生成樹*/
                $jsTree.jstree({
                    'core': {
                        'check_callback': true,
                        'data': jsTreeBeanList
                    }
                });
            });
        },

        /*事件對(duì)象*/
        eventListener: function () {
            /*監(jiān)聽'改選'這個(gè)事件岸更，其他事件的監(jiān)聽參考官方文檔*/
            $jsTree.on("changed.jstree", function (e, data) {
                /*如果點(diǎn)擊的cusLevel是1（節(jié)）婚肆，則獲取學(xué)習(xí)資源*/
                if (data.node.original.cusLevel == 1) {
                    service.loadLearnResources(data.node.id)
                }
            });
        }
    };