3

私が達成しようとしているのは、tree-like内部にng-grid. そのような実装は見つかりませんでしたが、グループ化メカニズムを使用できるかどうか疑問に思っています

グリッドの例

グループ ヘッダーをその下の行と同じ方法で編集可能にする必要があります (上の画像を参照)。まったく同じ編集可能なセルがマスター行として機能します。ヘッダー グループから 1 つのセルを更新すると、そのグループの下のすべてのセルが更新されます。

ng-grid ドキュメントからhttp://angular-ui.github.io/ng-grid/ :

aggregateTemplate のデフォルト値:

    <div ng-click="row.toggleExpand()" ng-style="{'left': row.offsetleft}" class="ngAggregate">
        <span class="ngAggregateText">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span>
        <div class="{{row.aggClass()}}"></div>
    </div>

説明したように集計行をレンダリングするために、このオプションを使用することは可能ですか?

4

1 に答える 1

1

以下の回答/コメントはツリーのような構造に関連しており、集計行を編集可能にすることには関連していません...

ng-grid でツリーのような構造を探している場合は、特定の行のクリック時にオプションを更新する と APIの組み合わせng-ifでそれを実現できます。サンプルのplnkrを次に示します。ng-clickng-grid data

親行をクリックすると、トグル関数が呼び出されて子行が に追加/削除されますng-grid data。(完全な詳細については、私のプランカーコードを参照してください)

$scope.toggleDisplay = function(iType) {
  $scope.displayItemDetails[iType] = $scope.displayItemDetails[iType] ? 0 : 1;
  $scope.selItems = $scope.updateTable();
};


$scope.updateTable = function() {
  var selItems = [];
  for (var i in $scope.allItems) {
    var iType = $scope.allItems[i]["Type"];

    if (angular.isUndefined($scope.displayItemDetails[iType])) {
      $scope.displayItemDetails[iType] = 0;
    }

    if (1 == $scope.displayItemDetails[iType]) {
      $scope.allItems[i]["Summary"] = '-';
    } else {
      $scope.allItems[i]["Summary"] = '+';
    }
    selItems.push($scope.allItems[i]);

    if ($scope.displayItemDetails[iType]) {
      for (var j in $scope.allItems[i]["Details"]) {
        $scope.allItems[i]["Details"][j]["Summary"] = "";
        selItems.push($scope.allItems[i]["Details"][j]);
      }
    }

  }
  return selItems;
};

$scope.gridOptions = {
  data: 'selItems',
  columnDefs: [{
    field: 'Summary',
    displayName: '',
    cellTemplate: summaryCellTemplate,
    width: 30
  }, {
    field: 'Name',
    displayName: 'Name',
  }, {
    field: 'Type',
    displayName: 'Type',
  }, {
    field: 'Cost',
    displayName: 'Cost',
  }, {
    field: 'Quantity',
    displayName: 'Quantity',
  }],
  enableCellSelection: false,
  enableColumnResize: true
};
于 2015-03-09T07:07:38.777 に答える