将 jsTree 节点设置为“未确定”状态答案

【问题标题】：Set jsTree Node to "Undetermined" State将 jsTree 节点设置为“未确定”状态
【发布时间】：2013-10-03 14:43:31
【问题描述】：

我正在使用jsTree 显示带有复选框的树。每个级别的节点都使用json_data 插件按需加载。

如果检查了一个节点的后代，则该节点应处于“未确定状态”（如 ACME 和 USA）。

问题是，树开始倒塌了。 ACME 看起来 unchecked 但应该是 undetermined。当我最终扩展到一个选中的节点时，jsTree 意识到祖先应该是undetermined。

所以我需要能够在不加载其子项的情况下将复选框置于undetermined 状态。

使用jsTree，您可以通过将jstree-checked 类添加到<li> 来预先选中一个框。我尝试添加 jstree-undetermined 类，但它不起作用。它只是将它们置于选中状态。

这是我的代码：

$("#tree").jstree({
    plugins: ["json_data", "checkbox"],
    json_data: {
        ajax: {
            url: '/api/group/node',
            success: function (groups) {
                var nodes = [];
                for (var i=0; i<groups.length; i++) {
                    var group = groups[i];

                    var cssClass = "";
                    if(group.isSelected)
                        cssClass = "jstree-checked";
                    else if(group.isDecendantSelected)
                        cssClass = "jstree-undetermined";

                    nodes.push({
                        data: group.name,
                        attr: { 'class': cssClass }
                    });
                }
                return nodes;
            }
        }
    }
})

我的问题

如何将节点设置为undetermined 状态？

【问题讨论】：

标签： javascript jquery ajax jstree

【解决方案1】：

我遇到了同样的问题，我找到的解决方案是这个：

var tree = $("#tree").jstree({
    plugins: ["json_data", "checkbox"],
    json_data: {
        ajax: {
            url: '/api/group/node',
            success: function(groups) {
                var nodes = [];
                for (var i = 0; i < groups.length; i++) {
                    var group = groups[i];
                    var checkedState = "false";
                    if (group.isSelected)
                        checkedState = "true";
                    else if (group.isDecendantSelected)
                        checkedState = "undetermined";
                    nodes.push({
                        data: group.name,
                        attr: { 'checkedNode': checkedState }
                    });
                }
                return nodes;
            },
            complete: function () {
                $('li[checkedNode="undetermined"]', tree).each(function () {
                    $(this).removeClass('jstree-unchecked').removeClass('jstree-checked').addClass('jstree-undetermined');
                });
                $('li[checkedNode="true"]', tree).each(function () {
                    $(this).removeClass('jstree-unchecked').removeClass('jstree-undetermined').addClass('jstree-checked');
                });
                $('li[checkedNode="false"]', tree).each(function () {
                    $(this).removeClass('jstree-checked').removeClass('jstree-undetermined').addClass('jstree-unchecked');
                });
            }
        }
    }
});

希望对你有帮助！

【讨论】：

所以 jstree-undetermined 类必须在成功回调运行后设置 - 即。完成。
是的，我没有找到其他方法。

【解决方案2】：

也许这同时发生了变化……

但现在（3.0.0 版）真正简单的解决方案有效：

{ id : "string" // will be autogenerated if omitted text : "string" // node text icon : "string" // string for custom state : { opened : boolean // is the node open disabled : boolean // is the node disabled selected : boolean // is the node selected undetermined : boolean // is the node undetermined <<==== HERE: JUST SET THIS }, children : [] // array of strings or objects li_attr : {} // attributes for the generated LI node a_attr : {} // attributes for the generated A node }

直接从源代码处学习：https://github.com/vakata/jstree/blob/6507d5d71272bc754eb1d198e4a0317725d771af/src/jstree.checkbox.js#L318

【讨论】：