0

В приведенном ниже коде не указан установленный флажок. Я хотел бы установить определенный флажок checked = true. есть ли способ решить проблему в kendo-mvvm, где databind будет выполняться в html-части?Как вручную проверить checbox treeView через массив?

ожидается выход

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

ответ

0

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

Смежные вопросы