如何实现Kendo UI for jQuery DropDownTree复选框单选功能

我来帮你搞定这个需求——要让DropDownTree同一时间只能选中一个复选框，核心思路就是监听复选框的点击事件，每次选中新节点时自动取消之前所有已选中的节点。下面是修改后的完整实现代码：

$("#dropdowntree").kendoDropDownTree({
    dataSource: new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: service.getData(),
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "Id",
                children: "Items"
            },
            parse: function (response) {
                if (typeof response !== "undefined" && typeof _id !== "undefined" && _id > 0) {
                    for (const item of response) {
                        const res = findItem(item, _id);
                        if (typeof res !== "undefined") {
                            res.checked = true;
                            break;
                        }
                    }
                }
                return response;
            }
        }
    }),
    checkboxes: {
        checkChildren: true
    },
    valueTemplate: '#: Name #',
    autoWidth: true,
    autoClose: false,
    height: 400,
    dataTextField: "Name",
    select: (e) => {
        if (e.sender.dataItem(e.node).Id < 0) {
            e.preventDefault();
        }
    },
    // 新增check事件处理单选逻辑
    check: function(e) {
        const dropDownTree = this;
        const currentNode = e.node;
        const currentDataItem = dropDownTree.dataItem(currentNode);

        // 只有当当前节点被选中时，才执行取消其他节点的逻辑
        if (currentDataItem.checked) {
            // 获取所有已选中的节点
            const checkedNodes = dropDownTree.checkedNodes();
            
            // 遍历已选中节点，取消除当前节点外的其他选中状态
            checkedNodes.forEach(node => {
                if (node !== currentNode) {
                    dropDownTree.check(node, false);
                }
            });
        }
    }
}).data("kendoDropDownTree");

关键逻辑说明： #

1. 监听check事件：用户点击复选框时会触发这个事件，我们在这里实现单选的核心逻辑。
2. 判断当前节点状态：只有当用户是选中当前节点时，才需要取消其他节点的选中（如果是取消当前节点的选中，不需要额外操作）。
3. 批量取消其他选中：通过checkedNodes()获取所有已选中的节点，遍历后将除当前节点外的所有节点设为未选中状态。

另外补充两个细节：

• 你设置了checkChildren: true，当选中父节点时会自动选中所有子节点，此时执行单选逻辑会同步取消其他父节点及其子节点的选中状态，完全符合预期。
• 如果需要强制保持至少一个节点选中（禁止用户取消最后一个选中的节点），可以在check事件中判断：如果当前节点是取消选中且checkedNodes()长度为1时，调用e.preventDefault()阻止取消操作，这个可以根据你的实际需求调整。

内容的提问来源于stack exchange，提问作者egeo