示例
弹出列选择器
您可以使用表格的 columns 属性，ListBox 控件和Wijmo的 showPopup 和 hidePopup 方法轻松实现列选择器UI.
例如，下面的表格以自动生成的列集开始。 点击左上角单元格上的齿轮图标以显示 ListBox，您可以在其中选择要显示的列.
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import { showPopup, hidePopup, hasClass } from '@grapecity/wijmo';
import { ListBox } from '@grapecity/wijmo.input';
import { FlexGrid } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// generate some random data
var data = [], countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'], colors = ['Black', 'White', 'Red', 'Green', 'Blue'], dt = new Date();
for (var i = 0; i < 100; i++) {
var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length);
var item = {
id: i,
start: date,
end: date,
country: countries[countryId],
product: products[productId],
color: colors[colorId],
countryId: countryId,
productId: productId,
colorId: colorId,
amount1: Math.random() * 10000 - 5000,
amount2: Math.random() * 10000 - 5000,
amount3: Math.random() * 10000 - 5000,
amount4: Math.random() * 10000 - 5000,
amount5: Math.random() * 10000 - 5000,
discount: Math.random() / 4,
active: i % 4 == 0
};
data.push(item);
}
// create the grid
var theGrid = new FlexGrid('#theGrid', {
itemsSource: data,
formatItem: function (s, e) {
if (e.panel == s.topLeftCells) {
e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
}
}
});
// create the column picker
var theColumnPicker = new ListBox('#theColumnPicker', {
itemsSource: theGrid.columns,
checkedMemberPath: 'visible',
displayMemberPath: 'header',
lostFocus: function () {
hidePopup(theColumnPicker.hostElement);
}
});
// show the column picker when the user clicks the top-left cell
var ref = theGrid.hostElement.querySelector('.wj-topleft');
ref.addEventListener('mousedown', function (e) {
if (hasClass(e.target, 'column-picker-icon')) {
showPopup(theColumnPicker.hostElement, ref, false, true, false);
theColumnPicker.focus();
e.preventDefault();
}
});
// save/restore layout buttons
document.getElementById('btnSave').addEventListener('click', function () {
localStorage.setItem('myLayout', theGrid.columnLayout);
});
document.getElementById('btnRestore').addEventListener('click', function () {
var layout = localStorage.getItem('myLayout');
if (layout) {
theGrid.columnLayout = layout;
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexGrid Column Picker</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">
<div id="theGrid"></div>
<div style="display:none">
<div id="theColumnPicker" class="column-picker"></div>
</div>
<p>
You can use the grid's <b>columnLayout</b> property to allow users
to save and restore column layouts. Click the buttons below
to see how this works:</p>
<button id="btnSave" class="btn btn-default">
Save Layout
</button>
<button id="btnRestore" class="btn btn-default">
Restore Layout
</button>
</div>
</body>
</html>
.wj-flexgrid {
max-height: 300px;
margin: 10px 0;
}
.column-picker {
columns: 3;
padding: 12px;
margin-left: 12px;
margin-top: 26px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.column-picker-icon {
cursor: pointer;
color: #FF8754;
margin: 3px;
}
body {
margin-bottom: 20px;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import * as wjcCore from '@grapecity/wijmo';
import * as wjcInput from '@grapecity/wijmo.input';
import * as wjcGrid from '@grapecity/wijmo.grid';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
data: any[];
// references FlexGrid named 'flex' in the view
@ViewChild('flex') flex: wjcGrid.FlexGrid;
@ViewChild('columnPicker') columnPicker: wjcInput.ListBox;
// DataSvc will be passed by derived classes
constructor() {
this.data = this._getData();
}
ngOnInit() {
if (this.flex) {
this.flex.formatItem.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) => {
if (e.panel == s.topLeftCells) {
e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
}
});
// show the column picker when the user clicks the top-left cell
let ref = this.flex.hostElement.querySelector('.wj-topleft');
ref.addEventListener('mousedown', (e) => {
if (wjcCore.hasClass(<Element>e.target, 'column-picker-icon')) {
wjcCore.showPopup(this.columnPicker.hostElement, ref, false, true, false);
this.columnPicker.focus();
e.preventDefault();
}
});
}
}
ngAfterViewInit() {
if (this.flex) {
this.columnPicker.itemsSource = this.flex.columns;
this.columnPicker.checkedMemberPath = 'visible';
this.columnPicker.displayMemberPath = 'header';
this.columnPicker.lostFocus.addHandler(() => {
wjcCore.hidePopup(this.columnPicker.hostElement);
});
}
}
saveLayout() {
localStorage.setItem('myLayout', this.flex.columnLayout);
}
loadLayout() {
let layout = localStorage.getItem('myLayout');
if (layout) {
this.flex.columnLayout = layout;
}
}
private _getData() {
// generate some random data
let data = [],
countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'],
colors = ['Black', 'White', 'Red', 'Green', 'Blue'],
dt = new Date();
for (let i = 0; i < 100; i++) {
let date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
countryId = Math.floor(Math.random() * countries.length),
productId = Math.floor(Math.random() * products.length),
colorId = Math.floor(Math.random() * colors.length);
let item = {
id: i,
start: date,
end: date,
country: countries[countryId],
product: products[productId],
color: colors[colorId],
countryId: countryId,
productId: productId,
colorId: colorId,
amount1: Math.random() * 10000 - 5000,
amount2: Math.random() * 10000 - 5000,
amount3: Math.random() * 10000 - 5000,
amount4: Math.random() * 10000 - 5000,
amount5: Math.random() * 10000 - 5000,
discount: Math.random() / 4,
active: i % 4 == 0
};
data.push(item);
}
return data;
}
}
//
@NgModule({
imports: [WjGridModule, WjInputModule, BrowserModule],
declarations: [AppComponent],
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 Wijmo FlexGrid Column Picker</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">
<wj-flex-grid #flex
[(itemsSource)]="data">
</wj-flex-grid>
<div style="display:none">
<wj-list-box #columnPicker class="column-picker"></wj-list-box>
</div>
<p>
You can use the grid's <b>columnLayout</b> property to allow users
to save and restore column layouts. Click the buttons below
to see how this works:</p>
<button (click)="saveLayout()" class="btn btn-default">Save Layout</button>
<button (click)="loadLayout()" class="btn btn-default">Restore Layout</button>
</div>
.wj-flexgrid {
max-height: 300px;
margin: 10px 0;
}
.column-picker {
columns: 3;
padding: 12px;
margin-left: 12px;
margin-top: 26px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.column-picker-icon {
cursor: pointer;
color: #FF8754;
margin: 3px;
}
body {
margin-bottom: 20px;
}
<template>
<div class="container-fluid">
<wj-flex-grid :itemsSource="data" :initialized="initializedGrid"></wj-flex-grid>
<div style="display:none">
<wj-list-box class="column-picker" :initialized="initializedPicker"></wj-list-box>
</div>
<p>
You can use the grid's
<b>columnLayout</b> property to allow users
to save and restore column layouts. Click the buttons below
to see how this works:
</p>
<button v-on:click="saveLayout" class="btn btn-default">Save Layout</button>
<button v-on:click="loadLayout" class="btn btn-default">Restore Layout</button>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import "@grapecity/wijmo.vue2.grid";
import "@grapecity/wijmo.vue2.input";
import * as wjcCore from "@grapecity/wijmo";
import * as wjcInput from "@grapecity/wijmo.input";
import * as wjcGrid from "@grapecity/wijmo.grid";
import { getData } from "./data";
new Vue({
el: "#app",
data: function() {
return {
data: getData()
};
},
methods: {
saveLayout() {
localStorage.setItem("myLayout", this.flex.columnLayout);
},
loadLayout() {
let layout = localStorage.getItem("myLayout");
if (layout) {
this.flex.columnLayout = layout;
}
},
initializedPicker(picker){
this.columnPicker = picker;
},
initializedGrid(ctl) {
this.flex = ctl;
this.flex.formatItem.addHandler((s, e) => {
if (e.panel == s.topLeftCells) {
e.cell.innerHTML =
'<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
}
});
// show the column picker when the user clicks the top-left cell
let ref = this.flex.hostElement.querySelector(".wj-topleft");
ref.addEventListener("mousedown", e => {
if (wjcCore.hasClass(e.target, "column-picker-icon")) {
wjcCore.showPopup(this.columnPicker.hostElement, ref, false, true, false);
this.columnPicker.focus();
e.preventDefault();
}
});
}
},
mounted: function(){
if (this.flex) {
this.columnPicker.itemsSource = this.flex.columns;
this.columnPicker.checkedMemberPath = 'visible';
this.columnPicker.displayMemberPath = 'header';
this.columnPicker.lostFocus.addHandler(() => {
wjcCore.hidePopup(this.columnPicker.hostElement);
});
}
}
});
</script>
<style>
.wj-flexgrid {
max-height: 300px;
margin: 10px 0;
}
.column-picker {
columns: 3;
padding: 12px;
margin-left: 12px;
margin-top: 26px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.column-picker-icon {
cursor: pointer;
color: #FF8754;
margin: 3px;
}
body {
margin-bottom: 20px;
}
</style>
<!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.vue');
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
export function getData() {
let data = [],
countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'],
colors = ['Black', 'White', 'Red', 'Green', 'Blue'],
dt = new Date();
for (let i = 0; i < 100; i++) {
let date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
countryId = Math.floor(Math.random() * countries.length),
productId = Math.floor(Math.random() * products.length),
colorId = Math.floor(Math.random() * colors.length);
let item = {
id: i,
start: date,
end: date,
country: countries[countryId],
product: products[productId],
color: colors[colorId],
countryId: countryId,
productId: productId,
colorId: colorId,
amount1: Math.random() * 10000 - 5000,
amount2: Math.random() * 10000 - 5000,
amount3: Math.random() * 10000 - 5000,
amount4: Math.random() * 10000 - 5000,
amount5: Math.random() * 10000 - 5000,
discount: Math.random() / 4,
active: i % 4 == 0
};
data.push(item);
}
return data;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as wjGrid from '@grapecity/wijmo.react.grid';
import * as wjcCore from '@grapecity/wijmo';
import * as wjcInput from '@grapecity/wijmo.react.input';
import { getData } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: getData()
};
}
render() {
return <div className="container-fluid">
<wjGrid.FlexGrid initialized={this.initializedGrid.bind(this)} itemsSource={this.state.data}>
</wjGrid.FlexGrid>
<div className="column-picker-div">
<wjcInput.ListBox className="column-picker" initialized={this.initializedPicker.bind(this)}>
</wjcInput.ListBox>
</div>
<p>
You can use the grid's
<b> columnLayout </b> property to allow users
to save and restore column layouts. Click the buttons below
to see how this works:
</p>
<button className="btn btn-default" onClick={this.saveLayout.bind(this)}>Save Layout</button>
<button className="btn btn-default" onClick={this.loadLayout.bind(this)}>Restore Layout</button>
</div>;
}
initializedGrid(ctl) {
this.flex = ctl;
this.flex.formatItem.addHandler((s, e) => {
if (e.panel == s.topLeftCells) {
e.cell.innerHTML =
'<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
}
});
// show the column picker when the user clicks the top-left cell
let ref = this.flex.hostElement.querySelector(".wj-topleft");
ref.addEventListener("mousedown", e => {
if (wjcCore.hasClass(e.target, "column-picker-icon")) {
wjcCore.showPopup(this.columnPicker.hostElement, ref, false, true, false);
this.columnPicker.focus();
e.preventDefault();
}
});
}
initializedPicker(picker) {
this.columnPicker = picker;
}
componentDidMount() {
if (this.flex) {
this.columnPicker.itemsSource = this.flex.columns;
this.columnPicker.checkedMemberPath = 'visible';
this.columnPicker.displayMemberPath = 'header';
this.columnPicker.lostFocus.addHandler(() => {
wjcCore.hidePopup(this.columnPicker.hostElement);
});
}
}
saveLayout() {
localStorage.setItem("myLayout", this.flex.columnLayout);
}
loadLayout() {
let layout = localStorage.getItem("myLayout");
if (layout) {
this.flex.columnLayout = layout;
}
}
}
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>GrapeCity Wijmo FlexGrid Column Picker</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>
.wj-flexgrid {
max-height: 300px;
margin: 10px 0;
}
.column-picker {
columns: 3;
padding: 12px;
margin-left: 12px;
margin-top: 26px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.column-picker-icon {
cursor: pointer;
color: #FF8754;
margin: 3px;
}
.column-picker-div {
display: none;
}
body {
margin-bottom: 20px;
}
export function getData() {
let data = [], countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'], colors = ['Black', 'White', 'Red', 'Green', 'Blue'], dt = new Date();
for (let i = 0; i < 100; i++) {
let date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length);
let item = {
id: i,
start: date,
end: date,
country: countries[countryId],
product: products[productId],
color: colors[colorId],
countryId: countryId,
productId: productId,
colorId: colorId,
amount1: Math.random() * 10000 - 5000,
amount2: Math.random() * 10000 - 5000,
amount3: Math.random() * 10000 - 5000,
amount4: Math.random() * 10000 - 5000,
amount5: Math.random() * 10000 - 5000,
discount: Math.random() / 4,
active: i % 4 == 0
};
data.push(item);
}
return data;
}
USA - International
Japan
South
Korea