jsTree 回显时checkbox级联问题

原文章 : https://blog.csdn.net/tj19901125/article/details/84759767

在使用jsTree是,一般为了方便用户勾选会使用 three_state 的默认设置(true)。但是这样会导致一个问题，数据回显的时候如果父节点被选中，那么子节点都会被选中。
例如下面这个数据:

var data = [
	{ "id" : "id1", "parent" : "#", "text" : “我是第一级节点1" ,'state' : {'selected' : true}},
	{ "id" : "id2", "parent" : "#", "text" : "我是第一级节点2" ,'state' : {'selected' : true}},
	{ "id" : "id3", "parent" : "id2", "text" : "我是第二级节点1" ,'state' : {'selected' : false}},
	{ "id" : "id4", "parent" : "id2", "text" : "我是第二级节点2" ,'state' : {'selected' : true}},
];

回显的时候因为id2被选中,哪怕id3没被选中，也会因为id2被选中而选中。
解决方法是可以临时将cascade设置为空,然后设置完勾选之后在恢复设置。

function buildMenuTree() {
    var data = [
        { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" ,'state' : {'selected' : true}},
        { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" ,'state' : {'selected' : true}},
        { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" ,'state' : {'selected' : false}},
        { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" ,'state' : {'selected' : true}},
    ];
    // 构建树 
    $('#menuTree').jstree({
        "plugins": ["wholerow", "checkbox"],
        'core': {
            'data': data 
        },
        "checkbox": {}
    });
    // 获取树
    var menuTrees = $('#menuTree').jstree(true);
    // 清空级联关系
    var oldCascade = menuTrees.settings.checkbox.cascade;
    menuTrees.settings.checkbox.cascade = '';
    // 重置级联关系
    setTimeout(function () {
        menuTrees.settings.checkbox.cascade = oldCascade;
    }, 500);
}

这里我将重置级联关系设置了 500毫秒之后，因为我在测试的时候发现如果没有延时，这个清空就不会起效果。