jqGrid-> treeGrid不能与我的angular指令一起使用

我正在使用JqGrid和angularJS的指令。 例如,我正在使用来自此jqgrid的代码从服务器加载json数据到treegrid不显示数据

这是指令:

.directive('ngJqGrid', function () { return { restrict: 'E', scope: { config: '=', data: '=', }, link: function (scope, element, attrs) { var table; scope.$watch('config', function (newValue) { element.children().empty(); table = angular.element('
'); element.append(table); $(table).jqGrid(newValue); }); scope.$watch('data', function (newValue, oldValue) { var i; for (i = oldValue.length - 1; i >= 0; i--) { $(table).jqGrid('delRowData', i); } for (i = 0; i < newValue.length; i++) { $(table).jqGrid('addRowData', i, newValue[i]); } }); } }; });

这是角度控制器的代码:

 $scope.data = {}; $http.get('home/GetDataJson').success(function (data, status, headers, config) { $scope.config = { datatype: "json", colNames: ['id', 'Prestations'], colModel: [ { name: 'id', width: 100, key: true }, { name: 'name', width: 785, sortable: false } ], sortname: 'id', sortorder: "asc", treeGrid: true, treeGridModel: "adjacency", ExpandColumn: 'name', ExpandColClick: true, jsonReader: { repeatitems: false, root: function (obj) { return obj; } }, height: "auto" } $scope.data = data; }); 

这是JSON数据:

 [ { "id": "1", "name": "ECHANGEUR", "level": "0", "parent": "null", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1", "name": "Intervention Aller sur Site", "level": "1", "parent": "1", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1_1", "name": "Date et heure d'arrivée sur le site", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true }, { "id": "1_1_2", "name": "Consignation de l'échangeur", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true } ] 

出现网格,但treeGridfunction不起作用。 而不是所有行都被扩展,所以我们可以想到它只是网格,而不是treeGrid。 可能是指令中的问题。 请帮我! 谢谢!

要查看我的问题,请打开此链接http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=preview并替换2个文件HTML和JavaScript JS:

 var myApp = angular.module('myApp', []); myApp.directive('ngJqGrid', function() { return { restrict: 'E', scope: { config: '=', data: '=', }, link: function(scope, element, attrs) { var table; scope.$watch('config', function(newValue) { element.children().empty(); table = angular.element('
'); element.append(table); $(table).jqGrid(newValue); }); scope.$watch('data', function(newValue, oldValue) { var i; for (i = oldValue.length - 1; i >= 0; i--) { $(table).jqGrid('delRowData', i); } for (i = 0; i < newValue.length; i++) { $(table).jqGrid('addRowData', i, newValue[i]); } }); } }; }); myApp.controller('MyController', function($scope) { $scope.config = { datatype: "local", colNames: ['id', 'Prestations'], colModel: [{ name: 'id', width: 100, key: true }, { name: 'name', width: 785, sortable: false }], sortname: 'id', sortorder: "asc", treeGrid: true, treeGridModel: "adjacency", ExpandColumn: 'name', ExpandColClick: true, jsonReader: { repeatitems: false, root: function(obj) { return obj; } }, height: "auto" } $scope.data = [{ "id": "1", "name": "ECHANGEUR", "level": "0", "parent": "null", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1", "name": "Intervention Aller sur Site", "level": "1", "parent": "1", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1_1", "name": "Date et heure d'arrivée sur le site", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true }, { "id": "1_1_2", "name": "Consignation de l'échangeur", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true }]; });

HTML:

               

对不起我的小经验:)谢谢!

 scope.$watch('data', function (newValue, oldValue) { table[0].addJSONData({ rows: newValue }); });