为什么我在ag-grid中单击过滤器时行会消失?

问题描述 投票:0回答:1

当我单击每列旁边的过滤器图标时,它会打开弹出窗口,显示用于选择过滤器的选项,但是仅显示弹出窗口,其后面的实际网格消失了。因此,弹出窗口只是漂浮在空的背景上。当我关闭弹出窗口时,网格返回。我仅按<script src="./js/vue.js"></script>使用Vue.js我的html:

<!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>

我的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:

@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;
}

enter image description here

enter image description here

javascript vue.js ag-grid
1个回答
0
投票

我不知道是否是同样的问题,但是我是在寻找非常相似的经验的同时来到这篇文章的。我找到了一个带有ag-popup类的div,如果我创建一个css规则,将高度设为0,则似乎可以解决此问题,并且尚未看到副作用。即

.ag-popup 
{
  height: 0;
}
© www.soinside.com 2019 - 2024. All rights reserved.