树视图与Angular JS和Kendo UI

-1

在我的角网中，我使用Kendo UI来表示树视图。这是我的html文件。树视图与Angular JS和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>

这是我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); 
} 

});

我的页面上显示的树视图。我使用两个函数来获取树的选定项目。但是它在控制台日志中给出如下错误。

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

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

请给我看看我的代码有什么问题。

谢谢

来源

2016-04-05 Rose18

的所有代码首先需要进行一些修改

为了使用里面你需要引入对它们的依赖角度剑道指令，这是你的模块配置完成后，没有这个配置什么将工作
```
var app = angular.module('myapp', ['kendo.directives']); 
```

你应该避免使用控制器jQuery选择，它的位置是在angualr指令。为了设置输出消息到视图，你可以简单地使用你的范围变量，然后将它绑定在视图

// 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; }); 
}

注意，我们使用$范围。$应用，设置此消息，这是因为kendo使用的jQuery事件发生在角度控制之外，所以角度不会更新视图，因为他不知道他必须这样做，使用$ scope。$ apply we force it Angular更新绑定。
树配置中的onCheck事件应该取消注释，所有kendo事件处理程序都会接收一个参数作为参数，其中包含指向该小部件的指针。 documentation

来源

2016-04-05 11:52:57 Alberto

你能否改变它？ – Rose18

树视图与Angular JS和Kendo UI

回答

相关问题