如何在 ag-grid 中禁用 header 点击排序

Question

作为ag-Grid 排序，将 opt.enablesorting 设置为 true，这将允许 header 次点击并显示排序图标并在网格内排序。

但是，我更喜欢在弹出窗口中手动设置 api.setSortModel window 而不是 header 点击。 所以我想通过某些方式禁用 header 次点击。 我尝试了一些方法来修复它，但其中任何一种都有效。

例如，我将 opt.enablesorting 设置为 false，header 点击排序被禁用。 但与此同时， api.setSortModel 也不起作用。

例如，我使用 headerCellRenderer 来自定义 headerCellTemplate，但也失败了。 因为当我点击 header 时出现了上下箭头。

有什么方法可以帮助我修复它吗？

Answer 1

列标题单击没有此类事件，因此您可以进行处理。 但是我发现使用列标题模板的默认模板的一个hack是：

<div class="ag-header-cell">
    <div id="agResizeBar" class="ag-header-cell-resize"></div>
    <span id="agMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
    <div id="agHeaderCellLabel" class="ag-header-cell-label">
        <span id="agSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>
        <span id="agSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>
        <span id="agNoSort" class="ag-header-icon ag-sort-none-icon"></span>
        <span id="agFilter" class="ag-header-icon ag-filter-icon"></span>
        <span id="agText" class="ag-header-cell-text"></span>
    </div>
</div>

如果需要，请保留相同的结构，但从第三个div中删除id =“ agHeaderCellLabel”使其成为

<div class="ag-header-cell">
    <div id="agResizeBar" class="ag-header-cell-resize"></div>
    <span id="agMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
    <div class="ag-header-cell-label">
        <span id="agSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>
        <span id="agSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>
        <span id="agNoSort" class="ag-header-icon ag-sort-none-icon"></span>
        <span id="agFilter" class="ag-header-icon ag-filter-icon"></span>
        <span id="agText" class="ag-header-cell-text"></span>
    </div>
</div>

这将阻止点击事件绑定

Answer 2

在较新的版本中（版本 27.2.0 是我正在使用的版本），删除 div 中的 ref="eLabel"