jstree 學習

最近的項目用到了jstree，由於對官方文檔理解不充分，因此不少功能都是在網站上搜索再進行使用的。（我只是大天然的搬運工）

1. 對每一級的節點，右鍵後出現不一樣的結果。

在jstree中右鍵是由 contextmenu 實現的，因此咱們須要自定義它。在這以前要在 plugins 中添加它。"plugins": ["contextmenu"]。
而後定義個函數

function contextItem(node) {
        let items = {
            'item1': {
                "增長地點": {
                    "label": "增長地點",
                    "action": function (data) {
                        let inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        inst.create_node(obj, {}, "last", function (new_node) {
                                inst.edit(new_node);
                             
                        });
                    }
                }
            },
            'item2': {
                "刪除地點": {
                    "label": "刪除地點",
                    "action": function (data) {
                        let inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        if (confirm("肯定要刪除此菜單？刪除後不可恢復。")) {
                            inst.delete_node(obj);
                        }
                    }
                },
                "修改地點": {
                    "label": "修改地點",
                    "action": function (data) {
                        let inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        inst.edit(obj);
                    }
                }
            },
            'item3': {
                "create": null,
                "rename": null,
                "remove": null,
                "ccp": null
            }
        };
        if (node.type === '1_level') {
            items = items.item1;
        } else if (node.type === '2_level') {
            items = items.item2;
        } else {
            items = items.item1;
        }
        // console.log(node.parent.length);
        return items;
    }

最後只要把定義好的函數引用在contextmenu中就行了。

"contextmenu": {
                "items": contextItem,
            },

2.實現每一個節點懶加載（點到相應的節點纔會發送ajax到後臺，獲取相應數據）。以下圖

在jstree中

core:{
    data:DataLoader
    }

定義了DataLoader函數。

function DataLoader(node, render) {
    if (node.id === '#') { // 對於根節點來講，加載一級的地區目錄
        render(FakeAjaxLoadLevel1())
    } else if (node.data) {  //判斷依據能夠用戶自定義
        switch (node.data.level) {
            case 1:
             render(FakeAjaxLoadLevel2(node.text)); // 對於一級的地區目錄來講，加載相應的市級
                break;
            case 2:
                render(FakeAjaxLoadLevel3(node.text)); // 對於二級的市級來講，加載相應的轄區
                break;
        }
    }
}

每一節點的函數返回jstree中所需的屬性，以第一級爲例

function FakeAjaxLoadLevel1() {
    return [
        {
            text: '華東地區', id: 1, children: true,
            data: {
                level: 1
            }
        },
        {
            text: '華中地區', id: 2, children: true,
            data: {
                level: 1
            }
        }
    ];
}

3.每一層節點使用不一樣的圖標
types標籤

"types": {
            "default": {
                    "icon": "fa fa-globe"
                },
             "2_level": {
                    "icon": "fa fa-home"
                },
            "3_level": {
                    "icon": "fa fa-flag"
                },
            }

只是把本身所遇到的jstree問題進行總結，持續更新ing.