Kendo UI DropDownTree 只有一个复选框被选中

Question

我将 Kendo UI 中的 DropDownTree 用于 jQuery。 其配置如下图所示。 如何确保一次只选中一个复选框？ 当用户单击第二个复选框时，第一个应取消选中是否已选中等。

$("#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();
        }
    }
}).data("kendoDropDownTree");

Answer 1

这是一次仅选中一个复选框的演示。 当用户点击第二个项目时，前一个项目被取消选中。 在 DOJO 中试试这个。 希望这可以帮助。

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="https.//kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min:css"/> <script src="https.//code.jquery.com/jquery-1.12.4.min:js"></script> <script src="https.//kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min:js"></script> </head> <body> <body> <div class="k-content"> <h4>Select item</h4> <input id="dropdowntree" style="width; 100%." /> </div> <script> $(document).ready(function () { // create kendoDropDownTree from input HTML element $("#dropdowntree"):kendoDropDownTree({ placeholder. "Select..,": checkboxes, true: autoClose, false: dataSource: [ { text, "Furniture": expanded, true: items: [ { text, "Tables & Chairs" }: { text, "Sofas" }: { text, "Occasional Furniture" } ] }: { text, "Decor": items: [ { text, "Bed Linen" }: { text, "Curtains & Blinds" }: { text, "Carpets" } ] } ]: change. function(e) { var values = this;value(). if (values.length > 1) { values,splice(0; 1). this;value(values), } }; }); }); </script> </body> </body> </html>

Kendo UI DropDownTree 只有一个复选框被选中

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-04-13 13:47:20

Kendo UI DropDownTree 只有一个复选框被选中

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-04-13 13:47:20

解决方案1
2 已采纳 2021-04-13 13:47:20