如何通过阵列手动检查树视图复选框

How to manually check treeView checbox through an array?

本文关键字：视图 复选框 检查 何通过 阵列      更新时间：2023-09-26

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

$("#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>

相关文章：