Baumansicht mit Angular JS und Kendo UI

-1

In meinem kantigen Web verwende ich Kendo UI zur Darstellung der Baumansicht. Hier ist meine HTML-Datei.Baumansicht mit Angular JS und Kendo UI

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" /> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" /> 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> 
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script> 
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"> </script> 
</head> 
<body> 
<div ng-app="myapp"> 
    <div ng-controller="myappCtrl"> 

     <div ng-attr-id="{{ treeview }}" kendo-tree-view k-options="treeview"></div> 
    </div> 
    <div style="padding-top: 2em;"> 
     <h4>Selected:</h4> 
     <p ng-attr-id="{{ selected }}">No interests selected.</p> 
    </div> 
</div> 
<script src="../scripts/test.js"></script> 
</body> 
</html>

Und das ist mein test.js

var app = angular.module('myapp', []); 

app.controller('myappCtrl', function($scope, $http, $window) { 

$scope.dataModal = [ { 
    "key" : "Key", 
    "type" : "type", 
    "value" : 1, 
    "items" : [ { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ { 
        "key" : "Key", 
        "type" : "type1", 
        "items" : [ 

        ] 
       }, { 
        "key" : "Key", 
        "type" : "type1", 
        "items" : [ 

        ] 
       } ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ { 
        "key" : "Key", 
        "type" : "type1", 
        "items" : [ 

        ] 
       } ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      } ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     } ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
} ]; 

$scope.treeview = { 
    checkboxes : { 
     checkChildren : true 
    }, 
    //check : onCheck, 
    dataTextField : "key", 
    loadOnDemand : false, 
    dataSource : $scope.dataModal 
}; 

// get keys of checked nodes 
function checkedNodeIds(nodes, checkedNodes) { 
    for (var i = 0; i < nodes.length; i++) { 
     if (nodes[i].checked) { 
      checkedNodes.push(nodes[i].key); 
     } 

     if (nodes[i].hasChildren) { 
      checkedNodeIds(nodes[i].children.view(), checkedNodes); 
     } 
    } 
} 

// show checked nodes on data source change 
function onCheck() { 
    var checkedNodes = []; 
    var treeView = $("#treeview").data("kendoTreeView"); 
    var message = ""; 

    checkedNodeIds(treeView.dataSource.view(), checkedNodes); 

    if (checkedNodes.length > 0) { 
     message = "Selected Interests: " + checkedNodes.join(", "); 
    } else { 
     message = "No Interests Checked."; 
    } 

    $("#selected").html(message); 
} 

});

Meine Seite ist die Baumansicht angezeigt werden. Und ich verwende zwei Funktionen, um die ausgewählten Elemente des Baums zu erhalten. Aber es gibt als Fehler im Konsolenprotokoll wie unten.

test.js:347 Uncaught TypeError: Cannot read property 'dataSource' of null 

Line 347: checkedNodeIds(treeView.dataSource.view(), checkedNodes);

Bitte seien Sie so nett, mir zu zeigen, was mit meinen Codes falsch ist.

Danke

Quelle

2016-04-05 Rose18

allererst Code einige Änderungen

Um zu verwenden, Kendo-Richtlinien innerhalb Winkel Sie auf sie eine Abhängigkeit einführen müssen muss, dies auf Ihre Modulkonfiguration durchgeführt wird, ohne diese Konfiguration funktioniert alles
```
var app = angular.module('myapp', ['kendo.directives']); 
```

Sie sollten mit jQuery Selektoren auf Controller vermeiden, ist es in ist Angular-Richtlinien. Um die Ausgangsnachricht auf die Ansicht setzen Sie einfach eine Variable auf Ihrem Umfang nutzen können und es dann binden auf der Ansicht

// show checked nodes on data source change 
function onCheck(kendoEvent) { 

    var checkedNodes = []; 
    var treeView = kendoEvent.sender; 
    var message = ""; 

    checkedNodeIds(treeView.dataSource.view(), checkedNodes); 

    if (checkedNodes.length > 0) { 
     message = "Selected Interests: " + checkedNodes.join(", "); 
    } else { 
     message = "No Interests Checked."; 
    } 

    $scope.$apply(function() { $scope.selectedItems = message; }); 
}

Beachten Sie, dass wir $ Bereich zu verwenden. $ Anwenden, diese Nachricht zu setzen, diese ist, weil jQuery Ereignisse, die von Kendo geschieht außerhalb der Kontrolle von eckigen verwendet, so eckig aktualisiert nicht die Ansicht, weil er nicht weiß, dass er es tun muss, mit $ scope. $ apply zwingen wir es Angular, um die Bindungen zu aktualisieren .
onCheck-Ereignis innerhalb der Baumkonfiguration sollte unkommentiert sein, alle Kendo-Ereignishandler erhalten einen Parameter als Argument, der einen Zeiger auf das Widget enthält. documentation

Quelle

2016-04-05 11:52:57 Alberto

Könnten Sie es bitte ändern? – Rose18

Antwort

Verwandte Themen