用于自定义 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>

Answer 2

OP 的解决方案有效，但您也可以使用比较器字段并提供您自己的函数。 该函数的第三个和第四个参数是节点，因此您可以访问任何列（文档）。 我已经用比较器替换了你的 valueGetter：

 var columnDefs = [{ field: 'rank' }, { headerName: 'custom', cellRenderer: customCellRenderer, comparator: customComparator }]; 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 customComparator(_valueA, _valueB, nodeA, nodeB) { return Number(nodeA.data.customData) - Number(nodeB.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>