3つの入れ子になったレベルで大きな成功を収めたuiグリッドを使用します。ビジネスは、連続する行の上に重ねるのではなく、次の行をプッシュダウンするために行を拡大する必要があります。このオーバーフロー/ zレイヤーの機能がui-grid.jsファイル内でどのように制御されているかはわかりません。どのようにこれを動作させるための任意の提案？ありがとう！Angularjs UIグリッド - 次の行に配置することなく行を展開する方法
ui-grid.jsファイルには、28,000行の末尾にあるすべてのテンプレートが含まれています。私は "ui-grid/expandableRow"のすべてのHTMLを自分のテンプレートファイルに入れて、いくつかのニーズに合わせて修正しました。 angularjsでは、自分自身の命名規則でそのテンプレートを指定します：
expandableRowTemplate: 'AngularApp/Templates/expandableAssetsRowTemplate.html'
テンプレートのコードは次のようになります。 I）が動作するためにいくつかの奇妙な理由のためのディレクティブ「UI-グリッド拡張行」を削除する必要がありました：
<div ui-grid="row.entity.subGridOptions" ui-grid-pagination ui-grid-expandable ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-columns
ng-if="expandableRow.shouldRenderExpand()"
class="expandableRow"
style="float:left; margin-top: 1px; margin-bottom: 1px"
ng-style="{width: (grid.renderContainers.body.getCanvasWidth()) + 'px' , height: row.expandedRowHeight + 'px' }">
</div>
結果に影響を与え、他のものは、親グリッドのgridOptionsで拡張可能な行の高さです。
expandableRowHeight: 390
ネストされたグリッドには高さの指定がありますが、この拡張された行の高さによって、親のグリッドは行を正しい高さに展開できます。
すべての結果として、親グリッドの行が展開され、ネストされたグリッドが親行の残りの部分を下にプッシュします。
注：私は元々チュートリアルにあるバニラexpandableRowTemplateを使用していたので、私の展開が正しく機能していなかったのです。 （上記のものと比較して）悪いテンプレートの
サンプル：私の場合
<div ui-grid="row.entity.subGridOptions" ui-grid-expandable
ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-column>
</div>
IはMYTABLEと呼ばれるUIグリッドとサブグリッドのいくつかの行であることができる内部を有しています。メイングリッドは配列array1で埋められます。 array1の各要素には、詳細の配列を含めることができます。 だけ私はこの操作を行う必要があります（サブグリッドの高さ属性を設定する）：
$scope.myTable.expandableRowHeight *= (2 + row.entity.details.length) ;
row.entityは、次に配列1からの要素（メイングリッドの配列）
、expandCollapse方法でなければなりません
$scope.expandCollapseRow = function(row,$event){
$event.stopPropagation();
$scope.myTable.expandableRowHeight *= (2 + row.entity.details.length) ;
$scope.gridApi.expandable.toggleRowExpansion(row.entity);
};
expandableRowHeightは、angle-uiグリッドの既存の属性であることを忘れないでください。
あなたはこの画像でgirdセットアップに属性を見ることができます：
