折腾了一段时间，网上查了不少资料，总算实现了我要的效果
jstree 版本：3.0.4
html代码如下：
<div id="tree" style="margin-top:10px;font-size:13px;margin-left: 130px;"></div>
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
网友评论