Question

我正在使用JqGrid和angularJS的指令。例如，我正在使用此jqgrid loading json datas from server into treegrid doesn't display datas

中的代码

这是指令：

.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('<table></table>');
                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
    }
]

出现网格，但treeGrid功能不起作用。而不是所有行都被扩展，所以我们可以想到它只是网格，而不是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('<table></table>');
        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：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="jqgrid@*" data-semver="4.5.2" rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css" />
    <script data-require="jqgrid@*" data-semver="4.5.2" src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyController">
    <ng-jq-grid config="config" data="data"></ng-jq-grid>
  </body>

</html>

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

Answer 1

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

            });

jqGrid-＆gt; treeGrid不能与我的angular指令一起使用

1 个答案: