angular - 如何更改 ag Grid 中的排序图标，如 angular Font Awesome 图标中的 Angular 箭头图标？

Question

this.columnDefs = [
  {
    headerName: '',
    field: 'id',
    maxWidth: 50,
    cellRenderer: 'selectRenderer'
  },
  {
    headerName: 'Project Code',
    field: 'projectCode',
    minWidth: 75,
    sortable: true
  },
  {
    headerName: 'Project/Sub-Project Name',
    field: 'projectName',
    minWidth: 300,
    sortable: true
  },
  {
    headerName: 'Start Date',
    field: 'startDate',
    minWidth: 100,
    sortable: true
  },
  { headerName: 'End Date', field: 'endDate', minWidth: 95 },
  {
    headerName: 'Current Budget',
    field: 'currentBudget',
    minWidth: 130,
    cellRenderer: function(param) {
      return `${param.data.currentBudget} USD`;
    }
  },
  { headerName: '', field: '', cellRenderer: 'editRenderer', maxWidth: 100 }
];

这是我对表的列定义。我在必要的列中使用了 sortable as true。我需要更改表中排序的默认图标类型。

Answer 1

您可以使用列定义的 icons 属性来设置自定义图标以在列级别进行排序，或者使用 gridOptions 的 icons 属性来应用于所有列。如果在网格选项和列定义中都定义了列定义，则将使用列定义。

  this.icons = {
    sortAscending: '<i class="fa fa-arrow-down "/>',
    sortDescending: '<i class="fa fa-arrow-up"/>',
  };

像这样在 ag-grid-angular 标签内的模板中添加 [icons]="icons"

  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [icons]="icons"
  </ag-grid-angular>

此外，您还必须导入 fontawesome css 文件才能使其正常工作。

检查此链接以获取文档 - https://www.ag-grid.com/javascript-grid-icons/