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

【问题标题】：Kendo Treeview checkbox checked together with selected node与选定节点一起选中的 Kendo Treeview 复选框
【发布时间】：2020-04-09 02:36:40
【问题描述】：

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

Here I provide a simple demo

【问题讨论】：

您只想检查节点中的一项？如果选择父项，应该检查哪个子项？
对不起，我没想到会这样。我根据我的情况正确编辑了演示，没有父母和孩子。

标签： javascript kendo-ui kendo-grid kendo-treeview

【解决方案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);
});

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

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

希望对你有帮助。

【讨论】：

感谢您的回答。你介意帮我解决我的另一个问题here。非常感谢您的帮助。