CollectionView:現在の項目

CollectionViewには、現在アクティブな項目を識別するcurrentItemプロパティがあります。このプロパティは、リストへの連結と選択をサポートするすべてのWijmoコントロール(FlexGrid、FlexChart、ListBox、ComboBoxなど)で使用されます。以下の例では、簡単なマスター詳細画面を実装しています。ユーザーがComboBoxから国を選択すると、現在の項目が変更されます。これにより、現在の項目の詳細を示す要素を更新するために使用されるcurrentChangedイベントが発生します。

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 { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a CollectionView let view = new wijmo.CollectionView(getData(), { currentChanged: updateDetails, sortDescriptions: ['country'] }); // // create country combo let cmbCountry = new input.ComboBox('#cmbCountry', { itemsSource: view, displayMemberPath: 'country' }); // // update details updateDetails(); function updateDetails() { updateDetail('downloads', 'n0'); updateDetail('sales', 'c'); updateDetail('expenses', 'c'); } // function updateDetail(prop, fmt) { let text = ''; if (view && view.currentItem) { text = wijmo.Globalize.format(view.currentItem[prop], fmt); } document.getElementById(prop).textContent = text; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Currency</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"> <table class="table table-condensed"> <tr> <td>国</td> <td> <div id="cmbCountry"> </div> </td> </tr> <tr> <td>DL数</td> <td id="downloads"></td> </tr> <tr> <td>売上</td> <td id="sales"></td> </tr> <tr> <td>費用</td> <td id="expenses"></td> </tr> </table> </div> </body> </html> export function getData() { let countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア'], 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; } .table > tbody > tr > td { border: none; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, Inject, enableProdMode, NgModule } 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 { view: wijmo.CollectionView; // constructor(@Inject(DataService) private dataService: DataService) { this.view = new wijmo.CollectionView(dataService.getData(), { sortDescriptions: ['country'] }); } } // @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 CollectionView Currency</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"> <table class="table table-condensed"> <tr> <td>国</td> <td> <wj-combo-box [(itemsSource)]="view" [displayMemberPath]="'country'"> </wj-combo-box> </td> </tr> <tr> <td>DL数</td> <td>{{ view.currentItem.downloads | number:0 }}</td> </tr> <tr> <td>売上</td> <td>{{ view.currentItem.sales | currency }}</td> </tr> <tr> <td>費用</td> <td>{{ view.currentItem.expenses | currency }}</td> </tr> </table> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア'], 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; } } .table > tbody > tr > td { border: none; } 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 wjCore from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.formatData = (value, fmt) => { return wjCore.Globalize.format(value, fmt); }; this.onSelectedIndexChanged = (sender) => { this.setState(Object.assign(this.state.view, { currentItem: sender.selectedItem })); }; this.state = { view: new wjCore.CollectionView(getData(), { sortDescriptions: ['country'] }) }; } render() { return <div className="container-fluid"> <table className="table table-condensed"> <tr> <td>国</td> <td> <wjInput.ComboBox itemsSource={this.state.view} selectedIndexChanged={this.onSelectedIndexChanged} displayMemberPath="country"> </wjInput.ComboBox> </td> </tr> <tr> <td>DL数</td> <td>{this.formatData(this.state.view.currentItem.downloads, 'n0')}</td> </tr> <tr> <td>売上</td> <td>{this.formatData(this.state.view.currentItem.sales, 'c')}</td> </tr> <tr> <td>費用</td> <td>{this.formatData(this.state.view.currentItem.expenses, 'c')}</td> </tr> </table> </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 CollectionView Currency</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> .table > tbody > tr > td { border: none; } export function getData() { let countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア'], 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"> <table class="table table-condensed"> <tr> <td>国</td> <td> <wj-combo-box :items-source="view" display-member-path="country"> </wj-combo-box> </td> </tr> <tr> <td>DL数</td> <td>{{ formatData(view.currentItem.downloads, 'n0') }}</td> </tr> <tr> <td>売上</td> <td>{{ formatData(view.currentItem.sales, 'c') }}</td> </tr> <tr> <td>費用</td> <td>{{ formatData(view.currentItem.expenses, 'c') }}</td> </tr> </table> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from 'vue'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; import '@grapecity/wijmo.vue2.input'; new Vue({ el: '#app', data: function () { return { view: new wjCore.CollectionView(getData(), {sortDescriptions: ['country']}) } }, methods:{ formatData(value, fmt) { return wjCore.Globalize.format(value, fmt); } } }) </script> <style> .table>tbody>tr>td { border: none; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Currency</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 = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ', 'スペイン', 'ポルトガル', 'オーストラリア'], 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; }