ag-grid企业过滤器无法正常工作

时间:2016-09-20 13:31:24

标签: javascript ag-grid

这是我的javascript代码,我使用的是ag-grid。

abstract

但是,我收到错误: 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); } }; }); (不是ag-grid enterprise)。 但是,在此示例中:https://www.ag-grid.com/javascript-grid-virtual-paging/virtualPagingServerSide.html  {{3}}

他们只使用ag-grid企业并且正在使用它。为什么我的情况不起作用?

1 个答案:

答案 0 :(得分:0)

"正常模型"被引用的是rowModelType,而不是你是否在企业。您正在将rowModelType设置为'虚拟'。您引用的示例创建了一个名为setRowData的函数,但它实际上从未调用过api定义的setRowData函数。 Instead it uses 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);
        } 
    };
});