更改数据时，ui-grid自定义指令高度未更新 [英] ui-grid custom directive height not getting updated when i change the data

问题描述

我有一个UI网格自定义指令，并且要更改网格的高度，条件是如果网格具有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不应使用自动关闭标签，而应使用:<customgrid></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屋！