用于自定义 cellRenderer 数据的 ag-grid 行排序

Question

我正在尝试对包含自定义 HTML 的单元格数据实现列排序，所以我假设我需要实现一个自定义函数来覆盖正常的排序例程并将其指向原始值而不是 HTML 呈现的输出。

我无法从 ag-grid 文档中收集我如何执行此操作，我看到https://www.ag-grid.com/javascript-grid-sorting/描述了我的问题的解决方案，但解释和示例代码并没有帮助我解决这个问题。看起来我需要一个比较器，但是在他们关于 dateComparator 的示例中，尚不清楚如何将参数 (date1, date2) 输入到自定义函数中。

我在下面添加了一些示例代码来显示这个问题，包括一个比较器函数，当按下列标题对行进行排序时调用该函数。

var columnDefs = [{ field: 'rank' }, { headerName: 'custom', cellRenderer: customCellRenderer, comparator: customNumberComparator }];

var rowData = [{ 'rank': 1, 'customData': '3.64' }, { 'rank': 2, 'customData': '-1.56' }, { 'rank': 3, 'customData': '11.21' }, { 'rank': 4, 'customData': '0.36' }, { 'rank': 5, 'customData': '45.1' }, { 'rank': 6, 'customData': '-34.2' }];

function customCellRenderer () {}

customCellRenderer.prototype.init = function ( params ) {
    this.eGui = document.createElement ( 'span' );
    this.eGui.textContent = params.data.customData + '%';

    if ( parseFloat( params.data.customData ) < 0 ) {
        this.eGui.setAttribute( 'style', 'color: red');
    } else {
        this.eGui.setAttribute( 'style', 'color: green');
    }
}

customCellRenderer.prototype.getGui = function () {
    return this.eGui;
}

// TEST FUNCTION TO OUTPUT params data
function customNumberComparator ( params ) {
  const log = document.getElementById('log');
  
  if (params === undefined ) {
      log.textContent = 'undefined';
    } else {
      log.textContent = params.data;
    }
}

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    enableSorting: true
}

document.addEventListener("DOMContentLoaded", function() {
    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
});

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>

<div id="myGrid" style="height: 150px;width:500px" class="ag-theme-fresh"></div>

<span id="log">customNumberComparator output here</span>

Answer 1

回答我自己的问题：

解决方案是在valueGetter列定义的属性内，这是一个自定义函数调用，用于为单元格提供 sort 可以使用的值。

我在下面添加了代码以显示添加valueGetter: PercentValueGetter到 columnDefs，然后是一个PercentValueGetter函数，当

还有valueSetter valueFormatter并valueParser允许进一步定制。

https://www.ag-grid.com/javascript-grid-value-setters/

var columnDefs = [{ field: 'rank' }, { headerName: 'custom', cellRenderer: customCellRenderer, valueGetter: PercentValueGetter }];

var rowData = [{ 'rank': 1, 'customData': '3.64' }, { 'rank': 2, 'customData': '-1.56' }, { 'rank': 3, 'customData': '11.21' }, { 'rank': 4, 'customData': '0.36' }, { 'rank': 5, 'customData': '45.1' }, { 'rank': 6, 'customData': '-34.2' }];

function customCellRenderer () {}

customCellRenderer.prototype.init = function ( params ) {
    this.eGui = document.createElement ( 'span' );
    this.eGui.textContent = params.data.customData + '%';

    if ( parseFloat( params.data.customData ) < 0 ) {
        this.eGui.setAttribute( 'style', 'color: red');
    } else {
        this.eGui.setAttribute( 'style', 'color: green');
    }
}

customCellRenderer.prototype.getGui = function () {
    return this.eGui;
}

function PercentValueGetter ( params ) {
  return params.data.customData;
}

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    enableSorting: true
}

document.addEventListener("DOMContentLoaded", function() {
    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
});

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>

<div id="myGrid" style="height: 150px;width:500px" class="ag-theme-fresh"></div>