Question

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

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

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

e.g。我使用headerCellRenderer来自定义headerCellTemplate，但也失败了。因为单击标题时会显示向上箭头。

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

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

这将阻止点击事件绑定

如何在ag-grid

1 个答案: