具有下拉值和搜索按钮的表单,在搜索时将进行服务器调用,网格将填充数据。
网格加载正常,直到我添加了分页数据源。
最初它使用** start 作为1进行2次相同的服务器调用,然后单击next,它会加载网格中先前加载的数据。 每次单击下一步,它将加载上一次服务器调用中的json返回。 一旦达到最后,网格就会消失。 我在这做错了什么?**
HTML表单,一个类别下拉菜单和一个搜索按钮。
<div class="col-md-12">
<form [formGroup]="myForm" (ngSubmit)="searchIncident()" >
<label for="category">Category</label>
<select class="form-control"
(change)="getSubCategories($event.target.value)"
formControlName="catCode" >
<option value="select" selected disabled>--Select--</option>
<option *ngFor="let category of categoryMaster" value="{{category.catCode}}">{{category.catDesc}}</option>
</select>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<div class="col-md-12" *ngIf="rowData.length > 0">
<ag-grid-angular #agGrid style="width: 100%; height: 330px;" class="ag-fresh"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[datasource] = "dataSource"
enableColResize
enableSorting
enableFilter
rowSelection="single"
></ag-grid-angular>
</div>
加载网格的类型脚本,调用on submit searchIncident方法。
import { Component } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
import {GridOptions} from "ag-grid/main";
import {Http, Headers} from '@angular/http';
import * as AppUtils from '../common/app.utils';
export class ISearchComponent {
myForm: FormGroup;
rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();
gridOptions = <GridOptions>{
context: {},
rowModelType: 'pagination',
enableServerSideFilter: true,
paginationPageSize: 10
};
columnDefs:any[] = [
{headerName: 'Incident Id', field: 'incidentId'},
{headerName: 'Status', field: 'incidentStatus.value'},
{headerName: 'Category', field: 'categoryMast.catDesc'},
{headerName: 'Sub Category', field: 'subCategoryMast.subCatDesc'},
{headerName: 'Location', field: 'location.locName'},
{headerName: 'Time', field: 'incidentTime'},
{headerName: 'Delay(Hrs)', cellRenderer:this.getDelayInHours}
];
constructor(private masterDataService:MasterDataService,private http: Http) {
this.myForm = new FormGroup({
'catCode' : new FormControl()
});
}
dataSource = {
pageSize: 10,
getRows: (params: any) => {
console.log("here dataSource")
this.searchIncident(params.startRow, params.endRow); // returns json from server
var rowsThisPage = this.rowData;
var lastRow = -1;
// if (rowsThisPage.length <= params.endRow) {
// lastRow = rowsThisPage.length;
// }
params.successCallback(rowsThisPage, lastRow);
}
}
searchIncident(start:number, end:number){
if (!start) {
start = 1;
}
myJson['firstResult'] = start;
myJson.maxResult = this.gridOptions.paginationPageSize;
this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{
this.rowData = res.json().result;
}, err=>{
});
}
}
}