配列を使ってtreeView checboxを手動でチェックする方法は？

以下のコードでは、チェックボックスをオンに設定することができません。私は特定のチェックボックス=チェックをオンにしたいと思います。 kendo-mvvmの問題を解決する方法はありますか？htmlの部分でdatabindが実行されますか？配列を使ってtreeView checboxを手動でチェックする方法は？

期待される出力は、この方法は、ツリー内のすべての項目ないリターンを行い

[ ]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>

出典

2016-10-19 Austin Hoh

$("#treeview").data("kendoTreeView").dataItems()です。第1レベルの項目を返します。したがって、子ノードをチェックしたい場合は、ノードを再帰的に移動することができます。

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>

出典

2016-10-19 11:56:25 FuatOgme

配列を使ってtreeView checboxを手動でチェックする方法は？

答えて

関連する問題