这是我的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企业并且正在使用它。为什么我的情况不起作用?
答案 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);
}
};
});