示例
分页
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
//
import * as wijmo from '@grapecity/wijmo';
import * as grid from '@grapecity/wijmo.grid';
import * as odata from '@grapecity/wijmo.odata';
//
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create a CollectionView with 20 items per page
let view = new wijmo.CollectionView(getData(), {
pageSize: 6,
pageChanged: updateCurrentPage
});
//
// update pager status
view.onPageChanged();
function updateCurrentPage() {
let curr = wijmo.format('Page {index:n0} of {cnt:n0}', {
index: view.pageIndex + 1,
cnt: view.pageCount
});
document.querySelector('#spanCurrent').textContent = curr;
}
//
// implement pager
document.querySelector('#pager').addEventListener('click', e => {
let btn = wijmo.closest(e.target, 'button'), id = btn ? btn.id : '';
//
switch (id) {
case 'btnFirst':
view.moveToFirstPage();
break;
case 'btnPrev':
view.moveToPreviousPage();
break;
case 'btnNext':
view.moveToNextPage();
break;
case 'btnLast':
view.moveToLastPage();
break;
}
});
//
// show the data in a grid
let flex = new grid.FlexGrid('#theGrid', {
itemsSource: view,
alternatingRowStep: 0,
headersVisibility: 'Column'
});
//
// use ODataCollectionView to demonstrate server-based paging
let odataView = new odata.ODataCollectionView('https://services.odata.org/Northwind/Northwind.svc', 'Customers', {
pageSize: 6,
pageOnServer: true,
sortOnServer: true,
pageChanged: updateCurrentPageOd,
loaded: updateCurrentPageOd
});
//
// update pager status
odataView.onPageChanged();
function updateCurrentPageOd() {
let curr = wijmo.format('Page {index:n0} of {cnt:n0}', {
index: odataView.pageIndex + 1,
cnt: odataView.pageCount
});
document.querySelector('#spanCurrentOd').textContent = curr;
}
//
// implement pager
document.querySelector('#pagerOd').addEventListener('click', e => {
let btn = wijmo.closest(e.target, 'button'), id = btn ? btn.id : '';
//
switch (id) {
case 'btnFirstOd':
odataView.moveToFirstPage();
break;
case 'btnPrevOd':
odataView.moveToPreviousPage();
break;
case 'btnNextOd':
odataView.moveToNextPage();
break;
case 'btnLastOd':
odataView.moveToLastPage();
break;
}
});
//
// show the OData in a grid
let odataFlex = new grid.FlexGrid('#theGridOd', {
itemsSource: odataView,
alternatingRowStep: 0,
headersVisibility: 'Column',
isReadOnly: true // the Northwind sample service is read-only!
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity CollectionView Paging</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<h4>
Client-Side Paging:
</h4>
<div id="theGrid">
</div>
<div id="pager">
<button id="btnFirst" class="btn"><span class="wj-glyph-step-backward"></span></button>
<button id="btnPrev" class="btn"><span class="wj-glyph-left"></span></button>
<span id="spanCurrent"></span>
<button id="btnNext" class="btn"><span class="wj-glyph-right"></span></button>
<button id="btnLast" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>
<br />
<h4>
Server-Side Paging:
</h4>
<div id="theGridOd">
</div>
<div id="pagerOd">
<button id="btnFirstOd" class="btn"><span class="wj-glyph-step-backward"></span></button>
<button id="btnPrevOd" class="btn"><span class="wj-glyph-left"></span></button>
<span id="spanCurrentOd"></span>
<button id="btnNextOd" class="btn"><span class="wj-glyph-right"></span></button>
<button id="btnLastOd" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>
</div>
</body>
</html>
export function getData() {
let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia'], data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
//
return data;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
//
import * as wijmo from '@grapecity/wijmo';
import * as odata from '@grapecity/wijmo.odata';
//
import { Component, Inject, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
view: wijmo.CollectionView;
odataView: odata.ODataCollectionView;
//
constructor(@Inject(DataService) private dataService: DataService) {
// create a CollectionView with 20 items per page
this.view = new wijmo.CollectionView(dataService.getData(), {
pageSize: 6
});
//
// use ODataCollectionView to demonstrate server-based paging
this.odataView = new odata.ODataCollectionView('https://services.odata.org/Northwind/Northwind.svc', 'Customers', {
pageSize: 6,
pageOnServer: true,
sortOnServer: true
});
}
//
updateViewPager(e: Event) {
let btn = wijmo.closest(e.target, 'button'),
id = btn ? (<any>btn).id : '';
//
switch (id) {
case 'btnFirst':
this.view.moveToFirstPage();
break;
case 'btnPrev':
this.view.moveToPreviousPage();
break;
case 'btnNext':
this.view.moveToNextPage();
break;
case 'btnLast':
this.view.moveToLastPage();
break;
}
}
//
updateOdataViewPager(e: Event) {
let btn = wijmo.closest(e.target, 'button'),
id = btn ? (<any>btn).id : '';
//
switch (id) {
case 'btnFirstOd':
this.odataView.moveToFirstPage();
break;
case 'btnPrevOd':
this.odataView.moveToPreviousPage();
break;
case 'btnNextOd':
this.odataView.moveToNextPage();
break;
case 'btnLastOd':
this.odataView.moveToLastPage();
break;
}
}
}
//
@NgModule({
imports: [WjGridModule, BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity CollectionView Paging</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<h4>
Client-Side Paging:
</h4>
<wj-flex-grid [itemsSource]="view" [alternatingRowStep]="0" [headersVisibility]="'Column'">
</wj-flex-grid>
<div (click)="updateViewPager($event)">
<button id="btnFirst" class="btn"><span class="wj-glyph-step-backward"></span></button>
<button id="btnPrev" class="btn"><span class="wj-glyph-left"></span></button>
Page {{ view.pageIndex + 1 | number:0 }} of {{ view.pageCount | number:0 }}
<button id="btnNext" class="btn"><span class="wj-glyph-right"></span></button>
<button id="btnLast" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>
<br />
<h4>
Server-Side Paging:
</h4>
<wj-flex-grid [itemsSource]="odataView" [alternatingRowStep]="0" [headersVisibility]="'Column'" [isReadOnly]="true">
</wj-flex-grid>
<div (click)="updateOdataViewPager($event)">
<button id="btnFirstOd" class="btn"><span class="wj-glyph-step-backward"></span></button>
<button id="btnPrevOd" class="btn"><span class="wj-glyph-left"></span></button>
Page {{ odataView.pageIndex + 1 | number:0 }} of {{ odataView.pageCount | number:0 }}
<button id="btnNextOd" class="btn"><span class="wj-glyph-right"></span></button>
<button id="btnLastOd" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>
</div>
import { Injectable } from '@angular/core';
//
@Injectable()
export class DataService {
getData() {
let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia'],
data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
//
return data;
}
}
<template>
<div class="container-fluid">
<h4>
Client-Side Paging:
</h4>
<wj-flex-grid :items-source="view" :show-alternating-rows=false headers-visibility="Column">
</wj-flex-grid>
<div v-on:click="updateViewPager($event)">
<button id="btnFirst" class="btn"><span class="wj-glyph-step-backward"></span></button>
<button id="btnPrev" class="btn"><span class="wj-glyph-left"></span></button>
Page {{ view.pageIndex + 1 | number:0 }} of {{ view.pageCount | number:0 }}
<button id="btnNext" class="btn"><span class="wj-glyph-right"></span></button>
<button id="btnLast" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>
<br />
<h4>
Server-Side Paging:
</h4>
<wj-flex-grid :items-source="odataView" :show-alternating-rows=false headers-visibility="Column" :is-read-only=true>
</wj-flex-grid>
<div v-on:click="updateOdataViewPager($event)">
<button id="btnFirstOd" class="btn"><span class="wj-glyph-step-backward"></span></button>
<button id="btnPrevOd" class="btn"><span class="wj-glyph-left"></span></button>
Page {{ odataView.pageIndex + 1 | number:0 }} of {{ odataView.pageCount | number:0 }}
<button id="btnNextOd" class="btn"><span class="wj-glyph-right"></span></button>
<button id="btnLastOd" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>
</div>
</template>
<script>
import "bootstrap.css";
import "@grapecity/wijmo.styles/wijmo.css";
import Vue from 'vue';
import * as wijmo from '@grapecity/wijmo';
import { getData } from './data';
import { WjGridModule } from '@grapecity/wijmo.vue2.grid';
import * as odata from '@grapecity/wijmo.odata';
new Vue({
el: '#app',
data: function(){
return {
view: new wijmo.CollectionView(getData(), {
pageSize: 6
}),
//
// use ODataCollectionView to demonstrate server-based paging
odataView: new odata.ODataCollectionView('https://services.odata.org/Northwind/Northwind.svc', 'Customers', {
pageSize: 6,
pageOnServer: true,
sortOnServer: true
})
}
},
methods:{
updateViewPager(e) {
let btn = wijmo.closest(e.target, 'button'),
id = btn ? btn.id : '';
//
switch (id) {
case 'btnFirst':
this.view.moveToFirstPage();
break;
case 'btnPrev':
this.view.moveToPreviousPage();
break;
case 'btnNext':
this.view.moveToNextPage();
break;
case 'btnLast':
this.view.moveToLastPage();
break;
}
},
//
updateOdataViewPager(e) {
let btn = wijmo.closest(e.target, 'button'),
id = btn ? btn.id : '';
//
switch (id) {
case 'btnFirstOd':
this.odataView.moveToFirstPage();
break;
case 'btnPrevOd':
this.odataView.moveToPreviousPage();
break;
case 'btnNextOd':
this.odataView.moveToNextPage();
break;
case 'btnLastOd':
this.odataView.moveToLastPage();
break;
}
}
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity CollectionView Paging</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
export function getData(callback, delay) {
let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia'],
data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
//
return data;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as wijmo from "@grapecity/wijmo";
import * as wjGrid from "@grapecity/wijmo.react.grid";
import * as odata from '@grapecity/wijmo.odata';
import { getData } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.updateViewPager = (target) => {
let btn = wijmo.closest(target, 'button'), id = btn ? btn.id : '';
switch (id) {
case 'btnFirst':
this.state.view.moveToFirstPage();
break;
case 'btnPrev':
this.state.view.moveToPreviousPage();
break;
case 'btnNext':
this.state.view.moveToNextPage();
break;
case 'btnLast':
this.state.view.moveToLastPage();
break;
}
this.setState({
viewIndex: this.state.view.pageIndex + 1,
viewCount: this.state.view.pageCount
});
};
this.updateOdataViewPager = (target) => {
let btn = wijmo.closest(target, 'button'), id = btn ? btn.id : '';
switch (id) {
case 'btnFirstOd':
this.state.odataView.moveToFirstPage();
break;
case 'btnPrevOd':
this.state.odataView.moveToPreviousPage();
break;
case 'btnNextOd':
this.state.odataView.moveToNextPage();
break;
case 'btnLastOd':
this.state.odataView.moveToLastPage();
break;
}
this.setState({
odIndex: this.state.odataView.pageIndex + 1,
odCount: this.state.odataView.pageCount
});
};
let view = new wijmo.CollectionView(getData(), { pageSize: 6 }), odataView = new odata.ODataCollectionView('https://services.odata.org/Northwind/Northwind.svc', 'Customers', {
pageSize: 6,
pageOnServer: true,
sortOnServer: true
});
this.state = {
view: view,
// use ODataCollectionView to demonstrate server-based paging
odataView: odataView,
viewIndex: view.pageIndex + 1,
viewCount: view.pageCount,
odIndex: odataView.pageIndex + 1,
odCount: odataView.pageCount
};
odataView.loaded.addHandler((e) => {
this.setState({
odCount: odataView.pageCount
});
});
}
;
render() {
return <div className="container-fluid">
<h4>
Client-Side Paging:
</h4>
<wjGrid.FlexGrid itemsSource={this.state.view} showAlternatingRows={false} headersVisibility="Column"></wjGrid.FlexGrid>
<div onClick={e => this.updateViewPager(e.target)}>
<button id="btnFirst" className="btn"><span className="wj-glyph-step-backward"></span></button>
<button id="btnPrev" className="btn"><span className="wj-glyph-left"></span></button>
Page {this.state.viewIndex} of {this.state.viewCount}
<button id="btnNext" className="btn"><span className="wj-glyph-right"></span></button>
<button id="btnLast" className="btn"><span className="wj-glyph-step-forward"></span></button>
</div>
<br />
<h4>
Server-Side Paging:
</h4>
<wjGrid.FlexGrid itemsSource={this.state.odataView} showAlternatingRows={false} headersVisibility="Column" isReadOnly={true}></wjGrid.FlexGrid>
<div onClick={e => this.updateOdataViewPager(e.target)}>
<button id="btnFirstOd" className="btn"><span className="wj-glyph-step-backward"></span></button>
<button id="btnPrevOd" className="btn"><span className="wj-glyph-left"></span></button>
Page {this.state.odIndex} of {this.state.odCount}
<button id="btnNextOd" className="btn"><span className="wj-glyph-right"></span></button>
<button id="btnLastOd" className="btn"><span className="wj-glyph-step-forward"></span></button>
</div>
</div>;
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AutoComplete</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
export function getData() {
let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece', 'Spain', 'Portugal', 'Australia'], data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
//
return data;
}
USA - International
Japan
South
Korea