Question

我正在使用AgGrid和ag-grid-angular 15.0.0

我的所有专栏都是可排序的。 Ag-grid在每个标题中打印一个数字，表示排序顺序。怎么隐藏这个？我正在使用suppressMultiSort = true，因为我只想按单列排序。

编辑：

如果只有1列可以排序，则不会打印数字。但是如果可以对多于1个进行排序，则agGrid会在标题中显示这些数字。

此外，一旦我点击任何标题触发排序，数字就会消失..

非常感谢任何帮助。

提前致谢！

Answer 1

我可以看到你发帖中有很多问题（以及你有困惑:)）。

<强> 1。 ＆＃34;如果只有1列可以排序，则不会打印数字。但如果可以对多于1个进行排序，则agGrid会在标题中显示这些数字。＆＃34;

如果您想启用多项并且不想查看指示排序顺序的数字，那么您可以使用CSS执行此操作。

检查此插件：ag-grid Multi Column Sort - hide sortorder numbers

.ag-header-cell-label .ag-header-icon.ag-sort-order {
  display: none
}

<强> 2。 ＆＃34;此外，一旦我点击任何标题触发排序，数字就会消失。＆＃34;

按 Ctrl 单击列时，多列上的

ag-grid排序有效。
如果已存在多列排序，并且如果单击任何其他列而没有 Ctrl ，则旧列排序将消失，并且将替换为您单击的最后一列。

第3。如果要禁用多重排序，则需要在ag-grid元素

上设置以下属性

[suppressMultiSort]="true"

<强> 4。 multiSortKey可以更改 - 您需要将其作为以下属性提及

multiSortKey = "ctrl";

你可以在我提供的Plunk中看到。

希望这有帮助。

Answer 2

最简单的方法是覆盖ag-grid使用的默认css标头模板。

默认标题CSS：

<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">
        <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>
        <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
        <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>
    </div>
</div>

请参阅此参考文献link

例如，如果我看到下面标题的排序顺序指示符。我将在我的打字稿代码中删除这样的默认顺序指示符：

headerComponentParams = 
    '<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">' +          
    '    <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>';  


this.columnDefs = [
        {
          headerName: 'Name',
          field: 'name',
          fieldKey: 'name',
          width:100,          
          headerComponentParams: { template:this.headerComponentParams}        
        } ]

您会注意到，我已经在模板代码中删除了范围标签“ eSortOrder”。将相同的方法应用于要删除其排序顺序引用的其他列。处理CSS模板还使您可以操纵标题显示。有关更多信息，请参见参考链接。

如何在Ag-Grid中隐藏排序顺序指示器？

2 个答案: