Question

如果每个父行在其子网格中具有相同数量的子行，并且因此高度相同，则ui-grid的可扩展行功能可以很好地工作。如果subGrid中的子行数与父行的行数不同，那就不太好了。

我已经能够通过传入数组长度并使用它生成subGrid-height来使subGrid ITSELF具有动态高度：

lengthOfList: data[i].friends.length

style="height:{{row.entity.subGridOptions.lengthOfList * 30}}px;

但由于该子网格必须在父网格中存在，因此父网格需要向下推动其行以腾出空间。它需要通过每行不同的amonut来实现。不幸的是，父网格对于所有行都有一个固定的expandableRowHeight。我无法为每一行指定expandableRowHeight。

我希望最好的是动态改变expandableRowHeight，因为我点击一行打开它。

试图弄清楚如何监听开放的可扩展行事件。

ui-grid是一个收缩包装插件，它编写自己的DOM元素，因此我无法向可能帮助我捕获事件的元素添加任何内容。

如何即时配置expandableRowHeight？

Plunker：

http://plnkr.co/edit/1IeEsXZAf9pRgKmy5jfO?p=preview

（plunker行为不端.1]由于跨域问题，ui-grid正在使用的字体现在被阻止，2]有时html模板因为没有明显的原因而变为AWOL。）

Answer 1

阿。我找到了gridApi。所以这个解决方案有效！

$scope.gridOptions = {
    onRegisterApi: function(gridApi) {
        gridApi.expandable.on.rowExpandedStateChanged($scope,function(row){
            $scope.gridOptions.expandableRowHeight = row.entity.mySubRowItems.length * 30;
        });
    }
}

我确信有一种方法可以直接引用行的父网格。而不是$ scope.gridOptions，肯定有一些行$ parent引用，我还没有找到它。

Answer 2

作为3.0.0稳定版的更新，有一个rowExpandedBeforeStateChanged事件。如果您使用rowExpandedStateChanged，那么您的网格将不会更新您尝试设置的新expandableRowHeight。

$scope.gridOptions.onRegisterApi = function(gridApi) {
    // dynamic expandable rows
    gridApi.expandable.on.rowExpandedBeforeStateChanged($scope, function(row) {
        $scope.gridOptions.expandableRowHeight = 30 + row.entity.valueArray.length * 30;
    });
};

Answer 3

这是它的工作原理，我检查了其他人的解决方案，他们都没有工作

我们假设headerRowHeight是39px。

模板应该是这样的：

'<div ui-grid="row.entity.subGridOptions" ng-style="{height: (row.entity.youList.length * row.entity.subGridOptions.rowHeight) + 39 + \'px\'}" ui-grid-selection ui-grid-edit ui-grid-cellnav ui-grid-validate ui-grid-auto-resize ui-grid-resize-columns></div>'

rowExpandedStateChanged应为：

gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
            $timeout(function() {
                row.expandedRowHeight = row.entity.youList.length * row.entity.subGridOptions.rowHeight + 39;
            }, 150);
        });

Answer 4

最后对此进行了排序，重要的是要知道可扩展行具有行高，以及该行内的子（可扩展）网格大小高度，因此如果需要显示网格以完全适合行内，您需要将两个高度设置为相同的动态大小。在顶级网格api中，您需要指定：

$scope.gridOptions = {
    onRegisterApi: function(gridApi) {
        gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {               
                row.expandedRowHeight = (row.entity.subGridOptions.data.length * rowHeight) + headerHeight;
            });
        });
    }
}

但现在你使用ui-grid版本3.0.0+中的扩展 RowHeight变量，2 +中不可用，可扩展 RowHeight似乎没有任何变量影响，但可能用于设置展开 RowHeight的全局值。（注意网格上这两个变量的不同命名）

现在，这将调整顶部网格行的大小，以正确显示子网格。

在子网格的expandableRowTemplate.html中，您需要使用css样式动态指定子网格的高度：

<div ui-grid="row.entity.subGridOptions" style="height:{{(row.entity.subGridOptions.data.length * rowHeight) + headerHeight}}px"  ui-grid-auto-resize></div>

这对我目前非常有用，可能会帮助那些人。

请注意，它也可以帮助调查ui-grid-autoresize指令现在在ui-grid 3+中，显然这有助于实现这一点，而不是100％确定我是否正确使用它，但它有效

Answer 5

我尝试了一种单独使用CSS的解决方案，而不是利用“ expandableRowHeight”属性。这对我有用。

父网格数据在类名称为“ ui-grid-canvas”的div中呈现。添加以下样式-

.ui-grid-canvas{
   height: auto !important;
   overflow: auto !important;
}

对于展开的子表，将样式添加到div，其类名为“ expandableRow”

 .expandableRow{
    height: auto !important;
 }

此外，请勿在gridOptions中设置“ expandableRowHeight”属性。

AngularJS：ui-grid：dynamic expandableRowHeight

5 个答案: