Wie man checkbox TreeView durch ein Array manuell prüft?

Im folgenden Code konnte das Kontrollkästchen nicht aktiviert werden. Ich möchte ein bestimmtes Kontrollkästchen checked = true setzen. Gibt es eine Möglichkeit, das Problem in Kendo-MVVM zu lösen, wo die Daten im HTML-Teil getan werden?Wie man checkbox TreeView durch ein Array manuell prüft?

erwartete Ausgabe ist

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

Quelle

2016-10-19 Austin Hoh

$("#treeview").data("kendoTreeView").dataItems() diese Methode funktioniert nicht Rückkehr alle Elemente im Baum. Es gibt Elemente der ersten Ebene zurück. Wenn Sie also untergeordnete Knoten überprüfen möchten, sollten Sie Knoten rekursiv durchlaufen.

indexOf(string) Funktion funktioniert nicht mit Javascript-Arrays. Sie müssen Werte in Schleife abrufen. 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>

Quelle

2016-10-19 11:56:25 FuatOgme

Wie man checkbox TreeView durch ein Array manuell prüft?

Antwort

Verwandte Themen