带有多个复选框的剑道树视图 - 选择子节点时限制选择父节点

问题描述

HTML

<div id="userTree">
    @Html.Hidden("UserHierarchyIds",Model.UserHierarchyIds)
    @Html.HiddenFor(model => model.UserHierarchyIds)
    <select id="multiselect" hidden="hidden"></select>
    <div class="selectAll" hidden="hidden">
    </div>
    <input id="filterText" type="text" placeholder="Search Users" autocomplete="off" />
    <div id="userTreeview" class="m-l m-r" hidden="hidden"></div>
</div>

脚本

$("#userTreeview").kendoTreeView({
    loadondemand: false,dataSource: myDataSource,expand: onExpand,checkBoxes: {
        checkChildren: true
    },check: onCheck
});

    function onCheck(e) {
    //debugger;
    $('.k-multiselect').removeClass('error');
    var checkednodes = [];
    var treeView = $("#userTreeview").data("kendoTreeView");
    var checkedtreeView = $("#userTreeview").data("kendoTreeView");
    var selectednode = checkedtreeView.dataItem(e.node);
    CheckedChildNodes(treeView.dataSource.view(),selectednode.Id,selectednode.checked);
    getCheckednodes(treeView.dataSource.view(),checkednodes);
    populateMultiSelect(checkednodes);
}
function CheckedChildNodes(allnodes,checkednode,isChecked) {
    //debugger;
    var node;
    for (var i = 0; i < allnodes.length; i++) {
        if (allnodes[i].Id == checkednode) {
            allnodes[i].set("checked",isChecked);
        }
        if (allnodes[i].hasChildren) {
            CheckedChildNodes(allnodes[i].children.view(),isChecked);
        }
    }
}

function getCheckednodes(nodes,checkednodes) {
    var node;
    for (var i = 0; i < nodes.length; i++) {
        node = nodes[i];

        if (node.checked) {
            checkednodes.push({ text: node.text,Id: node.Id });
        }

        if (node.hasChildren) {
            getCheckednodes(node.children.view(),checkednodes);
        }
    }
}
function updatePMTreeview(selectedvalues) {
    var nodes = $("#userTreeview").data("kendoTreeView").dataSource.view();
    if (selectedvalues != null && selectedvalues != undefined) {
        checkUncheckPMAllNodes(nodes,selectedvalues);
    }
}
function checkUncheckPMAllNodes(nodes,selectedvalues) {
    //debugger;
    $("#userTreeview .k-checkBox-wrapper input").prop("checked",false).trigger("change");

    for (var i = 0; i < nodes.length; i++) {

        if (jQuery.inArray(nodes[i].Id,selectedvalues) !== -1) {
            nodes[i].set("checked",true);
        }
    }
    var checkednodes = [];
    var treeView = $("#userTreeview").data("kendoTreeView");
     getCheckednodes(treeView.dataSource.view(),checkednodes);
     populateMultiSelect(checkednodes);

}
function populateMultiSelect(checkednodes) {
    debugger;
    $('#UserHierarchyIds').val('');
    var multiSelect = $("#multiselect").data("kendoMultiSelect");
    multiSelect.dataSource.data([]);
    Userids = '';
    var multiData = multiSelect.dataSource.data();
    if (checkednodes.length > 0) {
        var array = multiSelect.value().slice();
        var split_str = [];
        for (var i = 0; i < checkednodes.length; i++) {
            multiData.push({ text: checkednodes[i].text,Id: checkednodes[i].Id });
            array.push(checkednodes[i].Id.toString());

            if (split_str.indexOf(checkednodes[i].Id.toString()) === -1) {
                Userids = Userids + checkednodes[i].Id + ',';
            }
            split_str = Userids.split(",");
        }
        if (Userids.length > 0)
            $('#UserHierarchyIds').val(Userids.slice(0,-1));
        else
            $('#UserHierarchyIds').val('');
        $('.k-multiselect-wrap k-floatwrap').hide();
    }
    else {
        $('#UserHierarchyIds').val('');
    }
}

我们在项目中使用了剑道树视图，我们的要求是：

1. 当点击父节点时，不应选择子节点 - 我们实现了。
2. 当父节点有多个子节点时，如果选择了一个子节点，则不应选择父节点 - 我们实现了这一点。
3. 当父节点有 1 个子节点时，如果选择了该子节点，则父节点不应选择 - 这是我们无法实现的

示例场景：

点击 Paul 时也需要点击子节点 Aamer，但是点击 Aamer 时只能选择 Aamer 而不是 Paul。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）