在 Ag-Grid 中切换浮动过滤器? [英] Toggle floating filter in Ag-Grid?

问题描述

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

I am trying to have the display of the floating filter be determined by a switch or button click. Seems simple enough. I should just be able to toggle between true and false, supply that value to the floating filter in the grid options, and refresh the header right? Unfortunately, the grid always seems to be one step behind. When I click the first time, nothing happens. When I toggle the switch back to false is when the floating filter comes up. The floating filter will then continue to appear (when the switch is false) and disappear (when the switch is true). To make things even weirder, if I toggle the floating filter switch a few times and then try toggling the rowGroupPanelShow (which I am also trying to have toggleable), it will trigger the floating filter to switch to whatever value it was not previously. But only once.

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

I have tried a few variations on this. I've tried switches and buttons. I've tried watchers and writing my own functions to toggle true and false. I've tried calling this.gridApi.refreshHeader() within the same function as the toggle and calling it from it's own function. I've tried calling this.columnApi.resetColumnState() (works for resetting grouping). Everything console logs correctly but the grid always seems to be one step behind.

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

Here's a link to a plunker that I took from ag-grid's website and modified to demonstrate the behavior: 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()
    },

预期:是否显示浮动过滤器应由开关切换.将开关的值传递给网格，然后刷新标题应该可以实现这一点.

Expected: Whether or not the floating filter is shown should be toggled by a switch. Passing the value of the switch to the grid and then refreshing the header should accomplish this.

实际:Grid 似乎落后了一步(当 switch 为 false 时显示浮动过滤器).

Actual: Grid seems to be one step behind (shows floating filter when switch is false).

推荐答案

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

In my comment I suggested fixing it with 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);
    }
},

以下是一些一般信息:为什么 setTimeout(fn, 0) 有时有用?

在 React(我知道)中，我会使用 setState回调:

In React (which I know) I would use the setState callback:

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

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

I don't know if there's a Vue.js equivalent, but setTimeout(..., 0) accomplishes a similar thing.

这篇关于在 Ag-Grid 中切换浮动过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！