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;
---------------------
額,好像這不是文檔,全是案例了。。。 話說,這樣好懂點|||