在 Ag-Grid 中切换浮动过滤器？答案

【问题标题】：Toggle floating filter in Ag-Grid?在 Ag-Grid 中切换浮动过滤器？
【发布时间】：2019-06-23 23:39:39
【问题描述】：

我试图让浮动过滤器的显示由开关或按钮单击来确定。看起来很简单。我应该能够在真假之间切换，将该值提供给网格选项中的浮动过滤器，然后刷新标题对吗？不幸的是，网格似乎总是落后一步。当我第一次单击时，没有任何反应。当我将开关切换回 false 时，浮动过滤器就会出现。然后浮动过滤器将继续出现（当开关为假时）并消失（当开关为真时）。更奇怪的是，如果我切换浮动过滤器开关几次，然后尝试切换 rowGroupPanelShow（我也试图使其可切换），它将触发浮动过滤器切换到以前没有的任何值。但只有一次。

我已经尝试了一些变化。我试过开关和按钮。我尝试过观察者并编写自己的函数来切换真假。我尝试在与切换相同的函数中调用this.gridApi.refreshHeader()，并从它自己的函数中调用它。我试过打电话给this.columnApi.resetColumnState()（用于重置分组）。所有控制台都正确记录，但网格似乎总是落后一步。

这是我从 ag-grid 网站获取并修改以演示行为的 plunker 的链接：https://plnkr.co/edit/Me51NOVOCbmvFxx95WpP?p=preview

这里是开关和网格：

<v-layout row wrap justify-center>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="filterSwitch"
      label="Floating Filter"
      v-model="filterSwitch"
    ></v-switch>
  </v-flex>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="groupSwitch"
      label="Row Grouping Panel"
      v-model="groupSwitch"
    ></v-switch>
  </v-flex>
</v-layout>
<div class="buys">
  <ag-grid-vue
  id="personTableAgGridTest"
  style="width: 100%; height: 65vh;"
  class="ag-theme-balham"
  :columnDefs="columnDefs"
  :rowData="rowData"
  :cacheBlockSize="cacheBlockSize"
  :rowModelType="rowModelType"
  :enableColResize="true"
  :enableFilter="true"
  :enableSorting="true"
  :rowSelection="rowSelection"
  :animateRows="true"
  :floatingFilter="floatingFilter"
  :maxConcurrentDatasourceRequests="maxConcurrentDatasourceRequests"
  :defaultColDef="defaultColDef"
  :columnTypes="columnTypes"
  :sideBar="sideBar"
  :rowGroupPanelShow="rowGroupPanelShow"
  :gridReady="onGridReady"
  >

  </ag-grid-vue>

这里是相关的绑定数据

export default {
  data() {
    return {
      columnDefs: null,
      rowData: null,
      cacheBlockSize: 250,
      rowSelection: 'multiple',
      maxBlocksInCache: 5,
      gridApi: null,
      columnApi: null,
      rowGroupPanelShow: 'always',
      floatingFilter: false,
      filterSwitch: false,
      groupSwitch: false,
      rowModelType: 'serverSide',
      maxConcurrentDatasourceRequests: 1,

这里是函数/观察者

    resetColumns () {
      this.columnApi.resetColumnState()
    },
    refreshHeader2 () {
      console.log('in refresh header', this.floatingFilter)
      this.gridApi.refreshHeader()
      // this.resetColumns()
    }
 },
  watch: {
    filterSwitch (val) {
      console.log('val', val, this.floatingFilter)
      this.floatingFilter = !this.floatingFilter
      this.refreshHeader2()
    },

预期：是否显示浮动过滤器应由开关切换。将开关的值传递给网格，然后刷新标题即可完成此操作。

实际：网格似乎落后了一步（当开关为假时显示浮动过滤器）。

【问题讨论】：

您的问题会通过演示问题更容易回答。您可以尝试从这里开始：plnkr.co/edit/RQcNJT2sKcv65JzNMmeU?p=preview。或来自documentation 的任何其他示例。
感谢@thirtydot 的回复。我刚刚添加了一个指向我从 ag-grid 网站上抓取的 plunker 的链接，并对其进行了修改以显示正在发生的事情。 plnkr.co/edit/Me51NOVOCbmvFxx95WpP?p=preview
我不太了解 Vue.js，但我对可能发生的事情有所了解。这似乎有帮助：plnkr.co/edit/9NAfPeEu8GgJw7okqz77?p=preview。我不知道“重置列”发生了什么，也没有调查。
嘿！我分心了，因为您的解决方案有效，我完全忘记了回到这里说谢谢！它工作得很好。奇怪的是，您必须添加 0ms 的设置超时才能使其工作，但确实如此。谢谢@thirtydot！
不客气。我已经写了一个包含更多细节的答案，所以你有一些东西to accept。

标签： javascript vue.js ag-grid

【解决方案1】：

在我的评论中，我建议使用setTimeout(..., 0) 修复它：

https://plnkr.co/edit/9NAfPeEu8GgJw7okqz77?p=preview

watch: {
    filterSwitch () {
        // logs correctly with value of filterSwitch
        console.log('filterSwitch', this.filterSwitch)
        setTimeout(() => {
            // refresh header after value of floating filter has changed
            this.gridApi.refreshHeader()
        }, 0);
    }
},

以下是一些一般信息：Why is setTimeout(fn, 0) sometimes useful?

在 React（我知道）中，我会使用 setState callback：

this.setState({
    filterSwitch: !filterSwitch,
}, () => {
    this.gridApi.refreshHeader();
});

我不知道是否有 Vue.js 等价物，但 setTimeout(..., 0) 完成了类似的事情。

【讨论】：

【解决方案2】：

对于 Angular：文件隐藏的组件代码

 gridApi: any = null;
  floatingFilter = false;
  onGridReady(grid: any) {
    this.gridApi = grid.api;
  }
  toggleFloating(){
        this.floatingFilter = !this.floatingFilter;
         const columnDefs = this.gridApi.getColumnDefs();
         columnDefs.forEach((colDef:any, index:number)=> {
            colDef.floatingFilter = this.floatingFilter;
         });
         this.gridApi.setColumnDefs(columnDefs);
  }

HTML：

 <ag-grid-angular style="width: 100%; height: 300px;" class="ag-theme-alpine" [rowData]="rowData" [gridOptions]="gridOptions"
        (gridReady)="onGridReady($event)">
    </ag-grid-angular>

【讨论】：