用於自定義 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>