示例
下拉框
ComboBox将输入元素与下拉列表组合。 您可以使用它从列表中选择和/或编辑字符串或对象.
ComboBox提供自动完成功能，可以轻松查找长列表中的项目.
例如，下面的组合框允许您从字符串和对象的列表中进行选择:
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
import { getCountries, getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// select a country (string)
var theComboString = new input.ComboBox('#theComboString', {
selectedIndexChanged: (sender) => {
setText('theComboStringCurrent', sender.text);
},
itemsSource: getCountries()
});
//
// select an item (object)
var theComboObject = new input.ComboBox('#theComboObject', {
selectedIndexChanged: (sender) => {
var text = wijmo.format('{country} (sales: {sales:c0}, expenses {expenses:c0})', sender.selectedValue);
setText('theComboObjectCurrent', text);
},
displayMemberPath: 'country',
itemsSource: getData()
});
//
// show text in an element on the page
function setText(id, value) {
document.getElementById(id).textContent = value;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity ComboBox Overview</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 class="form-group">
<label for="theComboString">Strings:</label>
<div id="theComboString"></div>
</div>
<p>
The current value is: <b id="theComboStringCurrent"></b>.
</p>
<hr />
<div class="form-group">
<label for="theComboObject">Objects:</label>
<div id="theComboObject"></div>
</div>
<p>
The current value is: <b id="theComboObjectCurrent"></b>.
</p>
</div>
</body>
</html>
export function getCountries() {
return ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'];
}
//
export function getData() {
// create some random data
let countries = getCountries(), data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
active: i % 5 != 0,
sales: Math.random() * 100000,
expenses: Math.random() * 50000
});
}
//
return data;
}
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import { Component, enableProdMode, NgModule, Inject } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
strings: string[];
objects: any[];
//
constructor(@Inject(DataService) private dataService: DataService) {
this.strings = dataService.getCountries();
this.objects = dataService.getData();
}
}
//
@NgModule({
imports: [WjInputModule, 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 ComboBox Overview</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">
<div class="form-group">
<label for="theComboString">Strings:</label>
<wj-combo-box #theComboString id="theComboString" [itemsSource]="strings"></wj-combo-box>
</div>
<p>
The current value is: <b>{{ theComboString.text }}</b>.
</p>
<hr />
<div class="form-group">
<label for="theComboObject">Objects:</label>
<wj-combo-box #theComboObject id="theComboObject" [displayMemberPath]="'country'" [itemsSource]="objects"></wj-combo-box>
</div>
<p>
The current value is:
<b *ngIf="theComboObject.selectedValue as s">
{{ s.country }} (sales: {{ s.sales | currency:undefined:undefined:'2.0-0' }}, expenses {{ s.expenses | currency:undefined:undefined:'2.0-0' }})
</b>
</p>
</div>
import { Injectable } from '@angular/core';
//
@Injectable()
export class DataService {
getCountries() {
return ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'];
}
//
getData() {
// create some random data
let countries = this.getCountries(),
data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
active: i % 5 != 0,
sales: Math.random() * 100000,
expenses: Math.random() * 50000
})
}
//
return data;
}
}
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
<template>
<div class="container-fluid">
<div class="form-group">
<label for="theComboString">Strings:</label>
<wj-combo-box
id="theComboString"
:itemsSource="strings"
:initialized="initComboString">
</wj-combo-box>
</div>
<p>
The current value is:
<b>{{ theComboString.selectedValue }}</b>.
</p>
<hr/>
<div class="form-group">
<label for="theComboObject">Objects:</label>
<wj-combo-box
id="theComboObject"
:displayMemberPath="'country'"
:itemsSource="objects"
:initialized="initComboObject">
</wj-combo-box>
</div>
<p>
The current value is:
<b v-if="theComboObject.selectedValue">
{{ theComboObject.selectedValue.country }}
(sales: {{ theComboObject.selectedValue.sales | formatCurrency }},
expenses {{ theComboObject.selectedValue.expenses | formatCurrency }})
</b>
</p>
</div>
</template>
<script>
import "bootstrap.css";
import "@grapecity/wijmo.styles/wijmo.css";
import Vue from "vue";
import "@grapecity/wijmo.vue2.core";
import "@grapecity/wijmo.vue2.input";
import { getCountries, getData } from "./data";
let App = Vue.extend({
name: "app",
data: function() {
return {
strings: getCountries(),
objects: getData(),
theComboString: {},
theComboObject: {
selectedValue: {}
}
};
},
methods: {
initComboString: function(combo) {
this.theComboString = combo;
},
initComboObject: function(combo) {
this.theComboObject = combo;
}
},
filters: {
formatCurrency: function(number) {
return wijmo.Globalize.format(number, "c0");
}
}
});
let vm = new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity ComboBox Overview</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 getCountries() {
return ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'];
}
//
export function getData() {
// create some random data
let countries = getCountries(), data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
active: i % 5 != 0,
sales: Math.random() * 100000,
expenses: Math.random() * 50000
});
}
//
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 wijmo from '@grapecity/wijmo';
import * as wjInput from '@grapecity/wijmo.react.input';
import { getCountries, getData } from './data';
//
class App extends React.Component {
constructor(props) {
super(props);
this.strings = getCountries();
this.objects = getData();
this.state = {
strVal: null,
objVal: null
};
}
;
_initComboString(sender) {
this.setState({ strVal: sender.selectedValue });
}
_initComboObject(sender) {
this.setState({ objVal: sender.selectedValue });
}
_formatCurrency(number) {
return wijmo.Globalize.format(number, 'c0');
}
_formatObj(item) {
if (!item) {
return '';
}
return `${item.country} (sales: ${this._formatCurrency(item.sales)}, expenses ${this._formatCurrency(item.expenses)})`;
}
_onStrValChanged(sender) {
this.setState({ strVal: sender.selectedValue });
}
_onObjValChanged(sender) {
this.setState({ objVal: sender.selectedValue });
}
render() {
return <div className="container-fluid">
<div className="form-group">
<label htmlFor="theComboString">Strings:</label>
<wjInput.ComboBox id="theComboString" itemsSource={this.strings} initialized={this._initComboString.bind(this)} selectedIndexChanged={this._onStrValChanged.bind(this)}>
</wjInput.ComboBox>
</div>
<p>
The current value is:
<b>{this.state.strVal}</b>.
</p>
<hr />
<div className="form-group">
<label htmlFor="theComboObject">Objects:</label>
<wjInput.ComboBox id="theComboObject" displayMemberPath="country" itemsSource={this.objects} initialized={this._initComboObject.bind(this)} selectedIndexChanged={this._onObjValChanged.bind(this)}>
</wjInput.ComboBox>
</div>
<p>
The current value is:
<b>
{this._formatObj(this.state.objVal)}
</b>
</p>
</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>GrapeCity ComboBox Overview</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>
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
//
export function getCountries() {
return ['China', 'Germany', 'Greece', 'Italy', 'Japan', 'Portugal', 'Russia', 'Spain', 'UK', 'US'];
}
//
export function getData() {
// create some random data
let countries = getCountries(), data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
active: i % 5 != 0,
sales: Math.random() * 100000,
expenses: Math.random() * 50000
});
}
//
return data;
}
USA - International
Japan
South
Korea