Question

我有一个默认的ag-grid标头，其配置与我需要的一样。它是不可移动的，它是固定的，类似的东西。现在，我面临的挑战似乎很简单，但使用ag-grid可能是最困难的事情-仅将最后两天用于此...

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

我使用Header Templates进行了尝试：我可以在此处添加按钮，但无法对点击事件做出反应。

然后我尝试了Header Components，但是然后，我必须照顾所有不同的功能，例如排序，过滤，菜单，样式等等。结果：突然，我可以将前一个固定的列四处移动，看起来与其他列和and和不同。真该死！

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

更新在尝试了来自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中的自定义标头示例完成的 https://www.ag-grid.com/javascript-grid-header-rendering/#example-header-component

在列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});
}

Answer 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);
};

向ag-grid列标题添加按钮

2 个答案: