将jsTree节点设置为"未确定"状态

Question

我正在使用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状态？

Answer 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');
                });
            }
        }
    }
});

希望对您有帮助！