树形菜单----jsTree基本使用方法

树形菜单—-jsTree基本使用方法

官网：https://www.jstree.com/

创建和刷新

1. 远程数据

var id =111111;
$("#tree").jstree({
    "plugins" : [ "wholerow", "checkbox" ],
    "core" : {
        "data":{
            "url":url,
            'data' : function (node) {
                return { 'id' : id };
            }
        },
        "themes":{
            "icons":false
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    }
}); 

带多选框的树，如果不需要多选框，去掉checkbox就行

2. 数据刷新

$("#tree").jstree("refresh"); 

3. 静态数据

$("#tree").jstree({
    "plugins" : [ "wholerow", "checkbox" ],
    "core" : {
        "data":[
            'Simple root node',
            {
                'id' : 'node_2',
                'text' : 'Root node with options',
                'state' : { 'opened' : true, 'selected' : true },
                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
            }
        ],
        "themes":{
            "icons":false
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    }
}); 

静态数据刷新先$("#tree").jstree("destroy");然后再新建一个。

4. 远程数据预处理
如果远程数据并不正好是树要的格式，原本我是通过ajax先获取，然后处理好数据用静态刷新的方法做的，后来发现可以用dataFilter属性，虽然官方文档上没写，但亲测有效。

var id =111111;
$("#tree").jstree({
    "plugins" : [ "wholerow", "checkbox" ],
    "core" : {
        "data":{
            "url":url,
            'data' : function (node) {
                return { 'id' : id };
            },
            dataFilter:function(data){
                var json = JSON.parse(data)
                return JSON.stringify(json.treeData);
            }
        },
        "themes":{
            "icons":false
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    }
}); 

操作

1. 获取选中项

$("#tree").jstree("get_checked");

2. 获取未确定项

$("#tree").jstree("get_undetermined");

3. 展开所有节点

$("#tree").jstree("open_all");

事件

1. 加载完成事件

$("#tree").on("loaded.jstree", function (event, data) {
    //操作
});