import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>Virtual Scroll - Lazy Load</h2> <p>The virtual scroll can be used to display large amounts of records without paging.</p> <eui-datagrid style="height:250px" [virtualScroll]="true" [lazy]="true" [data]="data" [total]="total" [pageNumber]="pageNumber" [pageSize]="pageSize" [rowHeight]="rowHeight" (pageChange)="onPageChange($event)"> <eui-grid-column field="inv" title="Inv No"></eui-grid-column> <eui-grid-column field="name" title="Name"></eui-grid-column> <eui-grid-column field="amount" title="Amount" align="right"></eui-grid-column> <eui-grid-column field="price" title="Price" align="right"></eui-grid-column> <eui-grid-column field="cost" title="Cost" align="right"></eui-grid-column> <eui-grid-column field="note" title="Note"></eui-grid-column> </eui-datagrid> `, providers: [DataService] }) export class AppComponent { total: number = 0; pageNumber = 1; pageSize = 20; rowHeight = 28; data = []; constructor(public dataService: DataService){} ngAfterViewInit() { this.loadPage(this.pageNumber, this.pageSize); } onPageChange(event){ this.loadPage(event.pageNumber, event.pageSize); } loadPage(pageNumber: number, pageSize: number) { this.dataService.getData(pageNumber, pageSize).subscribe((data) => { this.total = data.total; this.pageNumber = data.pageNumber; this.data = data.rows; }); } }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/observable/of'; @Injectable() export class DataService { getData(pageNumber: number, pageSize: number) { let total = 100000; let data = []; let start = (pageNumber - 1) * pageSize; for(let i=start+1; i<=start + pageSize; i++){ let amount = Math.floor(Math.random()*1000); let price = Math.floor(Math.random()*1000); data.push({ inv: 'Inv No '+i, name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return Observable.of({ total: total, pageNumber: pageNumber, pageSize: pageSize, rows: data }); } }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);