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

s4n0splo  于 2022-11-22  发布在  jQuery
关注(0)|答案(3)|浏览(211)

我使用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状态?

7kqas0il

7kqas0il1#

我遇到了同样的问题,我找到的解决方案是这样的:

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

希望对你有帮助!

kcrjzv8t

kcrjzv8t2#

也许这段时间改变了。
但现在(版本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

dwthyt8l

dwthyt8l3#

谢谢你们,我发现了一个额外的技巧,它可以让生活变得更好,但是它需要在jstree.js中进行代码更改。看起来像是一个疏忽:
查看get_undetermined函数,并搜索关键字 break。该 break 应该是continue
如果你做了一个改变,那么你所需要做的就是提供状态(主对象及其子对象),jstree将自动处理向上级联的未确定状态。它很早就从脚本中退出,无法正确地捕获所有未确定的节点,需要上面丑陋的变通方法来进行样式等。
下面是我使用 AJAX 的配置(不需要特殊的属性或complete()函数):

var tree = $('#jstree').jstree({
    "core": {
        "themes": {
            "variant": "large"
        },
        'data': {
            'url': function (node) {
                return "{{API}}/" + node.id + "?product_id={{Product.ID}}"
            },
            'dataType': 'json',
            'type': 'GET',
            'success': function (data) {
                if (data.length == 0) {
                    data = rootStub
                }
                return {
                    'id': data.id,
                    'text': data.text,
                    'children': data.children,
                    'state': data.state,
                }
            }
        }
    },
    "checkbox": {
        // "keep_selected_style": false,
        "three_state": false,
        "cascade": "undetermined"                        
    },
    "plugins": ["wholerow", "checkbox"],
});

相关问题