テーブル

関連するデータのグループを簡単に管理および分析するために、セル範囲をテーブルに変換することができます。空のテーブルを追加する場合は、Tableインスタンスを作成し、次にFlexSheetのテーブルコレクションにTableインスタンスを追加する必要があります。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjFlexSheet from '@grapecity/wijmo.grid.sheet'; import { getTableData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let tableSheet = new wjFlexSheet.FlexSheet('#tableSheet'); tableSheet.addUnboundSheet('テーブル', 20, 7); let selectedTable = null; let tableStyleNames = [], i; for (i = 1; i <= 21; i++) { tableStyleNames.push('TableStyleLight' + i); } for (i = 1; i <= 28; i++) { tableStyleNames.push('TableStyleMedium' + i); } for (i = 1; i <= 11; i++) { tableStyleNames.push('TableStyleDark' + i); } let cboTableStyles = new wjInput.ComboBox('#tableStyles', { itemsSource: tableStyleNames, isEditable: false }); cboTableStyles.selectedIndexChanged.addHandler(() => { // apply the table style for the selected table. if (selectedTable) { let tableStyle = tableSheet.getBuiltInTableStyle(cboTableStyles.selectedValue); selectedTable.style = tableStyle; } }); let tableStyle = tableSheet.getBuiltInTableStyle('TableStyleDark9'); tableSheet.selectedSheet.addTableFromArray(2, 1, getTableData(10), null, 'Table1', tableStyle, { showTotalRow: true }); onClick('showHeaderRow', (e) => { if (selectedTable) { selectedTable.showHeaderRow = e.target.checked; } }); onClick('showTotalRow', (e) => { if (selectedTable) { selectedTable.showTotalRow = e.target.checked; } }); onClick('showBandedRows', (e) => { if (selectedTable) { selectedTable.showBandedRows = e.target.checked; } }); onClick('showBandedColumns', (e) => { if (selectedTable) { selectedTable.showBandedColumns = e.target.checked; } }); onClick('alterFirstColumn', (e) => { if (selectedTable) { selectedTable.alterFirstColumn = e.target.checked; } }); onClick('alterLastColumn', (e) => { if (selectedTable) { selectedTable.alterLastColumn = e.target.checked; } }); tableSheet.selectionChanged.addHandler((sender, args) => { let selection = args.range; if (selection.isValid) { getSelectedTable(selection, tableSheet); } else { selectedTable = null; } }); tableSheet.updatedLayout.addHandler(() => { if (tableSheet.selection && tableSheet.selection.isValid) { getSelectedTable(tableSheet.selection, tableSheet); } else { selectedTable = null; } }); // Get selected table in FlexSheet. function getSelectedTable(seletion, flexSheet) { if (flexSheet) { selectedTable = flexSheet.selectedSheet.findTable(seletion.row, seletion.col); let tableSettings = document.querySelector('#tableSettings'); if (selectedTable) { tableSettings.style.display = ''; let tableStyle = flexSheet.getBuiltInTableStyle(selectedTable.style.name); if (tableStyle) { cboTableStyles.selectedValue = tableStyle.name; } getTableSettings(); } else { tableSettings.style.display = 'none'; } } } function getTableSettings() { let showHeaderRow = document.querySelector('#showHeaderRow'), showTotalRow = document.querySelector('#showTotalRow'), showBandedRows = document.querySelector('#showBandedRows'), showBandedColumns = document.querySelector('#showBandedColumns'), alterFirstColumn = document.querySelector('#alterFirstColumn'), alterLastColumn = document.querySelector('#alterLastColumn'); if (selectedTable) { showHeaderRow.checked = selectedTable.showHeaderRow; showTotalRow.checked = selectedTable.showTotalRow; showBandedRows.checked = selectedTable.showBandedRows; showBandedColumns.checked = selectedTable.showBandedColumns; alterFirstColumn.checked = selectedTable.alterFirstColumn; alterLastColumn.checked = selectedTable.alterLastColumn; } } function onClick(id, fn) { document.querySelector('#' + id).addEventListener('click', fn); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexSheet Table</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="tableSheet"></div> <div id="tableSettings" class="well well-lg" style="display: none;"> <h4>テーブルスタイル</h4> <div> <label> <input id="showHeaderRow" class="form-check-input" type="checkbox"> 見出し行 </label> <label> <input id="showTotalRow" class="form-check-input" type="checkbox"> 集計行 </label> </div> <div> <label> <input id="showBandedRows" class="form-check-input" type="checkbox"> 縞模様の行 </label> <label> <input id="showBandedColumns" class="form-check-input" type="checkbox"> 縞模様の列 </label> </div> <div> <label> <input id="alterFirstColumn" class="form-check-input" type="checkbox"> 最初の列 </label> <label> <input id="alterLastColumn" class="form-check-input" type="checkbox"> 最後の列 </label> </div> <div> <label style="width:auto"> 組み込みスタイル: </label> <div id="tableStyles"></div> </div> </div> </div> </body> </html> let countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ'], products = ['ウィジェット', 'ガジェット', 'ツール']; export function getTableData(count) { let data = [], i = 0, country, product; for (i = 0; i < count; i++) { country = countries[Math.floor(Math.random() * countries.length)]; product = products[Math.floor(Math.random() * products.length)]; data.push({ ID: i, Country: country, Product: product, Date: new Date(2014, i % 12, i % 28), Amount: Math.random() * 10000 }); } return data; } .wj-flexsheet { height: 400px; margin: 6px 0; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, Inject, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGridSheetModule } from '@grapecity/wijmo.angular2.grid.sheet'; import * as wjcInput from '@grapecity/wijmo.input'; import * as wjcGrid from '@grapecity/wijmo.grid'; import * as wjcSheet from '@grapecity/wijmo.grid.sheet'; import { DataService } from './app.data'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { tableStyleNames: string[] = null; selectedTable: wjcSheet.Table = null; private _dataSvc: DataService; constructor(@Inject(DataService) dataSvc: DataService) { this._dataSvc = dataSvc; } @ViewChild('flex') flex: wjcSheet.FlexSheet; @ViewChild('cboTableStyles') cboTableStyles: wjcInput.ComboBox; initializeFlexSheet(flex: wjcSheet.FlexSheet) { let tableStyle: wjcSheet.TableStyle, table: wjcSheet.Table, i: number; this.tableStyleNames = []; for (i = 1; i <= 21; i++) { this.tableStyleNames.push('TableStyleLight' + i); } for (i = 1; i <= 28; i++) { this.tableStyleNames.push('TableStyleMedium' + i); } for (i = 1; i <= 11; i++) { this.tableStyleNames.push('TableStyleDark' + i); } tableStyle = flex.getBuiltInTableStyle('TableStyleDark9'); table = flex.selectedSheet.addTableFromArray(2, 1, this._dataSvc.getTableData(10), null, 'Table1', tableStyle, { showTotalRow: true }); flex.selectionChanged.addHandler((sender: any, args: wjcGrid.CellRangeEventArgs) => { let selection = args.range; if (selection.isValid) { this._getSelectedTable(selection, flex); } else { this.selectedTable = null; } }); flex.updatedLayout.addHandler(() => { if (flex.selection && flex.selection.isValid) { this._getSelectedTable(flex.selection, flex); } else { this.selectedTable = null; } }); } cboTableStylesInit(cboTableStyles: wjcInput.ComboBox) { cboTableStyles.selectedIndexChanged.addHandler(() => { // apply the table style for the selected table if (this.selectedTable) { var tableStyle = this.flex.getBuiltInTableStyle(cboTableStyles.selectedValue); this.selectedTable.style = tableStyle; } }); if (this.selectedTable) { cboTableStyles.selectedValue = this.selectedTable.style.name; } } // Get selected table in FlexSheet. private _getSelectedTable(selection: wjcGrid.CellRange, flexSheet: wjcSheet.FlexSheet) { this.selectedTable = flexSheet.selectedSheet.findTable(selection.row, selection.col); if (this.selectedTable && this.cboTableStyles) { var tableStyle = flexSheet.getBuiltInTableStyle(this.selectedTable.style.name); if (tableStyle) { this.cboTableStyles.selectedValue = tableStyle.name; } } } } @NgModule({ imports: [WjGridSheetModule, WjInputModule, BrowserModule, FormsModule], providers: [DataService], 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 FlexSheet Table</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"> <!-- the flexsheet --> <wj-flex-sheet #flex (initialized)="initializeFlexSheet(flex)"> <wj-sheet [name]="'テーブル'" [rowCount]="20" [columnCount]="7"></wj-sheet> </wj-flex-sheet> <div class="well well-lg" *ngIf="selectedTable != null"> <h4>テーブルスタイル</h4> <div> <label> <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showHeaderRow"> 見出し行 </label> <label> <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showTotalRow"> 集計行 </label> </div> <div> <label> <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showBandedRows"> 縞模様の行 </label> <label> <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.showBandedColumns"> 縞模様の列 </label> </div> <div> <label> <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.alterFirstColumn"> 最初の列 </label> <label> <input class="form-check-input" type="checkbox" [(ngModel)]="selectedTable.alterLastColumn"> 最後の列 </label> </div> <div> <label style="width:auto"> 組み込みスタイル: </label> <wj-combo-box #cboTableStyles [itemsSource]="tableStyleNames" [isEditable]="false" (initialized)="cboTableStylesInit(cboTableStyles)"> </wj-combo-box> </div> </div> </div> import { Injectable } from '@angular/core'; @Injectable() export class DataService { getTableData(count: number) { let data = [], countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ'], products = ['ウィジェット', 'ガジェット', 'ツール'], i = 0, country: string, product: string; for (i = 0; i < count; i++) { country = countries[Math.floor(Math.random() * countries.length)]; product = products[Math.floor(Math.random() * products.length)]; data.push({ ID: i, Country: country, Product: product, Date: new Date(2014, i % 12, i % 28), Amount: Math.random() * 10000 }); } return data; } } .wj-flexsheet { height: 400px; margin: 6px 0; } import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjInput from "@grapecity/wijmo.react.input"; import * as wjGridSheet from "@grapecity/wijmo.react.grid.sheet"; import { getTableData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { flex: null, cboTableStyles: null, tableStyleNames: [], selectedTable: null }; } render() { return (<div className="container-fluid"> <wjGridSheet.FlexSheet initialized={this.initializeFlexSheet.bind(this)}> <wjGridSheet.Sheet name="テーブル" rowCount={20} columnCount={7}></wjGridSheet.Sheet> </wjGridSheet.FlexSheet> {this.renderDiv()} </div>); } initializeFlexSheet(flex) { let tableStyle, table, i; for (i = 1; i <= 21; i++) { this.state.tableStyleNames.push("TableStyleLight" + i); } for (i = 1; i <= 28; i++) { this.state.tableStyleNames.push("TableStyleMedium" + i); } for (i = 1; i <= 11; i++) { this.state.tableStyleNames.push("TableStyleDark" + i); } tableStyle = flex.getBuiltInTableStyle("TableStyleDark9"); table = flex.selectedSheet.addTableFromArray(2, 1, getTableData(10), null, "Table1", tableStyle, { showTotalRow: true }); flex.selectionChanged.addHandler((sender, args) => { let selection = args.range; if (selection.isValid) { this._getSelectedTable(selection, flex); } else { this.setState({ selectedTable: null }); } }); flex.updatedLayout.addHandler(() => { if (flex.selection && flex.selection.isValid) { this._getSelectedTable(flex.selection, flex); } else { this.setState({ selectedTable: null }); } }); this.setState({ flex: flex }); } cboTableStylesInit(cboTableStyles) { cboTableStyles.selectedIndexChanged.addHandler(() => { // apply the table style for the selected table if (this.state.selectedTable) { let tableStyle = this.state.flex.getBuiltInTableStyle(cboTableStyles.selectedValue); this.state.selectedTable.style = tableStyle; } }); if (this.state.selectedTable) { cboTableStyles.selectedValue = this.state.selectedTable.style.name; } this.setState({ cboTableStyles: cboTableStyles }); } // Get selected table in FlexSheet. _getSelectedTable(selection, flexSheet) { this.setState({ selectedTable: flexSheet.selectedSheet.findTable(selection.row, selection.col) }); if (this.state.selectedTable && this.state.cboTableStyles) { var tableStyle = flexSheet.getBuiltInTableStyle(this.state.selectedTable.style.name); if (tableStyle) { this.state.cboTableStyles.selectedValue = tableStyle.name; } } } change(index) { switch (index) { case 0: this.state.selectedTable.showHeaderRow = !this.state.selectedTable.showHeaderRow; break; case 1: this.state.selectedTable.showTotalRow = !this.state.selectedTable.showTotalRow; break; case 2: this.state.selectedTable.showBandedRows = !this.state.selectedTable.showBandedRows; break; case 3: this.state.selectedTable.showBandedColumns = !this.state.selectedTable.showBandedColumns; break; case 4: this.state.selectedTable.alterFirstColumn = !this.state.selectedTable.alterFirstColumn; break; case 5: this.state.selectedTable.alterLastColumn = !this.state.selectedTable.alterLastColumn; break; } this.forceUpdate(); } renderDiv() { if (!this.state.selectedTable) { return; } return (<div className="well well-lg"> <h4>テーブルスタイル</h4> <div> <label> <input className="form-check-input" type="checkbox" checked={this.state.selectedTable.showHeaderRow} onChange={() => this.change(0)}/> 見出し行 </label> <label> <input className="form-check-input" type="checkbox" checked={this.state.selectedTable.showTotalRow} onChange={() => this.change(1)}/> 集計行 </label> </div> <div> <label> <input className="form-check-input" type="checkbox" checked={this.state.selectedTable.showBandedRows} onChange={() => this.change(2)}/> 縞模様の行 </label> <label> <input className="form-check-input" type="checkbox" checked={this.state.selectedTable.showBandedColumns} onChange={() => this.change(3)}/> 縞模様の列 </label> </div> <div> <label> <input className="form-check-input" type="checkbox" checked={this.state.selectedTable.alterFirstColumn} onChange={() => this.change(4)}/> 最初の列 </label> <label> <input className="form-check-input" type="checkbox" checked={this.state.selectedTable.alterLastColumn} onChange={() => this.change(5)}/> 最後の列 </label> </div> <div> <label style={{ width: "auto" }}>組み込みスタイル:</label> <wjInput.ComboBox itemsSource={this.state.tableStyleNames} isEditable={false} initialized={this.cboTableStylesInit.bind(this)}></wjInput.ComboBox> </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> .container-fluid .wj-flexsheet { height: 400px; margin: 6px 0; } let countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ'], products = ['ウィジェット', 'ガジェット', 'ツール']; export function getTableData(count) { let data = [], i = 0, country, product; for (i = 0; i < count; i++) { country = countries[Math.floor(Math.random() * countries.length)]; product = products[Math.floor(Math.random() * products.length)]; data.push({ ID: i, Country: country, Product: product, Date: new Date(2014, i % 12, i % 28), Amount: Math.random() * 10000 }); } return data; } <template> <div class="container-fluid"> <!-- the flexsheet --> <wj-flex-sheet :initialized="initializeFlexSheet"> <wj-sheet :name="'テーブル'" :rowCount="20" :columnCount="7"></wj-sheet> </wj-flex-sheet> <div class="well well-lg" v-if="selectedTable != null"> <h4>テーブルスタイル</h4> <div> <label> <input class="form-check-input" type="checkbox" v-model="selectedTable.showHeaderRow" > 見出し行 </label> <label> <input class="form-check-input" type="checkbox" v-model="selectedTable.showTotalRow" > 集計行 </label> </div> <div> <label> <input class="form-check-input" type="checkbox" v-model="selectedTable.showBandedRows" > 縞模様の行 </label> <label> <input class="form-check-input" type="checkbox" v-model="selectedTable.showBandedColumns" > 縞模様の列 </label> </div> <div> <label> <input class="form-check-input" type="checkbox" v-model="selectedTable.alterFirstColumn" > 最初の列 </label> <label> <input class="form-check-input" type="checkbox" v-model="selectedTable.alterLastColumn" > 最後の列 </label> </div> <div> <label style="width:auto">組み込みスタイル:</label> <wj-combo-box :itemsSource="tableStyleNames" :isEditable="false" :initialized="cboTableStylesInit" ></wj-combo-box> </div> </div> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.core"; import "@grapecity/wijmo.vue2.input"; import "@grapecity/wijmo.vue2.grid.sheet"; import { getTableData } from './data'; let App = Vue.extend({ name: "app", data: function() { return { flex: null, cboTableStyles: null, tableStyleNames: [], selectedTable: null }; }, methods: { initializeFlexSheet: function(flex) { let tableStyle, table, i; this.tableStyleNames = []; for (i = 1; i <= 21; i++) { this.tableStyleNames.push("TableStyleLight" + i); } for (i = 1; i <= 28; i++) { this.tableStyleNames.push("TableStyleMedium" + i); } for (i = 1; i <= 11; i++) { this.tableStyleNames.push("TableStyleDark" + i); } tableStyle = flex.getBuiltInTableStyle("TableStyleDark9"); table = flex.selectedSheet.addTableFromArray( 2, 1, getTableData(10), null, "Table1", tableStyle, { showTotalRow: true } ); flex.selectionChanged.addHandler((sender, args) => { let selection = args.range; if (selection.isValid) { this._getSelectedTable(selection, flex); } else { this.selectedTable = null; } }); flex.updatedLayout.addHandler(() => { if (flex.selection && flex.selection.isValid) { this._getSelectedTable(flex.selection, flex); } else { this.selectedTable = null; } }); this.flex = flex; }, cboTableStylesInit: function(cboTableStyles) { cboTableStyles.selectedIndexChanged.addHandler(() => { // apply the table style for the selected table if (this.selectedTable) { var tableStyle = this.flex.getBuiltInTableStyle( cboTableStyles.selectedValue ); this.selectedTable.style = tableStyle; } }); if (this.selectedTable) { cboTableStyles.selectedValue = this.selectedTable.style.name; } this.cboTableStyles = cboTableStyles }, // Get selected table in FlexSheet. _getSelectedTable: function(selection, flexSheet) { this.selectedTable = flexSheet.selectedSheet.findTable( selection.row, selection.col ); if (this.selectedTable && this.cboTableStyles) { var tableStyle = flexSheet.getBuiltInTableStyle( this.selectedTable.style.name ); if (tableStyle) { this.cboTableStyles.selectedValue = tableStyle.name; } } } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container-fluid .wj-flexsheet { height: 400px; margin: 6px 0; } </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/jszip/dist/jszip.js"></script> <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> let countries = ['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ'], products = ['ウィジェット', 'ガジェット', 'ツール']; export function getTableData(count) { let data = [], i = 0, country, product; for (i = 0; i < count; i++) { country = countries[Math.floor(Math.random() * countries.length)]; product = products[Math.floor(Math.random() * products.length)]; data.push({ ID: i, Country: country, Product: product, Date: new Date(2014, i % 12, i % 28), Amount: Math.random() * 10000 }); } return data; }