在[服务器端模型分页] [1]中提供了ag-grid文档示例。 它说
但是在代码中我找不到startRow。 这是组件:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine-dark.css';
@Component({
selector: 'my-app',template: `
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-alpine-dark"
[modules]="modules"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowModelType]="rowModelType"
[pagination]="true"
[paginationPageSize]="paginationPageSize"
[cacheBlockSize]="cacheBlockSize"
[animateRows]="true"
[rowData]="rowData"
(gridReady)="onGridReady($event)"></ag-grid-angular>
`,})
export class AppComponent {
private gridApi;
private gridColumnApi;
public modules: Module[] = [
ServerSideRowModelModule,MenuModule,ColumnsToolPanelModule,];
private columnDefs;
private defaultColDef;
private rowModelType;
private paginationPageSize;
private cacheBlockSize;
private rowData: [];
constructor(private http: HttpClient) {
this.columnDefs = [
{
field: 'id',maxWidth: 75,},{
field: 'athlete',minWidth: 190,{ field: 'age' },{ field: 'year' },{ field: 'gold' },{ field: 'silver' },{ field: 'bronze' },];
this.defaultColDef = {
flex: 1,minWidth: 90,resizable: true,};
this.rowModelType = 'serverSide';
this.paginationPageSize = 10;
this.cacheBlockSize = 10;
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.http
.get(
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-
docs/src/olympicWinners.json'
)
.subscribe(data => {
var idSequence = 1;
data.forEach(function(item) {
item.id = idSequence++;
});
var fakeServer = new FakeServer(data);
var datasource = new ServerSideDatasource(fakeServer);
params.api.setServerSideDatasource(datasource);
});
}
}
function ServerSideDatasource(server) {
return {
getRows: function(params) {
console.log('[Datasource] - rows requested by grid: ',params.request);
var response = server.getData(params.request);
setTimeout(function() {
if (response.success) {
params.successCallback(response.rows,response.lastRow);
} else {
params.failCallback();
}
},200);
},};
}
我的理解是:gridReady事件触发onGridReady方法,将事件作为参数传递,该方法在我们称为“参数”的方法中。 “参数”包含请求。但是请求如何获取startRow?
这是FakeServer代码:
// This fake server uses http://alasql.org/ to mimic how a real server
// might generate sql queries from the Server-Side Row Model request.
// To keep things simple it does the bare minimum to support the example.
function FakeServer(allData) {
alasql.options.cache = false;
return {
getData: function(request) {
var results = executeQuery(request);
return {
success: true,rows: results,lastRow: getLastRowIndex(request,results),};
},getCountries: function() {
var sql = 'SELECT disTINCT country FROM ? ORDER BY country ASC';
return alasql(sql,[allData]).map(function(x) {
return x.country;
});
},};
function executeQuery(request) {
var sql = buildsql(request);
console.log('[FakeServer] - about to execute query:',sql);
return alasql(sql,[allData]);
}
function buildsql(request) {
return (
'SELECT * FROM ?' +
wheresql(request) +
orderBysql(request) +
limitsql(request)
);
}
function wheresql(request) {
var whereParts = [];
var filterModel = request.filterModel;
if (filterModel) {
Object.keys(filterModel).forEach(function(columnKey) {
var filter = filterModel[columnKey];
if (filter.filterType === 'set') {
whereParts.push(
columnKey + " IN ('" + filter.values.join("','") + "')"
);
return;
}
console.log('unsupported filter type: ' + filter.filterType);
});
}
if (whereParts.length > 0) {
return ' WHERE ' + whereParts.join(' AND ');
}
return '';
}
function orderBysql(request) {
var sortModel = request.sortModel;
if (sortModel.length === 0) return '';
var sorts = sortModel.map(function(s) {
return s.colId + ' ' + s.sort.toupperCase();
});
return ' ORDER BY ' + sorts.join(',');
}
function limitsql(request) {
var blockSize = request.endRow - request.startRow;
return ' LIMIT ' + (blockSize + 1) + ' OFFSET ' + request.startRow;
}
function getLastRowIndex(request,results) {
if (!results || results.length === 0) {
return request.startRow;
}
var currentLastRow = request.startRow + results.length;
return currentLastRow <= request.endRow ? currentLastRow : -1;
}
}
哪个事件在网格排序上被触发?
[1]:https://www.ag-grid.com/javascript-grid-server-side-model-pagination/