jstree上手文檔 [初始化時默認選中、全部展開、獲取實例的數據等問題]

jstree官網:https://www.jstree.com/

-------------------

實例化tree .jstree() 

默認樣式:

var container = $('#xxx');      //container:tree的目標容器(jqery對象)
container.jstree({              
    'plugins': ["state"],       
    'state': {                  //一些初始化狀態
        "opened":true,
    },
    'core' : {
        'data' :_treeData,      //tree的數據
    }
});

多選框樣式:

container.jstree({
    core: {
        animation: false,
        'data':_data
    },
    // 這兩個必須要
    checkbox: {
        tie_selection: false,
        whole_node: false
    },
    plugins: ["checkbox", "wholerow"]
});

多選框初始化時默認選中:


_data.state =  {"checked":true}; 
//選中根節點,如需選中其他節點需遍歷_data的所有節點並給他們加上此屬性

右鍵菜單:

'plugins': ['contextmenu'],  //有這個就行
'core' : {
    'data' :_treeData,
    "check_callback" : true
},
//···
"contextmenu":{
    select_node:false,
    show_at_node:true,
    items:{
        "修改名稱":{
            "separator_before"	: false,
            "separator_after"	: false,
            "_disabled"			: false,  //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
            "label"				: "修改名稱",
            "shortcut_label"	: 'F2',
            "icon"				: "glyphicon glyphicon-leaf",
            "action"			: function (data) {
                var inst = $.jstree.reference(data.reference),
                    obj = inst.get_node(data.reference);
                inst.edit(obj);
            }
        },
        "刪除XX":{
            "separator_before"	: false,
            "icon"				: false,
            "separator_after"	: false,
            "_disabled"			: false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
            "label"				: "刪除XX",
            "icon"				:"glyphicon glyphicon-remove",
            "action"			: function (data) {
                var inst = $.jstree.reference(data.reference),
                obj = inst.get_node(data.reference);
                if(inst.is_selected(obj)) {
                    inst.delete_node(inst.get_selected());
                }
                else {
                    inst.delete_node(obj);
                }
            }
        },
        //其他菜單···
    }
}
//參考:https://blog.csdn.net/m0_37355951/article/details/77943933
//...

載入後,全部展開:

container.bind("loaded.jstree", function (e, data) {

    _treeContainer.jstree('open_all');

});

查看當前實例的數據

$("xxx").jstree()._model.data;

---------------------

額,好像這不是文檔,全是案例了。。。 話說,這樣好懂點|||

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章