当我单击 ag-grid 中的过滤器时，为什么行会消失？

Question

When I click on the filter icon next to each column, it opens the popup showing the options for selecting the filter, however only the popup shows, the actual grid behind it vanishes.当我单击每列旁边的过滤器图标时，它会打开显示用于选择过滤器的选项的弹出窗口，但是只有弹出窗口显示，它后面的实际网格消失了。 So the popup is just floating on an empty background.所以弹出窗口只是漂浮在一个空的背景上。 When I close the popup, the grid returns.当我关闭弹出窗口时，网格返回。 I use Vue.js only by <script src="./js/vue.js"></script> My html:我仅通过<script src="./js/vue.js"></script>我的 html 使用 Vue.js：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
  <link rel="stylesheet" href="node_modules/xel/themes/material.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Test</title>
</head>
<body>

  <div id="app">

    <app-header :par="'test'"></app-header>
    <app-grid ref="grid"></app-grid>

  </div>


  <script src="../node_modules/xel/xel.min.js"></script>
  <script src="./js/vue.js"></script>      
  <script src="./js/render.js"></script>
</body>
</html>

My js:我的js：

class Spreadsheet {
  constructor(
    rowData = [],
    columnDefs = [
      {
        headerName: 'Name',
        field: 'name',
        sortable: true,
        checkboxSelection: true,
        headerCheckboxSelection: true,
        filter: 'agTextColumnFilter',
        filterParams: {
          clearButton: true,
          debounceMs: 200
        }
      },
      {
        headerName: 'Model',
        field: 'model',
        sortable: true,
        filter: 'agTextColumnFilter',
        filterParams: {
          clearButton: true,
          debounceMs: 200
        }
      },
      {
        headerName: 'Price',
        field: 'price',
        sortable: true,
        editable: true,
        filter: 'agNumberColumnFilter',
        filterParams: {
          clearButton: true,
          debounceMs: 200
        }
      }
    ]
  ) {
    this.template = `
    <div class="spreadsheet">
      <x-input class="filter" type="text" @input="filter">
        <x-label>filter...</x-label>
      </x-input>
      <div ref="grid_vue" class="ag-theme-fresh"></div>
    </div>
    `
    this.data = function() {
      return {
        columnDefs: null,
        rowData: null,
        gridOptions: null,
        devices: []
      }
    }

    this.beforeMount = function() {
      this.devices = rowData;
      this.gridOptions = {
        suppressDragLeaveHidesColumns: true,
        defaultColDef: {
          filter: true,
          resizable: true,
          width: 100
        },
        columnDefs: columnDefs,
        rowData: rowData,
        enableCellChangeFlash: true,
        animateRows: true,
        rowSelection: 'multiple',
        onGridReady: function(params) {
          params.api.sizeColumnsToFit();
        }
      }
    }
  }

  methods = {
    addItem(item_obj) {
      this.devices.push(item_obj);
      this.gridOptions.api.setRowData(this.devices);
    },
    filter(event) {
      const filter_text = event.target.value;
      this.gridOptions.api.setQuickFilter(filter_text);
    },
    redrawAllRows() {
      this.gridOptions.api.refreshCells();
      this.gridOptions.api.redrawRows();
    }
  }

  mounted = function() {
    const eGridDiv = this.$refs.grid_vue;
    new agGrid.Grid(eGridDiv, this.gridOptions);
  }

  beforeUpdate = function() {
    console.log('beforeUpdate');
    this.redrawAllRows();
  }

}

const devices = [
  {name: "phone", model: 'Sumsung', price: 35000, class: "smartphone"},
  {name: "laptop", model: 'HP', price: 32000, class: "pc"},
  {name: "test", model: 'Test', price: 72000, class: "test"}
];

const app_table = new Spreadsheet(devices);
const app_header = {
  props: ['par'],
  template: `
  <div class="pageHeader">
    <x-button class="addDongleButton" @click="addItem">
      <x-label>Add Item</x-label>
    </x-button>
  </div>
  `,
  methods: {
    addItem() {
      console.log(this.par);
      const some_obj = {name: "Test2", model: 'X2', price: 555, class: "test"};
      vm.$refs.grid.addItem(some_obj);
    }
  }
};

