angular - 将按钮添加到 ag-grid 列标题

Question

我有一个默认的 ag-grid 标题，它是按照我需要的方式配置的。它是不可移动的，它是固定的等等。现在我面临的挑战看起来很简单，但也许是使用 ag-grid 做的最难的事情——只需花最后两天时间来解决这个问题……

我只想添加一个我可以在我的 Angular 组件中使用react的小按钮。

我用 Header Templates 试过了: 我可以在这里添加一个按钮，但我无法对点击事件使用react。

然后我试了Header Components但随后，我必须处理所有不同的功能，如排序、过滤、菜单、样式…… 结果:突然之间，我可以移动之前固定的列，它看起来与其他列和和以及不同。简直见鬼!

将按钮添加到一个列标题但保持样式和功能不变的最简单方法是什么？

更新在尝试使用 ag-grid 的 ag-grid 演示代码并尝试使用 Header Components 之后，我又回来尝试使用 Header Templates。我目前的解决方案是使用模板添加我的按钮并在 GridReady 事件的代码中连接事件。像这样的东西:

<div class="ag-cell-label-container" role="presentation">
    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
        <div>
            <span id="ID1"><i class="someclass1"></i></span>
            <span id="ID2"><i class="someclass2"></i></span>
        </div>

        <span ref="eSortOrder" class="ag-header-icon ag-sort-order"></span>
        <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>
        <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>
        <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>
        <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>
        <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
    </div>
</div>

然后连接事件:

const elm1: HTMLElement = document.getElementById('ID1') as HTMLElement;
Observable.fromEvent(elm1, 'click').takeWhile(() => this._isAlive).subscribe((event: MouseEvent) => {
    event.preventDefault();
    event.stopPropagation();
    // Logic
});

似乎可行，但我绝对希望有更专业的方法...

Answer 1

在 React agGrid 中，我做了你需要的。希望能帮助到你。我在 agGrid 中使用自定义 header 示例完成了它 https://www.ag-grid.com/javascript-grid-header-rendering/#example-header-component

在 Column defs 中，例如我添加了 expandAll 属性

[{
    headerName: "Group",
    field: "group",
    expandAll: true
}]

在 CustomHeader.js 中

let expand = null;
if (this.props.api.getColumnDef(this.props.column.colId).expandAll) {
    let text = this.state.expanded ? 'Collapse' : 'Expand';
    xpand = <span onClick={this.onExpandRequested.bind(this)}>{text}</span>
}

return (
    <React.Fragment>{expand}{headerTitle}{sort}</React.Fragment>
);

onExpandRequested (isExpanded) {

    if (this.state.expanded) {

        this.props.api.collapseAll();
    } else {

        this.props.api.expandAll();
    }
    this.setState({expanded: !this.state.expanded});
}