当我更改数据时,ui-grid 自定义指令高度未更新 [英] ui-grid custom directive height not getting updated when i change the data
本文介绍了当我更改数据时,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
这篇关于当我更改数据时,ui-grid 自定义指令高度未更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文