const vm = new Vue({
  el: "#app",
  components: {
    appHeader: app_header,
    appGrid: app_table
  }
});

Css: Css：

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css";

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  background: rgb(241, 241, 241);
  box-sizing: border-box;
}

.pageHeader {
  z-index: 1000;
  background: #a1c4dd;
  height: 75px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.spreadsheet {
  margin: 85px 5% 20px;
}

.filter {
  display: inline-block;
  height: 25px;
  margin-bottom: 5px;
}

.ag-theme-fresh {
  height: 400px;
  width: 100%;
}

.ag-theme-fresh.ag-dnd-ghost {
  width: 30%;
  min-width: 100px;
}

Answer 1

I don't know if it's the same issue, but I came to this post while hunting down very similar experience.我不知道这是否是同一个问题，但我是在寻找非常相似的经历时来到这篇文章的。 I found a div with class ag-popup, if I make a css rule that gives that a height of 0 it's seeming to fix the issue and I haven't seen a side effect yet.我找到了一个带有 class ag-popup 的 div，如果我制定一个 css 规则，它给出的高度为 0，它似乎可以解决问题，我还没有看到副作用。 ie IE

.ag-popup 
{
  height: 0;
}

Answer 2

Same thing happened to me while using Svelte, used the answer by joolsf.我在使用 Svelte 时也发生了同样的事情，使用了 joolsf 的答案。 When checking ".ag-theme-balham" was also applied to the div as explained by joolsf.检查时，“.ag-theme-balham”也被应用于 div，正如 joolsf 所解释的那样。 In there a min-height was set.在那里设置了最小高度。 This means I had to add the following:这意味着我必须添加以下内容：

.ag-popup {
    height: 0 !important;
    min-height: 0 !important;
}

Answer 3

Might be too late for the original poster, but Thijs had it correct.对于原始海报来说可能为时已晚，但 Thijs 是正确的。 Any Ag Grid theme CSS class is applied to the main container but also applied again to the same element that .ag-popup is applied to (don't know why).任何 Ag Grid 主题 CSS class 都应用于主容器，但也再次应用于.ag-popup应用于相同的元素（不知道为什么）。 This also includes custom user-made themes which is any class applied to the main grid container prefixed with .ag-theme- .这还包括自定义用户制作的主题，即任何 class 应用于以.ag-theme-前缀的主网格容器。

In your example, .ag-theme-fresh is also being applied to the same element that .ag-popup which makes the popup a height of 400px.在您的示例中， .ag-theme-fresh也被应用于与.ag-popup相同的元素，这使弹出窗口的高度为 400px。 So that is hiding the grid items which it seems fall under 400px.所以这隐藏了看起来低于 400 像素的网格项目。

A solution would be to apply a CSS class to the main grid container without the .ag-theme- prefix and set that height (and maybe width) which would not get duplicated in the child element.一种解决方案是将 CSS class 应用到没有.ag-theme-前缀的主网格容器，并设置不会在子元素中重复的高度（可能还有宽度）。 Or apply styles directly.或者直接申请styles。

当我单击 ag-grid 中的过滤器时，为什么行会消失？

问题描述

3 个解决方案

解决方案1
6 已采纳 2019-10-16 13:25:31

解决方案2
1 2020-02-17 13:33:46

解决方案3
0 2022-08-31 22:59:39

当我单击 ag-grid 中的过滤器时，为什么行会消失？

问题描述

3 个解决方案

解决方案1 6 已采纳 2019-10-16 13:25:31

解决方案2 1 2020-02-17 13:33:46

解决方案3 0 2022-08-31 22:59:39

解决方案1
6 已采纳 2019-10-16 13:25:31

解决方案2
1 2020-02-17 13:33:46

解决方案3
0 2022-08-31 22:59:39