Kendo Treeview 复选框与选定节点一起选中

Question

我设法让复选框只能被选中 1 次，但我需要帮助来找到解决方案，如果选中复选框，节点也会被选中 k-state-selected。感谢您的帮助！

Answer 1

看看这个：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/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/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
  
    <div id="treeview"></div>
    <script>
        $("#treeview").kendoTreeView({
            checkboxes: true,
            check: function(e){
              var dataItem = this.dataItem(e.node);
              var rootNodes = $("#treeview").getKendoTreeView().dataSource.data();
              traverse(rootNodes, function(node) {
                if (node != dataItem) {
                  node.set("checked", false);
                  //node.select($());
                  //node.select().find("span.k-state-selected")
                }
              });
            },
           select: function(e) {
              var dataItem = this.dataItem(e.node);
              dataItem.checked = true;
              $(e.node).find('input').prop('checked', 'checked');
              this.trigger('check', e);
            },
          dataSource: [ { id: 3, text: "about.html" },
                       { id: 4, text: "index.html"},
                       { id: 5, text: "logo.png"},                        
                       { id: 7, text: "mockup.jpg" },
                       { id: 8, text: "Research.pdf"},
                       { id: 10, text: "February.pdf" },
                       { id: 11, text: "March.pdf" },
                       { id: 12, text: "April.pdf" }]
        });
      
        function traverse(nodes, callback) {
          for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            var children = node.hasChildren && node.children.data();
            callback(node);
            if (children) {
              traverse(children, callback);
            }
          }
        }
      
       $("#treeview").on('change', 'input', function() {
          let $li = $(this).closest('li');
          $("#treeview").data('kendoTreeView').select($li);
        });
    </script>
</body>
</html>

我添加了以下代码：

// To the grid options
select: function(e) {
    var dataItem = this.dataItem(e.node);
    dataItem.checked = true;
    $(e.node).find('input').prop('checked', 'checked');
    this.trigger('check', e);
},

// After grid initialization
$("#treeview").on('change', 'input', function() {
    let $li = $(this).closest('li');
    $("#treeview").data('kendoTreeView').select($li);
});

第一个代码段确保通过单击项目的标签来选择项目，复选框也会被选中。该事件还调用 check 事件来取消选中其他项目。

最后一个确保更改的复选框将触发 select 事件，与上面的操作相同。

希望对您有所帮助。

Kendo Treeview 复选框与选定节点一起选中

Kendo Treeview checkbox checked together with selected node

javascript

kendo-ui

kendo-grid

kendo-treeview