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

【问题标题】：How to manually check treeView checbox through an array?如何通过数组手动检查treeView复选框？
【发布时间】：2016-10-19 01:29:28
【问题描述】：

在下面的代码中，无法将复选框设置为选中。我想设置某些复选框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>

【问题讨论】：

标签： javascript checkbox kendo-ui kendo-treeview kendo-template

【解决方案1】：

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

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>

【讨论】：