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企业）， cannot call setRowData unless using normal model 。 但是，在此示例中： https ： //www.ag-grid.com/javascript-grid-virtual-paging/ https://www.ag-grid.com/javascript-grid-virtual-paging/virtualPagingServerSide.html

他们只使用ag-grid企业及其工作。 为什么我的情况不起作用？

Answer 1

引用的“正常模型”是rowModelType ，而不是您是否在企业中。 您将rowModelType设置为'virtual'。 您引用的示例创建了一个名为setRowData的函数，但它实际上从未调用过api定义的setRowData函数。 相反，它使用 gridOptions.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);
        } 
    };
});