【问题标题】:How to sort column in AG-Grid with empty Header Name如何使用空标题名称对 AG-Grid 中的列进行排序
【发布时间】: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(特别是隐藏的标题文本)

【问题讨论】:

    标签: angular ag-grid ag-grid-angular


    【解决方案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 时提出解决方法?就我而言,我在标题中呈现一个图标。这样做会禁用排序功能
    猜你喜欢
    • 2021-04-13
    • 2016-06-19
    • 2021-12-16
    • 1970-01-01
    • 2020-02-26
    • 2019-06-25
    • 2019-08-23
    • 2021-11-10
    • 1970-01-01
    相关资源
    最近更新 更多