在[服务器端模型分页] [1]中提供了ag-grid文档示例。 它说
请求中的startRow和endRow属性由 服务器执行分页
但是在代码中我找不到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/