json返回参数格式：推荐第二种方式 不需要在重新拼接返回格式
不刷新页面重新初始化 jstree时使用：$.jstree.destroy() 注销已初始化的数据
虚线设置：在 plugins中添加wholerow。如： plugins: ["wholerow","contextmenu"] contextmenu是快捷菜单配置
1、拼接子节点格式
// Expected format of the node (there are no required fields)
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
2、根据父节点组装，注：parent是父级节点，初始节点为 " # "
// Alternative format of the node (id & parent are required)
{
id : "string" // required
parent : "string" // required
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
html
<div id="treeDiv" > </div>
初始化js
$('#treeDiv').jstree({
'core': {
'data': data//返回的数据
},
});
添加右键点击自定义菜单
$('#treeDiv').jstree({
'core': {
'data': data
},
plugins: ["contextmenu"],
"contextmenu": {
"items": {
"create": null,
"rename": null,
"remove": null,
"ccp": null,
"add": {
"label": "add",
"action": function (obj) {
alert("add operation--clickedNode's id is:" + obj);
}
},
"delete": {
"label": "delete",
"action": function (obj) {
alert("add operation--clickedNode's id is:" + obj);
}
}
}
}
});
虚线设置：在 plugins中添加wholerow。如： plugins: ["wholerow","contextmenu"] contextmenu是快捷菜单配置
拖动效果
$("#treeDiv").jstree({
"core": {
"check_callback": true,
"data":data
},
"plugins": ["dnd"]
});
拖动返回事件
$("#treeDiv").on('move_node.jstree', function (e, data) {
$.post("modulemng/dndmodule", {
id: data.node.id,
parent: data.parent,
position: data.position
}, function (data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
});
初始化完成后展开所有节点
$("#treeDiv").on("ready.jstree", function (e, data) { //树创建完成事件
data.instance.open_all(); //展开所有节点
});
获取当前选择的节点
$("#treeDiv").on('changed.jstree', function (e, data) { //选中节点改变事件
var node = data.instance.get_node(data.selected[0]); //获取选中的节点
});