是否可以在单个 AG Grid 单元格中显示多个图标，然后能够过滤每个单独图标上的行？

Question

enter image description here

那么我可以在这里显示多个图标吗？如果可以的话，用户是否可以通过选择过滤器？

用户可以点击图标打开详细信息网格吗？

提前致谢

Answer 1

请查看实现您的用例的示例：https://plnkr.co/edit/kEDrnyfBkoFoxFGB

您可以使用 cellRenderers 在一行中显示多个图标，首先您必须将其提供给网格：

  columnDefs: [
    // group cell renderer needed for expand / collapse icons
    {
      field: 'name',
      minWidth: 300,
      cellRenderer: 'agGroupCellRenderer',
      cellRendererParams: {
        innerRenderer: 'iconRenderer',
      },
    },
  ],
  components: {
    iconRenderer: IconCellRenderer,
  },
};

这是单元格渲染器组件：

class IconCellRenderer {
  init(params) {
    this.params = params;
    this.eGui = document.createElement('div');
    this.eFilterButton = document.createElement('button');
    this.eExpandButton = document.createElement('button');
    this.eText = document.createElement('span');

    this.eText.textContent = params.value;
    this.eFilterButton.textContent = 'filter';
    this.eExpandButton.textContent = 'expand';

    this.eGui.appendChild(this.eText);
    this.eGui.appendChild(this.eFilterButton);
    this.eGui.appendChild(this.eExpandButton);

    this.eFilterButton.addEventListener('click', this.filterOnClick.bind(this));

    this.eExpandButton.addEventListener('click', this.expandOnClick.bind(this));
  }

  getGui() {
    return this.eGui;
  }

  expandOnClick(ev) {
    const isExpanded = this.params.node.expanded; 
    this.params.node.setExpanded(!isExpanded)
  }

  filterOnClick(ev) {
    const value = this.params.value;
    this.params.api.setFilterModel({
      name: { values: [value] },
    });
  }
}

这里的关键是我们可以通过在节点上调用api.setExpanded(true)来展开一行。我们可以通过调用 api.setFilterModel(filterModel)

在网格上进行过滤

是否可以在单个 AG Grid 单元格中显示多个图标，然后能够过滤每个单独图标上的行？

Is it possible to display multiple icons in a single AG Grid cell and then be able to filter rows on each individual icon?

ag-grid