jsTree 使用笔记

ajax 初始化 JsTree 

var $element = $('#Tree');

$element.jstree({
"core" : {
"themes" : {
"responsive": false
},
"check_callback" : true,
'data' : {
'url' : function (node) {

return 'data.json'; //填写自己的Url

},
'cache' : false,
'dataType' : 'json',
'data' : function (node) {
return {
'id' : node.id == "#" ? "" : node.id  //append展开时回调参数
};
}
}
},

"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"folder" : {
"icon" : "fa fa-folder icon-state-success jstree-themeicon-custom"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
},

"state" : { "key" : "demo3" },
"plugins" : [ "checkbox", "dnd", "state", "types" ]
});

jsTree 获取节点方法

//未采用checkbox

$element.jstree().get_selected(true); //获取选中节点

$element.jstree().get_top_selected(true);//获取被选中节点的父级

$element.jstree().get_bottom_selected(true);//获取被选中叶节点

//采用checkbox

$element.jstree().get_checked(true); // 获取所有选中节点。

$element.jstree().get_top_checked(true);//获取所有被选中的父级节点

$element.jstree().get_bottom_checked(true);//获取所有被选中的叶节点

$element.jstree().check_all();//选中所有节点

$element.jstree().uncheck_all();//取消所有节点

jstree 其余方法

$element.jstree().refresh();//刷新树

//在重新加载树前 ，需先清空数据

$element.data('jstree', false).empty();//数据清空 

$element.jstree({

//初始化树

}).bind('click.jstree', function(event) {

//点击后触发事件

}).bind('dblclick.jstree',function(){

//双击触发事件

});

jstree json数据格式

{
  id          : "string"
  text        : "string"
  icon        : "string"
  state       : {
    opened    : boolean  // 节点展开 true||false
    disabled  : boolean  // 节点禁用 true||false
    selected  : boolean  // 节点选中 true||false
  },
  children    : []  //子节点 支持 true||false
  li_attr     : {}  // LI node
  a_attr      : {}  //  A node
}