问题
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
Plunker Example Sample
回答1:
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) Remove the class you have that overrides the height:
/* .ui-grid, .ui-grid-viewport {
height: auto !important;
} */
Demo: https://plnkr.co/edit/baleHFkA85jCRI2SDSqO?p=preview
Other points to note:
customgrid
should not use a self-closing tag, rather:<customgrid></customgrid>
virtualizationThreshold
should take a number rather than a boolean
来源:https://stackoverflow.com/questions/45072428/ui-grid-custom-directive-height-not-getting-updated-when-i-change-the-data