javascript - KendoUI - 选择时禁用某些节点

标签 javascript kendo-ui kendo-treeview

我有 2 Kendo Treeview; 1 没有复选框,另一个 1 带有复选框 like example here
假设我想禁用第二个 Treeview 上的某些节点,当我选择第一个 Treeview 上的某个节点时,带有复选框的 Treeview (例如,我想在选择家具时禁用不是家具的节点)。这个过程有点像 example here ,但没有按钮,只是从第一个 Treeview 上选择节点。我如何实现这一目标?

最佳答案

TreeList 有一个名为 select 的事件,它可以为您处理该行为:

select: function(e) { 
    let tv = $("#treeview-right").data("kendoTreeView"), // Gets the 2dn treeview reference
        text = e.sender.dataItem(e.node).text; // Gets the 1st treeview selected text

    // Iterates over the 2nd treeview items
    tv.items().toArray().forEach(item => {
        let dataItem = tv.dataItem(item), // Get the item related dataItem
            disabled = (dataItem.type !== text); // Figures out if the current item is of selected type

        // Gets the current item's checkbox
        $(item).find('input[type="checkbox"]')
            .prop('checked', false) // Uncheck it by default
            .prop('disabled', disabled); // Disable/enable based on above condition
    });
}

Dojo

替代方法:您可以像下面那样过滤第二个 TreeView:
select: function(e) { 
    let tv = $("#treeview-right").data("kendoTreeView"),
        text = e.sender.dataItem(e.node).text;

    tv.dataSource.filter({ field: "type", operator: "eq", value: text });
}

Dojo

关于javascript - KendoUI - 选择时禁用某些节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58513958/

相关文章:

html - 剑道 CSS 图标位置

kendo-ui - Kendo UI Treeview 数据绑定(bind)到 XML : how does it bind to "id"?

angularjs - Kendo.Culture ('de-DE' ) 将网格值乘以 100

javascript - 为什么 serviceworker 会导致每第二个 jquery post 立即停止?

javascript - 无法在 JS 函数之间传递变量

php - JavaScript 小时倒计时错误

javascript - 首先加载剑道 UI 网格

jquery - Kendo-ui 调度程序资源模板

kendo-ui - 无法展开 Kendo TreeView 中的所有节点

用于渲染 HTML 表单元素的 Javascript 库