如何在ag-grid中禁用标题点击排序答案

【问题标题】：how to disable header clicks sort in ag-grid如何在ag-grid中禁用标题点击排序
【发布时间】：2022-05-06 01:45:07
【问题描述】：

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

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

例如我将 opt.enablesorting 设置为 false，标题点击排序被禁用。但与此同时，api.setSortModel 也不能正常工作。

例如我用headerCellRenderer自定义headerCellTemplate，也失败了。因为单击标题时会显示向上向下的箭头。

有什么办法可以帮我解决吗？

【问题讨论】：

默认情况下应该关闭排序，如果您的 gridOptions 中有enableSorting: true，则将其删除。 - 除此之外，我们还需要您为我们提供一些代码来帮助您调试，更好的是，将您的代码放在 jsfiddle 或类似的东西中。

标签： javascript sorting ag-grid

【解决方案1】：

没有这样的列标题单击事件，因此您可以处理它。但我发现一个使用列标题模板默认模板的技巧是：

<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>

这将阻止点击事件绑定

【讨论】：

【解决方案2】：

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

【讨论】：