樹視圖與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

回答

相關問題