更改数据时,ui-grid自定义指令高度未更新

时间:2017-07-13 05:55:19

标签: angularjs angularjs-directive angularjs-scope angular-ui-grid ui-grid

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

$ret

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

Plunker Example Sample

1 个答案:

答案 0 :(得分:2)

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)删除覆盖高度的课程:

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

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

其他注意事项:

  • customgrid不应使用自行结束标记,而应使用<customgrid></customgrid>
  • virtualizationThreshold应该使用数字而不是布尔值