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 }
];

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

Answer 1

您可以使用列定义的icons属性来设置要在列级别上排序的自定义图标，也可以使用gridOptions的icons属性来应用于所有列。如果同时在网格选项和列定义中定义，则将使用列定义。

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

在[icons]="icons"标记内的模板中添加ag-grid-angular

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

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

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

如何更改agGrid中的排序图标，例如角形字体图标中的角箭头图标？

1 个答案: