Ag网格分页从服务器

时间:2017-03-08 10:36:56

标签: angularjs ag-grid

具有下拉值和搜索按钮的表单,在搜索时将进行服务器调用,网格将填充数据。

网格加载正常,直到我添加了分页数据源。

网格问题

最初它使用** 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=>{             
         });

    }
}

}

0 个答案:

没有答案