Question

在下面的代码中，无法将复选框设置为选中。我想设置某个复选框checked = true。有没有办法解决kendo-mvvm中的数据绑定将在html部分完成的问题？

预期产出

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

＆＃13;

<!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>

＆＃13;

Answer 1

indexOf(string)此方法不返回树中的所有项目。它返回第一级项目。因此，如果要检查子节点，可能需要递归地传播节点。

<!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>函数不适用于javascript数组。你需要循环获取值。 http://www.w3schools.com/jsref/jsref_indexof.asp

＆＃13;

.gitconfig

＆＃13;

如何通过数组手动检查treeView checbox？

1 个答案: