ui-网格自定义指令高度在我更改数据时未更新

ui-grid custom directive height not getting updated when i change the data

我有一个 UI-grid 自定义指令,我正在更改网格的高度,条件是如果它有超过 10 行,我正在固定高度,这是下面的代码

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;

默认情况下它工作正常但是当我更改数据时高度没有更新。这是我的笨蛋

Plunker Example Sample

1) 在 getTableHeight():

中使用条件语句将要显示的最大行数限制为 10
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) 删除覆盖高度的 class:

/* .ui-grid, .ui-grid-viewport {
    height: auto !important;
} */

演示:https://plnkr.co/edit/baleHFkA85jCRI2SDSqO?p=preview

其他注意事项:

  • customgrid 不应使用自闭标签,而是:<customgrid></customgrid>
  • virtualizationThreshold 应该取一个数字而不是布尔值