jsTree 回显时checkbox级联问题

最新推荐文章于 2023-07-28 10:04:50 发布

原创最新推荐文章于 2023-07-28 10:04:50 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jstree #html

HTML 同时被 2 个专栏收录

1 篇文章

订阅专栏

jsTree

1 篇文章

订阅专栏

在使用jsTree进行数据回显时，若启用three_state为true，父节点选中会导致所有子节点自动选中。当需要避免这种级联行为，可以暂时禁用cascade选项，在设置完成后恢复。例如，通过设置setTimeout在500毫秒后恢复级联关系，以确保正确显示回显状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文章 : https://blog.youkuaiyun.com/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毫秒之后，因为我在测试的时候发现如果没有延时，这个清空就不会起效果。