代码之家 › 专栏 › 技术社区 › Abhra Dey

自定义过滤器ag grid react

ag-grid filter reactjs

Abhra Dey · 技术社区 · 7 年前

我试图使用React在ag网格中实现一个自定义下拉过滤器。我关注的链接是 link

我能够创建过滤器,但是默认情况下过滤器不会出现。作为用户,我们需要单击列标题旁边的3箭头图标,然后出现过滤器。

是否有默认情况下显示自定义过滤器下拉列表的方法?

2 回复 | 直到 7 年前

Paritosh 7 年前

我希望 Floating filters 我可以在这里帮助你。

将此示例签入 ag-grid documentation

      filter: "agNumberColumnFilter",
      floatingFilterComponent: "sliderFloatingFilter",
      floatingFilterComponentParams: {
        maxValue: 5,
        suppressFilterButton: true
      },

示例显示 sliderFloatingFilter ,要使其成为下拉过滤器,我认为您需要为其创建自定义组件。

看看如何 ag-grid 团队已 TextFloatingFilterComp ,则, DateFloatingFilterComp ,则, NumberFloatingFilterComp 等打开 GitHub code

希望这有帮助。

Zohaib Ijaz 4 年前

我使用这个列配置实现了下拉/枚举过滤器。在我的案例中,我试图添加布尔过滤器。

下面是完整的示例

https://codesandbox.io/s/ag-grid-react-enum-filter-q4er8?file=/src/App.js:1572-1599

const getEnumColumnParams = (enumMap) => {
  return {
    cellRenderer: (params) => {
      if (!params.data) return "";
      const { value } = params;
      return enumMap[value];
    },
    filterParams: {
      buttons: ['reset', 'apply'],
      closeOnApply: true,
      filterOptions: [
        "empty",
        ...Object.keys(enumMap).map(key => {
          return {
            displayKey: key,
            displayName: enumMap[key],
            test: function (filterValue, cellValue) {
              return cellValue === true;
            },
            hideFilterInput: true,
          };
        })
      ],
      suppressAndOrCondition: true,
    },
  };
};

const boolEnum = {
  true: 'Yes',
  false: 'No'
};

const colorEnum = {
  '#ff00000': 'Red',
  '#00ff00': 'Green',
  '#0000ff': 'Blue',
};

const columnDefs = [
  {
    field: 'available',
    ...getEnumColumnParams(boolEnum),
  },
  {
    field: 'color',
    ...getEnumColumnParams(colorEnum),
  }
];

也可以创建列类型并指定 type: 'boolColumn' 如我在上面的codesandbox示例中所做的那样

推荐文章

shekharsabale · 从列表元素捕获子字符串

2 年前

Julien T-Pro · 如何在python中删除数组对象中的空列表?

2 年前

CodeNoob · 使用javascript中具有匹配字符的另一个数组筛选数组

2 年前

rickymartino · PowerShell Active Directory-无法在筛选器中为Get-ADUser使用数组值

2 年前

Alejandro Ozai · 按属性筛选对象数组,使用字符串数组筛选字符串数组

2 年前

TheCryptoChad · 如何过滤a。python中的json数组,以便每个元素中只显示一个参数?

2 年前

BabaZuri · 应用筛选器时将csv中的行添加到数组

2 年前

TheArtilleryGuy1 · R:基于多个列的最高日期对数据框进行子集

3 年前

Sab · 输入为空时,搜索结果元素未隐藏

3 年前

bababababa · 多个条件的条件格式

3 年前