$(document).ready(function() {
$("#jstree_demo_div").jstree({
'core' : {
"data":[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"示例档案树"},{"id":"69","parent":"0","text":"预备档案树"},{"id":"5","parent":"0","text":"档案门类树"},{"id":"71","parent":"69","text":"文书档案"},{"id":"1","parent":"5","text":"文书档案"},{"id":"11","parent":"5","text":"音像档案"}],
//ajax获取树节点
/** 'data' : {
'url' : '<%=request.getContextPath() %>/JJDaAction?method=querydmtree', //请求地址
'dataType' : 'json',
'data' : function(node) {
return {
id : node.id == "#" ? "-1" : node.id
};
},
success : function(test) {
//console.log(test);
},
} **/
},
/*plugins:表示你使用那些插件*/
"plugins" : [ "contextmenu"],
/*contextmenu:就是右键菜单插件,items就是自定义右键菜单选项,label是右键菜单选项的名称。icon就是选项前面的图标,action点击选项触发事件*/
"contextmenu" : {
"items" : {
"create" : {
"label" : "新增节点",
"action" : function(obj) {
alert(jQuery.jstree.reference(obj.reference).get_node(obj.reference).id);
},
},
"rename" : {
"label" : "重命名",
"action" : function(obj) {
alert(jQuery.jstree.reference(obj.reference).get_node(obj.reference).id);
}
},
"delete" : {
"label" : "删除节点",
"action" : function(obj) {
alert(jQuery.jstree.reference(obj.reference).get_node(obj.reference).id);
},
}
}
}
})
});
ajax需要给数据增加自定义属性时,把自定义属性放到a_attr中:
[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"工程项目树"}, {"id":"1","parent":"0","text":"工程1","a_attr":{"type":"g","code":"1"}}, {"id":"2","parent":"0","text":"工程2","a_attr":{"type":"g","code":"2"}}, {"id":"3","parent":"1","text":"项目1","a_attr":{"type":"x","code":"1"}}, {"id":"4","parent":"2","text":"项目2","a_attr":{"type":"x","code":"2"}}, {"id":"19","parent":"1","text":"项目2","a_attr":{"type":"x","code":"1.2"}}]
jstree获取自定义属性时:
jQuery.jstree.reference(obj.reference).get_node(obj.reference).a_attr.type//获取type
js获取节点属性时:
var treeNode = $('#jstree_demo_div').jstree(true).get_selected(true);
//console.log(treeNode[0].a_attr.code);
returnValue=treeNode[0].a_attr.code;//获取节点code
js重加载节点需先清除节点:
$('#tree').jstree(true).destroy();// 清除树节点
给节点绑定事件:
$('#tree').bind("activate_node.jstree", function (obj, e) {
// 获取当前节点
var currentNode = e.node;
})
取消选中节点:
$("#tree").jstree("deselect_all",true);
选中指定节点:
$('#tree').jstree('select_node',nodeid,true);//选中节点
打开节点:
$("#tree").on("ready.jstree", function (e, data) {
data.instance.open_all();//打开所有节点
data.instance.open_node(nodeid);//打开指定节点
});
回显选中节点
.on('loaded.jstree', function(e, data){
if(''!=x&&null!=x){
if('dept'==x.split(",")[0]){
var inst = data.instance;
var xx=x.replace(x.split(",")[0]+",","").split(",");
for(var i=0;i<xx.length;i++){
var obj = inst.get_node(xx[i].split("$")[0]);
inst.select_node(obj);
}
}
}
});