如何使用空标题名称对 AG-Grid 中的列进行排序

Posted 2023-03-28

【中文标题】如何使用空标题名称对 AG-Grid 中的列进行排序

【英文标题】：How to sort column in AG-Grid with empty Header Name

【发布时间】：2019-12-03 12:01:54

【问题描述】：

如何在 AG-Grid 中使用空 Header 对列进行排序？

正在传递的colDef：

var columnDefs = [
    headerName: " ",
    sortable: true,
    suppressToolPanel: true,
    field: "  "
];

Plunker：https://plnkr.co/edit/ujdHr9UlcOuP3mHw7uam?p=preview 第一列的标题名称（运动员）被标记为空字符串。单击其标题时，它不会对该列进行排序。

我在这里检查过，但没有说明是否标题名称不需要为空以启用排序。 ：https://www.ag-grid.com/javascript-grid-column-properties/

================================================ ==============================

在检查 @UniCoder 的答案后更新了 Plunker： https://plnkr.co/edit/wQadPgAgBWeFbLc4MuKu?p=preview（特别是隐藏的标题文本）

【参考方案1】：

解决方案 1： 保持 headerName 为 "" 并给出字段："name"

var columnDefs = [
          headerName: "",
          field: "name",
          width: 150,
          pinned: true
]

解决方案 2： 如下所示使用 headerClass 并将该类不透明度设置为 0。

var columnDefs = [
     headerName: "header-name",
     sortable: true,
     suppressToolPanel: true,
     headerClass: 'hide-header',
     field: "  "
];

//在css文件中

.hide-header
  opacity: 0;

codepens link for working example

【讨论】：

感谢您的提示。解决方案 1 对我不起作用。虽然解决方案 2 有效。我会将更新的 plunker 粘贴到您的建议中，以便任何寻找答案的人都能快速找到。

好主意，但它不适用于非平凡的案例。您能否在实施 headerComponentParams 时提出解决方法？就我而言，我在标题中呈现一个图标。这样做会禁用排序功能