当我更改数据时,ui-grid 自定义指令高度未更新
问题描述:
我有一个 UI-grid 自定义指令,我正在更改网格的高度,条件是如果它有超过 10 行我正在修复高度,这是以下代码
I have a UI-grid Custom Directive and I am changing the height of grid with a condition that if it has more than 10 rows I am fixing the height, this is the following code
scope.gridOptions.data = scope.data;
if (scope.data.length > 10) {
scope.gridOptions.minRowsToShow = 10;
} else {
scope.gridOptions.minRowsToShow = scope.data.length;
}
scope.gridOptions.virtualizationThreshold =scope.gridOptions.minRowsToShow;
默认情况下它工作正常,但是当我更改数据时,高度没有更新.这是我的笨蛋
by default its working fine but when I change the data the height is not updating. This is my plunker
答
1) 使用条件语句将 getTableHeight()
中显示的最大行数限制为 10:
1) Use a conditional statement that limits the maximum # rows to show to 10 in getTableHeight()
:
scope.getTableHeight = function() {
// limit table height to a maximum of 10 rows
var tableRows = (scope.data.length > 10) ? 10 : scope.data.length;
var rowHeight = 30; // your row height
var headerHeight = 30; // your header height
var height = "";
if (scope.gridOptions.enablePaginationControls) {
height = "auto";
} else {
height = (tableRows * rowHeight + headerHeight) + "px";
}
return {
height: height
};
};
2) 删除覆盖高度的类:
2) Remove the class you have that overrides the height:
/* .ui-grid, .ui-grid-viewport {
height: auto !important;
} */
演示:https://plnkr.co/edit/baleHFkA85jCRI2SDSqO?p=preview一个>
其他注意事项:
-
customgrid
不应使用自闭合标签,而是: -
virtualizationThreshold
应该采用数字而不是布尔值
-
customgrid
should not use a self-closing tag, rather:<customgrid></customgrid>
-
virtualizationThreshold
should take a number rather than a boolean