jstree ajax php,jsTree AJAX异步加载，重载，刷新

折腾了一段时间，网上查了不少资料，总算实现了我要的效果

jstree 版本：3.0.4

html代码如下：

Script 脚本代码：

jQuery(function ($) {

function InitTree() {

var url = "xxxx?"+ "&_=" + Math.random();

$('#tree').jstree({

'core': {

"multiple": true,

"animation": 0,

'data': {

url: url,

dataFilter: function (data) {

return JSON.parse(data);

}

},

"themes": {

"icons": true/*图标显示开关*/

}

,"dblclick_toggle": false,

"worker": false

}

,"types": {

"default": {

"icon": "fa fa-user"/*默认图标，也可以后台传icon属性放入map中，亲测有效*/

}

}

,'plugins': ['types', 'checkbox', 'state']

,"checkbox": {

"tie_selection": true,

"keep_selected_style": false,

}

}).on('select_node.jstree', function (e, data) {

debugger/*选中之后触发*/

}).on('deselect_node.jstree', function (e, data) {

debugger/*取消选中触发*/

}).on("loaded.jstree", function (event, data) {

/*这两句化是在loaded所有的树节点后，然后做的选中操作，这点是需要注意的，

loaded.jstree 这个函数取消选中，然后选中某一个节点*/

$('#tree').jstree().open_all();/*打开树，不打开下面的选中语句执行有问题*/

//var TempIds = $("#ids").val();

//var TempIdsArr = TempIds.split(",");

data.instance.clear_state();/*此句用来清除之前选中的数据不可以去掉*/

//$.each(TempIdsArr, function (index, value) {

//    var id = value + '_anchor';

//    $('#tree').jstree('select_node', id, true, true);/*选中id对应的节点*/

//});

}).on("load_node.jstree", function (event, data) {

debugger/*加载node时候触发*/

});

}

InitTree();

$(document).on("change", 'select#txtCustomer', function () {

$('#tree').jstree(true).destroy();// 清除树节点

InitTree();

//$('#tree').jstree(true).refresh();//true：表示获得一个已经存在的jstree实例

});

});

后台返回的Tree的数据JSON格式，示例数据：

[{

"id": "4dce003b-1e47-4dd9-bb23-990359b01f00",

"text": "基础节点1",

"state": {"opened": true },

"children": [{

"id": "2f7938be-23a4-487f-ab27-a04afd40da4f",

"text": "二级节点1_1",

"children": [{

"id": "9f7e1751-9e05-4f53-a5dd-2c241889a2bd",

"text": "三级节点1_1_1",

"state": {

"selected": false,

"opened": true

}

},

{

"id": "f99881a0-d092-4a05-85c9-f89b0d7ff562",

"text": "三级节点1_2_2",

"state": {

"selected": false

}

}

]

}]

},

{

"id": "f3782cb4-a23f-481a-9466-a3aab7e77afb",

"text": "基础节点2",

"state": {

"opened": true

},

"children": [{

"id": "0484cf6f-8eca-4aa6-bb2a-0ef030e62f9b",

"text": "二级节点2_1",

"state": {

"opened": true

},

"children": [{

"id": "33d7603a-a881-44b6-9516-61c7d70f66a4",

"text": "三级节点2_1_1",

"state": {

"selected": false

}

},

{

"id": "1e87075b-1102-4456-8492-f4a061fec01d",

"text": "三级节点2_1_2",

"state": {

"selected": false

}

},

{

"id": "440c54b4-bd49-4337-90c9-7e52818a2b62",

"text": "三级节点2_1_3",

"state": {

"selected": false

}

}

]

},

{

"id": "b7f683f7-0940-4a3f-a051-f3e1e0da16d5",

"text": "二级节点2_2",

"state": {

"opened": true

},

"children": [{

"id": "19931955-4450-491b-9814-45a3f4159482",

"text": "三级节点2_2_1",

"state": {

"selected": false

}

},

{

"id": "40cb83c4-81d4-403f-bd75-61c92ebd3a8e",

"text": "三级节点2_2_2",

"state": {

"selected": false

}

}

]

}

]

},

{

"id": "83aa2b5b-5126-4658-878d-1faec1bf5b30",

"text": "基础节点3",

"state": {

"opened": true

},

"children": [{

"id": "69f5a26d-053f-427b-b75c-1e6e0e033c9e",

"text": "二级节点3_1",

"state": {

"opened": true

},

"children": [{

"id": "b15ee80c-8632-4505-9a02-dc369e6bae76",

"text": "三级节点3_1_1",

"state": {

"selected": false

}

},

{

"id": "2cbd4ddf-2ad4-4cdb-878f-cf21abeab7f3",

"text": "三级节点3_1_2",

"state": {

"selected": false

}

},

{

"id": "81344b72-3c0d-46a2-b5ce-1978ef05334c",

"text": "三级节点3_1_3",

"state": {

"selected": false

}

}

]

}]

}

]

参考文章

1、https://blog.csdn.net/yipanbo/article/details/51495830

2、https://www.cnblogs.com/huiy/p/12017207.html