单击页面上的搜索按钮将返回服务器调用的结果,并应在 ag 网格中显示该结果。每次点击分页详细信息,服务器只会向客户端返回那么多记录。
实施了 ag 网格,但单击搜索后网格未加载。你能帮我弄清楚我做错了什么吗?
这是 html、网格部分和搜索按钮。
<form [formGroup]="myForm" >
<div>
<div class="panel-body">
<div class="row col-md-12">
<div class="form-group">
<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>
</div>
</div>
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</form>
</div>
<div class="col-md-12" *ngIf="rowData.length > 0">
<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData"
[datasource] = "dataSource"
enableColResize
enableSorting
enableFilter
rowSelection="single"
></ag-grid-angular>
</div>
零件
export class ISearchComponent {
myForm: FormGroup;
rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();
gridOptions = <GridOptions>{
context: {},
rowModelType: 'pagination',
enableServerSideFilter: true,
paginationPageSize: 10
};
//defining the headers
columnDefs:any[] = [
{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);
}
}
//服务器调用并返回json数据。
searchIncident(start:number, end:number){
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;
console.log("@@@@" +JSON.stringify(this.rowData));
}, err=>{
});
}
}
尝试过的解决方案(不工作)
在搜索按钮上调用网格点击这样
private search() {
this.gridOptions.api.setDatasource(this.dataSource);
}
我添加了数据源以启用服务器端分页,那么如何调用该数据源?
对 ag-grid 分页有什么帮助吗?如何加载数据源?
添加了 plunker http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&p=preview