0

使用 ui-grid 在 3 个嵌套级别上取得了巨大成功。业务需要一个扩展的行来推动下一行，而不是覆盖在连续行的顶部。找不到如何在 ui-grid.js 文件中控制此溢出/z 层功能。关于如何让它工作的任何建议？谢谢！

4

2 回答 2

1

弄清楚了。ui-grid.js 文件包含 28,000 行底部的所有模板。我在我的代码中将“ui-grid/expandableRow”的所有 html 提取到它自己的模板文件中，并对其进行了修改以满足一些需求。在 angularjs 中，我使用自己的命名约定指定了该模板：

expandableRowTemplate: 'AngularApp/Templates/expandableAssetsRowTemplate.html'

该模板的代码如下所示。出于某种奇怪的原因，我不得不删除指令 'ui-grid-expandable-row' 才能工作）：

<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>
于 2016-07-29T21:17:47.513 回答
0

就我而言，我有一个名为 myTable 的 ui-grid，其中可以是子网格的一些行。主网格填充有数组array1。array1 的每个元素都可以包含一个详细信息数组。只有我需要做这个操作（设置子网格的高度属性）：

$scope.myTable.expandableRowHeight *= ( 2 + row.entity.details.length ) ;

row.entity 必须是 array1 中的一个元素（主网格的数组）

然后，expandCollapse 方法应该是这样的：

$scope.expandCollapseRow = function(row,$event){
    $event.stopPropagation();
    $scope.myTable.expandableRowHeight *= ( 2 + row.entity.details.length ) ;
    $scope.gridApi.expandable.toggleRowExpansion(row.entity);
};

请不要忘记 expandableRowHeight 是 angular-ui 网格的现有属性。

您可以在此图像中看到网格设置中的属性：

您可以在下面的网格设置离子图像中看到该属性

于 2017-02-01T13:25:23.950 回答