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

【问题标题】：Add a button to an ag-grid column header将按钮添加到 ag-grid 列标题
【发布时间】：2019-04-04 11:39:52
【问题描述】：

我有一个默认的 ag-grid 标头，按照我的需要进行配置。它是不可移动的，它是固定的，类似的东西。现在我面临的挑战似乎很简单，但也许是使用 ag-grid 最难的事情 - 只需花最后两天时间就可以了......

我只想添加一个小按钮，我可以在我的角度组件中做出反应。

我用Header Templates 尝试过：我可以在这里添加一个按钮，但我无法对点击事件做出反应。

然后我尝试了Header Components，但是我必须处理所有不同的功能，如排序、过滤、菜单、样式……结果：突然，我可以移动以前的固定列，它看起来不一样了比其他列和和和。简直是地狱！

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

更新在尝试使用来自 ag-grid 的 ag-grid 演示代码后，尝试使用标题组件，我又尝试使用标题模板。我当前的解决方案是使用模板来添加我的按钮并在 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
});

似乎可行，但我绝对希望有更专业的方法来做到这一点......

【问题讨论】：

分享你迄今为止尝试过的代码。
@SunilSingh 分享代码并不容易，因为我在这里尝试了很多。但基本上对于标题组件，我使用来自 ag-grid 的演示代码作为基础，标题模板也是如此。我在上面的更新中发布了我当前的代码/解决方案。
仅当您想自定义标题的呈现方式时，标题模板才有用。如果您希望标题有一个按钮并响应单击，则必须使用自定义标题组件
在我看来，ag-grid 以一种过于复杂的方式解决了这个问题。我真的不想在这个简单的场景中使用自定义标头，因为这需要模仿默认行为和设计——在做类似的事情时会遇到所有相关的问题。我上面提到的方法有点难看，但使用自定义标题组件仍然不那么难看。但这只是我个人的看法，虽然我确实希望 ag-grid 在未来能提供更好的解决方案。
你能把你所做的事发给你吗？

标签： angular ag-grid

【解决方案1】：

在 React agGrid 中，我做了你需要的。希望能帮助到你。我用 agGrid 中的自定义标题示例完成了它 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});
}

【讨论】：

【解决方案2】：

我意识到这是一篇旧帖子，但似乎还没有一个优雅的答案。该操作很接近，但它仅适用于单个 id，并且不能很好地对标题进行排序。我的解决方案如下：

使用自定义可点击元素更新模板：

...
<div ref="eLabel" class="ag-header-cell-label" role="presentation">
    <a href onclick="agHandleClick(event)" ref="eCustomButton" class="ag-header-icon ag-header-cell-custom-button"></a>
    <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>
...
</div>

在onGridReady中，将“agHandleClick”函数添加到windows：

let _window: Window = window;
_window['agHandleClick'] = (event) => {
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    // Logic
    console.log('header click', event);
};

【讨论】：