如何通过数组手动检查 treeView 复选框？

Question

在下面的代码中，无法将复选框设置为已选中。我想设置某些复选框 checked=true。有什么方法可以解决 kendo-mvvm 中的问题，其中数据绑定将在 html 部分完成？

预期输出是

[ ]General
   [X]Name
   [ ]Device
   [X]Status

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      $("#treeview").kendoTreeView({
        dataSource: {
          data:  [{
        id: 7,
        parent_id: 0,
        text: "Work Order assignment",
        value: "Work Order assignment",
        expanded: true,
        items: [
            { id: 71, parent_id: 7, text: "Name", value: "woName" },
            { id: 72, parent_id: 7, text: "Device", value: "woDevice" },
            { id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
    }]
        },
        checkboxes: true
      });
      
      var values = ["woName","woStatus"];
      
      var setTreeViewValues = function(values) {
        var tv = $("#treeview").data("kendoTreeView");
        
        tv.dataItems().forEach(function(dataItem) {
          if (values.indexOf(dataItem.text) > -1) {
            dataItem.set("checked", true);
          }
        });
      };
      
      setTreeViewValues(values);
    });
  </script>
</head>
<body>
  <div id="treeview"></div>
</body>
</html>

Answer 1

$("#treeview").data("kendoTreeView").dataItems() 此方法 而不是 return 树中的所有项目。它 return 是第一级项目。因此，如果您想检查子节点，您可能需要递归地遍历节点。

indexOf(string) 函数不适用于 javascript 数组。您需要在循环中获取值。 http://www.w3schools.com/jsref/jsref_indexof.asp

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  <script>
     $(function() {
      $("#treeview").kendoTreeView({
        dataSource: {
          data:  [{
          id: 7,
          parent_id: 0,
          text: "Work Order assignment",
          value: "Work Order assignment",
          expanded: true,
          items: [
              { id: 71, parent_id: 7, text: "Name", value: "woName" },
              { id: 72, parent_id: 7, text: "Device", value: "woDevice" },
              { id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
        }]
        },
        checkboxes: true
      });
      
      var dataItems = $("#treeview").data("kendoTreeView").dataItems();
      
      setTreeViewValues(dataItems);
    });
    
    var values = ["woName","woStatus"];
    
    function setTreeViewValues(dataItems){
            dataItems.forEach(function(dataItem){
                values.forEach(function(value){
                    if (value.indexOf(dataItem.text) > -1) {
                        dataItem.set("checked", true);
                    }
                    if(dataItem.hasChildren){
                        // checking child dataItems recursively
                        setTreeViewValues(dataItem.children.data()); 
                    }
                });
            });
        }
    
  </script>
</head>
<body>
  <div id="treeview"></div>
</body>
</html>

如何通过数组手动检查 treeView 复选框？

How to manually check treeView checbox through an array?

javascript

checkbox

kendo-ui

kendo-treeview

kendo-template