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

看一下这个：

<!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);
});

第一个片段确保通过单击它的标签来选择一个项目，复选框也将被选中。该事件还调用checkevent 以取消选中其他项目。

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

我希望它有所帮助。

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

问题描述

解决方案

推荐阅读