배열을 통해 treeView checbox를 수동으로 확인하는 방법은 무엇입니까?

아래 코드에서 확인란을 선택하지 않도록 설정할 수 없습니다. 나는 checked = true를 체크하고 싶다. kendo-mvvm에서 databind가 html 부분에서 수행되는 문제를 해결할 수있는 방법이 있습니까?배열을 통해 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()이 방법은 하지 반환 트리에있는 모든 항목을 수행합니다. 첫 번째 수준의 항목을 반환합니다. 따라서 자식 노드를 확인하려면 반복적으로 노드를 이동할 수 있습니다.

indexOf(string) 자바 스크립트 배열에서는 함수가 작동하지 않습니다. 루프에서 값을 가져와야합니다. 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를 수동으로 확인하는 방법은 무엇입니까?

답변

관련 문제