Ag-Grid企業過濾器不能正常工作

Question

這是我的JavaScript代碼，我正在使用Ag-grid。

var columnDefs = [ 
    {headerName: "CLIENT", field: "CLIENT_ACRONYM", width: 150, unSortIcon: true}, 
    {headerName: "SYM", field: "SYM", width: 150, unSortIcon: true, filter: 'set'}, 
    {headerName: "SECURITY ID", field: "SECURITY_ID", width: 150, unSortIcon: true, filter: 'set'}, 
    {headerName: "SIDE", field: "SIDE", width: 150, unSortIcon: true, filter: 'set'}, 
    {headerName: "ORDER Qty", field: "ORDER_QTY", width: 150, unSortIcon: true, cellStyle:{"text-align":"right"}}, 
    {headerName: "EXEC Qty", field: "EXEC_QTY", width: 120, unSortIcon: true, cellStyle:{"text-align":"right"}}, 
    {headerName: "ENTERING_TRADER", field: "ENTERING_TRADER", width: 150, unSortIcon: true}, 
    {headerName: "EXECUTING TRADER", field: "EXECUTING_TRADER", width: 150, unSortIcon: true}, 
    {headerName: "ORDER ID", field: "ORDER_ID", width: 150, unSortIcon: true, cellStyle:{"text-align":"center"}}, 
    {headerName: "URGENCY", field: "URGENCY", width: 150, unSortIcon: true}, 
    {headerName: "PARTICIPATION RATE", field: "PARTICIPATION_RATE", width: 150, unSortIcon: true}, 
    {headerName: "VOLUME LIMIT", field: "VOLUME_LIMIT", width: 150, unSortIcon: true}, 
    {headerName: "EXECUTION STYLE", field: "EXECUTION_STYLE", width: 150, unSortIcon: true}, 
    {headerName: "TOLERANCE", field: "TOLERANCE", width: 150, unSortIcon: true}, 
    {headerName: "CCY", field: "ORDER_CCY", width: 150, unSortIcon: true}, 
    {headerName: "ROOT ORDER ID", field: "ROOT_ORDER_ID", width: 150, unSortIcon: true, cellStyle:{"text-align":"right"}}, 
    {headerName: "COMPLIANCE ID", field: "COMPLIANCE_ID", width: 150, unSortIcon: true}, 
    {headerName: "CL ORD ID", field: "CL_ORD_ID", width: 150, unSortIcon: true}, 
    //{headerName: "Date", field: "date", width: 110, comparator: dateComparator} 



]; 




function dateComparator(date1, date2) { 
    var date1Number = monthToComparableNumber(date1); 
    var date2Number = monthToComparableNumber(date2); 

    if (date1Number===null && date2Number===null) { 
     return 0; 
    } 
    if (date1Number===null) { 
     return -1; 
    } 
    if (date2Number===null) { 
     return 1; 
    } 

    return date1Number - date2Number; 
} 

//2016-09-06 05:59:57.844 to 20160906055957844 
function monthToComparableNumber(date) { 
    if (date === undefined || date === null || date.length !== 10) { 
     return null; 
    } 

    var yearNumber = date.substring(0,4); 
    var monthNumber = date.substring(5,7); 
    var dayNumber = date.substring(8,10); 
    var hourNumber = date.substring(11,13); 
    var minuteNumber = date.substring(14,16); 
    var secondNumber = date.substring(16,18); 
    var milisecondNumber = date.substring(19,22); 

    var result = (yearNumber*10000000000000) + (monthNumber*100000000000) + (dayNumber*1000000000) + (hourNumber*10000000) + (minuteNumber*100000) + (secondNumber*1000) + milisecondNumber; 
    return result; 
} 



var gridOptions = { 
    columnDefs: columnDefs, 
    rowData: null, 
    enableSorting: true, 
    enableFilter: true, 
    enableColResize: true, 
    rowModelType: 'virtual', 
    paginationPageSize: 100, 
    paginationOverflowSize: 2, 
    maxConcurrentDatasourceRequests: 2, 
    paginationInitialRowCount: 1, 
    maxPagesInCache: 2, 
    enableServerSideSorting: true, 
    enableServerSideFilter: true, 
    enableColResize: true, 
    rowSelection: 'single', 
    rowDeselection: true 



}; 

function buyside() { 
    var filterApi = gridOptions.api.getFilterApi('SIDE'); 
    filterApi.selectNothing(); 
    filterApi.selectValue('Buy'); 
    //filterApi.selectValue('Great Britain'); 
    gridOptions.api.onFilterChanged(); 
} 

function sellside() { 
    var filterApi = gridOptions.api.getFilterApi('SIDE'); 
    filterApi.selectNothing(); 
    filterApi.selectValue('Sell'); 
    //filterApi.selectValue('Great Britain'); 
    gridOptions.api.onFilterChanged(); 
} 


function clearFilters() { 
    gridOptions.api.setFilterModel(null); 
    gridOptions.api.onFilterChanged(); 
} 




// setup the grid after the page has finished loading 
document.addEventListener('DOMContentLoaded', function() { 
    var gridDiv = document.querySelector('#myGrid'); 
    new agGrid.Grid(gridDiv, gridOptions); 

    // do http request to get our sample data - not using any framework to keep the example self contained. 
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls. 
    var jsondata = document.getElementById("jsonArray"); 
    //var jsondata = document.getElementById("jsonArray").innerText; 
    //var jsondataObj = JSON.parse(jsondata); 

    console.log(jsondata); 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.open('GET', '../dist/output3.json'); 
    httpRequest.send(); 
    httpRequest.onreadystatechange = function() { 
     if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
      var httpResult = JSON.parse(httpRequest.responseText); 


      function isNumeric(n) { 
       return !isNaN(parseFloat(n)) && isFinite(n); 
      } 

      var parsedData = httpResult.products.map(function(obj) { 
       return Object.keys(obj).reduce(function(memo, key) { 
        var value = obj[key]; 
        memo[key] = isNumeric(value) ? Number(value) : value; 

        return memo; 
       }, {}) 
      }) 

      console.log(parsedData); 

      gridOptions.api.setRowData(parsedData); 
     } 
    }; 
}); 

但是，我收到錯誤：cannot call setRowData unless using normal model（不是ag-grid企業）。 然而，在這個例子：https://www.ag-grid.com/javascript-grid-virtual-paging/ https://www.ag-grid.com/javascript-grid-virtual-paging/virtualPagingServerSide.html

他們只使用AG-電網企業和其工作。爲什麼它不適用於我的情況？

Answer 1

被提及的「正常模式」是rowModelType，而不是您是否在企業。您正在將rowModelType設置爲「虛擬」。您提到的示例創建了一個名爲setRowData的函數，但它實際上從未實際調用api定義的setRowData函數。 Instead it usesgridOptions.api.setDatasource()正如它在之前鏈接的示例中所解釋的那樣。

所以，你需要做出改變：

var gridOptions = { 
    columnDefs: columnDefs, 
    rowData: null, //null is the default value you could remove this 
    ... 
}; 
... 
// setup the grid after the page has finished loading 
document.addEventListener('DOMContentLoaded', function() { 

     ...yada yada yada... 

      console.log(parsedData); 

      gridOptions.api.setDatasource(parsedData); 
     } 
    }; 
});