元に戻す/やり直し

UndoStackクラスを使用すると、ページ、フォーム、任意の要素で元に戻す/やり直しを行うことができます。

通常のHTML入力要素やほとんどのWijmoコントロールへの変更を追跡し、元に戻す/やり直しのショートカットキーを自動的に処理し、元に戻す/やり直しの操作をプログラムで実行するためのコマンドを提供します。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { UndoStack } from '@grapecity/wijmo.undo'; import { ComboBox, InputNumber, InputDate, AutoComplete, MultiSelect, MultiAutoComplete } from '@grapecity/wijmo.input'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { RadialGauge, NeedleLength, NeedleShape, ShowText } from '@grapecity/wijmo.gauge'; import { CellRangeEventArgs } from '@grapecity/wijmo.grid'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create controls new ComboBox('#country', { itemsSource: getCountries(), isRequired: false, selectedIndex: -1 }); new InputNumber('#amount', { format: 'c2', min: 0, step: 10, isRequired: false, value: null }); new InputDate('#date', { isRequired: false, value: null }); new ComboBox('#color', { itemsSource: getColors(), isRequired: false, selectedIndex: -1 }); new AutoComplete('#ac', { itemsSource: getColors(), selectedIndex: -1 }); new MultiSelect('#colors', { itemsSource: getColors() }); new MultiAutoComplete('#mac', { itemsSource: getColors(), selectedIndex: -1 }); new RadialGauge('#gauge', { thickness: .2, min: 0, max: 100, value: 50, isReadOnly: false, tickSpacing: 10, showTicks: true, showText: ShowText.Value, needleShape: NeedleShape.Outer, needleLength: NeedleLength.Inner }); // add a grid let g = new FlexGrid('#grid', { anchorCursor: true, frozenColumns: 2, allowAddNew: true, allowDelete: true, itemsSource: getData(), columns: [ { binding: 'id', header: 'ID', width: 80 }, { binding: 'name', header: '名前' }, { binding: 'country', header: '国' }, { binding: 'active', header: '有効' }, { binding: 'downloads', header: 'DL数', width: 80 }, { binding: 'sales', header: '売上', width: 80 }, ], }); // add some data maps let col = g.getColumn('name'); col.dataMap = getNames(); col.dataMap.isEditable = true; col = g.getColumn('country'); col.dataMap = getCountries(); // add/delete grid rows in code document.getElementById('add-row').addEventListener('click', (e) => { g.focus(); let view = g.editableCollectionView; let newItem = view.addNew(); newItem.id = -1; newItem.name = '新しい項目'; newItem.active = true; g.onRowAdded(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.commitNew(); e.preventDefault(); // don't submit the form }); document.getElementById('del-row').addEventListener('click', (e) => { g.focus(); let view = g.editableCollectionView; if (view.items.length) { let sel = g.selection; if (sel.row > -1) { let item = g.rows[sel.row].dataItem; g.onDeletingRow(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.remove(item); } } e.preventDefault(); // don't submit the form }); document.getElementById('nr-top').addEventListener('click', (e) => { g.newRowAtTop = e.target.checked; }); // create undo/redo buttons let btnUndo = document.getElementById('undo'); let btnRedo = document.getElementById('redo'); let btnClear = document.getElementById('clear'); let cnt = document.getElementById('undo-cnt'); // create undo stack let undoStack = new UndoStack('#undoable-form', { maxActions: 50, stateChanged: (s) => { btnUndo.disabled = !s.canUndo; btnRedo.disabled = !s.canRedo; btnClear.disabled = !s.actionCount; cnt.textContent = s.actionCount.toString(); }, }); // hook up undo/redo/clear buttons btnUndo.addEventListener('click', () => { undoStack.undo(); }); btnRedo.addEventListener('click', () => { undoStack.redo(); }); btnClear.addEventListener('click', () => { undoStack.clear(); }); // create some data function getColors() { return '黒,白,赤,緑,青,黄,茶,オレンジ'.split(','); } function getCountries() { return 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','); } function getNames() { return '成宮 真紀,山本 雅治,加藤 泰江,川村 匡'.split(','); } function getData() { let countries = getCountries(), names = getNames(), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity UndoStack</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"> <!-- undo/redo toolbar --> <div class="toolbar"> <button id="undo" class="btn btn-primary" disabled> <span class="arrow">&#x21B6;</span> 元に戻す (Ctrl+Z) </button> <button id="redo" class="btn btn-primary" disabled> <span class="arrow">&#x21B7;</span> やり直し (Ctrl+Y) </button> <button class="btn" disabled> アクション回数: <span id="undo-cnt">0</span> </button> <button id="clear" class="btn btn-default" disabled> リセット </button> </div> <!-- undo/redo form --> <form id="undoable-form"> <div class="row"> <!-- HTML input elements --> <div class="col-md-5"> <h3>HTML入力要素</h3> <div class="form-group"> <label for="firstName">名字</label> <input id="firstName" class="form-control" placeholder="名字" /> </div> <div class="form-group"> <label for="lastName">名前</label> <input id="lastName" class="form-control" placeholder="名前"/> </div> <div class="form-group"> <label for="select">選択</label> <select id="select" class="form-control"> <option value="value1">リンゴ</option> <option value="value2" selected>オレンジ</option> <option value="value3">ブドウ</option> </select> </div> <div class="form-group"> <label for="area">複数行テキスト</label> <textarea id="area" class="form-control" placeholder="複数行テキスト"></textarea> </div> <div class="form-group label-indent"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1" checked> 赤 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 緑 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 青 </label> </div> <div class="form-group label-indent"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> あたたかい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> つめたい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 常温 </label> </div> </div> <!-- Wijmo controls --> <div class="col-md-7"> <h3>Wijmoコントロール</h3> <div class="form-group"> <label for="country">国</label> <div id="country" placeholder="国"></div> </div> <div class="form-group"> <label for="amount">金額</label> <div id="amount" placeholder="金額"></div> </div> <div class="form-group"> <label for="date">日付</label> <div id="date" placeholder="日付"></div> </div> <div class="form-group"> <label for="color" title="ComboBox">コンボボックス</label> <div id="color"></div> </div> <div class="form-group"> <label for="ac" title="AutoComplete">オートコンプリート</label> <div id="ac"></div> </div> <div class="form-group"> <label for="colors" title="MultiSelect">複数選択</label> <div id="colors"></div> </div> <div class="form-group"> <label for="mac" title="MultiAutoComplete">タグ入力</label> <div id="mac"></div> </div> <div class="form-group"> <label for="gauge">ゲージ</label> <div id="gauge"></div> </div> <div class="form-group"> <label for="grid">グリッド</label> <div id="grid"></div> <button id="add-row" class="btn btn-primary"> コードで行を追加 </button> <button id="del-row" class="btn btn-primary"> コードで行を削除 </button> <label> 新しい行を先頭に表示 <input id="nr-top" class="wj-no-undo" type="checkbox"> </label> </div> </div> </div> </form> </div> </body> </html> .toolbar { position: sticky; top: 0; z-index: 10; padding: 12px; margin-left: -12px; background: #eee; } .arrow { display: inline-block; transform: scale(2); margin-right: 8px; } .form-group label { min-width: 100px; text-align: right; margin-right: 12px; } .label-indent { margin-left: 100px; } .label-indent label { min-width: 0; } .form-control { display: inline-block; width: auto; } .btn { outline: none !important; } .wj-dropdown, .wj-inputnumber { width: 200px; } .wj-multi-autocomplete { width: 300px; } .wj-flexgrid { height: 250px; } .wj-radialgauge { display: inline-block; width: 200px; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, ViewChild, 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 { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; import { UndoStack } from '@grapecity/wijmo.undo'; import { FlexGrid, CellRangeEventArgs } from '@grapecity/wijmo.grid'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { undoStack: UndoStack; grid: FlexGrid; data = this.getData(); colors =this.getColors(); countries = this.getCountries(); names = this.getNames(); canUndo = false; canRedo = false; actionCount = 0; // enable undo/redo for the form ngOnInit() { this.undoStack = new UndoStack('#undoable-form', { maxActions: 50, stateChanged: (s: UndoStack) => { this.canUndo = s.canUndo; this.canRedo = s.canRedo; this.actionCount = s.actionCount; } }); } // initialize the grid initGrid(s: FlexGrid) { // save reference to the grid this.grid = s; // add data maps to some columns let col = s.getColumn('name'); col.dataMap = this.names as any; col.dataMap.isEditable = true; col = s.getColumn('country'); col.dataMap = this.countries as any; } // add a row in code, calling "onRowAdded" to enable undo for this action addRow(e: MouseEvent) { let g = this.grid, view = g.editableCollectionView, newItem = view.addNew(); g.focus(); newItem.id = -1; newItem.name = '新しい項目'; newItem.active = true; g.onRowAdded(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.commitNew(); e.preventDefault(); // don't submit the form } // delete a row in code, calling "onDeletingRow" to enable undo for this action deleteRow(e: MouseEvent) { let g = this.grid, view = g.editableCollectionView; g.focus(); if (view.items.length) { let sel = g.selection; if (sel.row > -1) { let item = g.rows[sel.row].dataItem; g.onDeletingRow(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.remove(item); } } e.preventDefault(); // don't submit the form } // provide some data for the sample getColors() { return '黒,白,赤,緑,青,黄,茶,オレンジ'.split(','); } getCountries() { return 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','); } getNames() { return '成宮 真紀,山本 雅治,加藤 泰江,川村 匡'.split(','); } getData() { let countries = this.getCountries(), names = this.getNames(), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } } @NgModule({ imports: [WjInputModule, WjGridModule, WjGaugeModule, 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 UndoStack</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"> <!-- undo/redo toolbar --> <div class="toolbar"> <button id="undo" class="btn btn-primary" [disabled]="!canUndo" (click)="undoStack.undo()"> <span class="arrow">&#x21B6;</span> 元に戻す (Ctrl+Z) </button> <button id="redo" class="btn btn-primary" [disabled]="!canRedo" (click)="undoStack.redo()"> <span class="arrow">&#x21B7;</span> やり直し (Ctrl+Y) </button> <button class="btn" disabled> アクション回数: {{actionCount}} </button> <button id="clear" class="btn btn-default" [disabled]="!actionCount" (click)="undoStack.clear()"> リセット </button> </div> <!-- undo/redo form --> <form id="undoable-form"> <div class="row"> <!-- HTML input elements --> <div class="col-md-5"> <h3>HTML入力要素</h3> <div class="form-group"> <label for="firstName">名字</label> <input id="firstName" class="form-control" placeholder="名字" /> </div> <div class="form-group"> <label for="lastName">名前</label> <input id="lastName" class="form-control" placeholder="名前"/> </div> <div class="form-group"> <label for="select">選択</label> <select id="select" class="form-control"> <option value="value1">リンゴ</option> <option value="value2" selected>オレンジ</option> <option value="value3">ブドウ</option> </select> </div> <div class="form-group"> <label for="area">複数行テキスト</label> <textarea id="area" class="form-control" placeholder="複数行テキスト"></textarea> </div> <div class="form-group label-indent"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1" checked> 赤 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 緑 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 青 </label> </div> <div class="form-group label-indent"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> あたたかい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> つめたい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 常温 </label> </div> </div> <!-- Wijmo controls --> <div class="col-md-7"> <h3>Wijmoコントロール</h3> <div class="form-group"> <label for="country">国</label> <wj-combo-box id="country" placeholder="国" [itemsSource]="countries" [isRequired]="false" [selectedIndex]="-1"> </wj-combo-box> </div> <div class="form-group"> <label for="amount">金額</label> <wj-input-number id="amount" placeholder="金額" [format]="'c2'" [min]="0" [step]="10" [isRequired]="false" [value]="null"> </wj-input-number> </div> <div class="form-group"> <label for="date">日付</label> <wj-input-date id="date" placeholder="日付" [isRequired]="false" [value]="null"> </wj-input-date> </div> <div class="form-group"> <label for="color" title="ComboBox">コンボボックス</label> <wj-combo-box id="color" [itemsSource]="colors" [isRequired]="false" [selectedIndex]="-1"> </wj-combo-box> </div> <div class="form-group"> <label for="ac" title="AutoComplete">オートコンプリート</label> <wj-auto-complete id="ac" [itemsSource]="colors" [selectedIndex]="-1"> </wj-auto-complete> </div> <div class="form-group"> <label for="colors" title="MultiSelect">複数選択</label> <wj-multi-select id="colors" [itemsSource]="colors"> </wj-multi-select> </div> <div class="form-group"> <label for="mac" title="MultiAutoComplete">タグ入力</label> <wj-multi-auto-complete id="mac" [itemsSource]="colors" [selectedIndex]="-1"> </wj-multi-auto-complete> </div> <div class="form-group"> <label for="gauge">ゲージ</label> <wj-radial-gauge [thickness]=".2" [min]="0" [max]="100" [value]="50" [isReadOnly]="false" [tickSpacing]="10" [showTicks]="true" [showText]="'Value'" [needleShape]="'Outer'" [needleLength]="'Inner'"> </wj-radial-gauge> </div> <div class="form-group"> <label for="grid">グリッド</label> <wj-flex-grid div id="grid" #theGrid [anchorCursor]="true" [frozenColumns]="2" [allowAddNew]="true" [allowDelete]="true" [itemsSource]="data" (initialized)="initGrid(theGrid)"> <wj-flex-grid-column binding="id" header="ID" [width]="80"></wj-flex-grid-column> <wj-flex-grid-column binding="name" header="名前"></wj-flex-grid-column> <wj-flex-grid-column binding="country" header="国"></wj-flex-grid-column> <wj-flex-grid-column binding="active" header="有効"></wj-flex-grid-column> <wj-flex-grid-column binding="downloads" header="DL数" [width]="80"></wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="売上" [width]="80"></wj-flex-grid-column> </wj-flex-grid> <button id="add-row" class="btn btn-primary" (click)="addRow($event)"> コードで行を追加 </button> <button id="del-row" class="btn btn-primary" (click)="deleteRow($event)"> コードで行を削除 </button> <label> 新しい行を先頭に表示 <input id="nr-top" class="wj-no-undo" type="checkbox" [checked]="grid && grid.newRowAtTop" (change)="grid.newRowAtTop = !grid.newRowAtTop"> </label> </div> </div> </div> </form> </div> .toolbar { position: sticky; top: 0; z-index: 10; padding: 12px; margin-left: -12px; background: #eee; } .arrow { display: inline-block; transform: scale(2); margin-right: 8px; } .form-group label { min-width: 100px; text-align: right; margin-right: 12px; } .label-indent { margin-left: 100px; } .label-indent label { min-width: 0; } .form-control { display: inline-block; width: auto; } .btn { outline: none !important; margin-right: 6px; } .wj-dropdown, .wj-inputnumber { width: 200px; } .wj-multi-autocomplete { width: 300px; } .wj-flexgrid { height: 250px; } .wj-radialgauge { display: inline-block; width: 200px; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { ComboBox, InputNumber, InputDate, AutoComplete, MultiAutoComplete, MultiSelect } from '@grapecity/wijmo.react.input'; import { RadialGauge } from '@grapecity/wijmo.react.gauge'; import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'; import { CellRangeEventArgs } from '@grapecity/wijmo.grid'; import { UndoStack } from '@grapecity/wijmo.undo'; class App extends React.Component { // initialize the component constructor(props) { super(props); this.state = { data: this.getData(), colors: this.getColors(), countries: this.getCountries(), names: this.getNames(), canUndo: false, canRedo: false, actionCount: 0 }; } // enable undo/redo for the form componentDidMount() { this.undoStack = new UndoStack('#undoable-form', { maxActions: 50, stateChanged: (s) => { this.setState({ canUndo: s.canUndo, canRedo: s.canRedo, actionCount: s.actionCount }); } }); } // render the component render() { return <div className="container-fluid"> <div className="toolbar"> <button id="undo" className="btn btn-primary" disabled={!this.state.canUndo} onClick={() => this.undoStack.undo()}> <span className="arrow">&#x21B6;</span> 元に戻す (Ctrl+Z) </button>{' '} <button id="redo" className="btn btn-primary" disabled={!this.state.canRedo} onClick={() => this.undoStack.redo()}> <span className="arrow">&#x21B7;</span> やり直し (Ctrl+Y) </button>{' '} <button className="btn" disabled> アクション回数: {this.state.actionCount} </button>{' '} <button id="clear" className="btn btn-default" disabled={!this.state.actionCount} onClick={() => this.undoStack.clear()}> リセット </button> </div> <form id="undoable-form"> <div className="row"> <div className="col-md-5"> <h3>HTML入力要素</h3> <div className="form-group"> <label htmlFor="firstName">名字</label> <input id="firstName" className="form-control" placeholder="名字"/> </div> <div className="form-group"> <label htmlFor="lastName">名前</label> <input id="lastName" className="form-control" placeholder="名前"/> </div> <div className="form-group"> <label htmlFor="select">選択</label> <select id="select" className="form-control"> <option value="value1">リンゴ</option> <option value="value2" selected>オレンジ</option> <option value="value3">ブドウ</option> </select> </div> <div className="form-group"> <label htmlFor="area">複数行テキスト</label> <textarea id="area" className="form-control" placeholder="複数行テキスト"></textarea> </div> <div className="form-group label-indent"> <label className="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1" checked/> 赤 </label> <label className="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"/> 緑 </label> <label className="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"/> 青 </label> </div> <div className="form-group label-indent"> <label className="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked/> あたたかい </label> <label className="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"/> つめたい </label> <label className="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"/> 常温 </label> </div> </div> <div className="col-md-7"> <h3>Wijmoコントロール</h3> <div className="form-group"> <label htmlFor="country">国</label> <ComboBox id="country" placeholder="国" itemsSource={this.state.countries} isRequired={false} selectedIndex={-1}/> </div> <div className="form-group"> <label htmlFor="amount">金額</label> <InputNumber id="amount" placeholder="金額" format="c2" min={0} step={10} isRequired={false} value={null}/> </div> <div className="form-group"> <label htmlFor="date">日付</label> <InputDate id="date" placeholder="日付" isRequired={false} value={null}/> </div> <div className="form-group"> <label htmlFor="color" title="ComboBox">コンボボックス</label> <ComboBox id="color" itemsSource={this.state.colors} isRequired={false} selectedIndex={-1}/> </div> <div className="form-group"> <label htmlFor="ac" title="AutoComplete">オートコンプリート</label> <AutoComplete id="ac" itemsSource={this.state.colors} selectedIndex={-1}/> </div> <div className="form-group"> <label htmlFor="colors" title="MultiSelect">複数選択</label> <MultiSelect id="colors" itemsSource={this.state.colors}/> </div> <div className="form-group"> <label htmlFor="mac" title="MultiAutoComplete">タグ入力</label> <MultiAutoComplete id="mac" itemsSource={this.state.colors} selectedIndex={-1}/> </div> <div className="form-group"> <label htmlFor="gauge">ゲージ</label> <RadialGauge thickness={.2} min={0} max={100} value={50} isReadOnly={false} tickSpacing={10} showTicks={true} showText="Value" needleShape="Outer" needleLength="Inner"/> </div> <div className="form-group"> <label htmlFor="grid">グリッド</label> <FlexGrid div id="grid" anchorCursor={true} frozenColumns={2} allowAddNew={true} allowDelete={true} itemsSource={this.state.data} initialized={s => { // save reference to grid this.grid = s; // add data maps to some columns let col = s.getColumn('name'); col.dataMap = this.state.names; col.dataMap.isEditable = true; col = s.getColumn('country'); col.dataMap = this.state.countries; }}> <FlexGridColumn binding="id" header="ID" width={80}></FlexGridColumn> <FlexGridColumn binding="name" header="名前"></FlexGridColumn> <FlexGridColumn binding="country" header="国"></FlexGridColumn> <FlexGridColumn binding="active" header="有効"></FlexGridColumn> <FlexGridColumn binding="downloads" header="DL数" width={80}></FlexGridColumn> <FlexGridColumn binding="sales" header="売上" width={80}></FlexGridColumn> </FlexGrid> <button id="add-row" className="btn btn-primary" onClick={(e) => { let g = this.grid, view = g.editableCollectionView, newItem = view.addNew(); g.focus(); newItem.id = -1; newItem.name = '新しい項目'; newItem.active = true; g.onRowAdded(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.commitNew(); e.preventDefault(); // don't submit the form }}> コードで行を追加 </button>{' '} <button id="del-row" className="btn btn-primary" onClick={(e) => { let g = this.grid, view = g.editableCollectionView; g.focus(); if (view.items.length) { let sel = g.selection; if (sel.row > -1) { let item = g.rows[sel.row].dataItem; g.onDeletingRow(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.remove(item); } } e.preventDefault(); // don't submit the form }}> コードで行を削除 </button>{' '} <label> 新しい行を先頭に表示{' '} <input id="nr-top" className="wj-no-undo" type="checkbox" onClick={e => { this.grid.newRowAtTop = e.target.checked; }}/> </label> </div> </div> </div> </form> </div>; } // create some data getColors() { return '黒,白,赤,緑,青,黄,茶,オレンジ'.split(','); } getCountries() { return 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','); } getNames() { return '成宮 真紀,山本 雅治,加藤 泰江,川村 匡'.split(','); } getData() { let countries = this.getCountries(), names = this.getNames(), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } } 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 UndoStack</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> .toolbar { position: sticky; top: 0; z-index: 10; padding: 12px; margin-left: -12px; background: #eee; } .arrow { display: inline-block; transform: scale(2); margin-right: 8px; } .form-group label { min-width: 100px; text-align: right; margin-right: 12px; } .label-indent { margin-left: 100px; } .label-indent label { min-width: 0; } .form-control { display: inline-block; width: auto; } .btn { outline: none !important; } .wj-dropdown, .wj-inputnumber { width: 200px; } .wj-multi-autocomplete { width: 300px; } .wj-flexgrid { height: 250px; } .wj-radialgauge { display: inline-block; width: 200px; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } <template> <div class="app container-fluid"> <!-- undo toolbar --> <div class="toolbar"> <button id="undo" class="btn btn-primary" :disabled="!canUndo" @click="undoStack.undo()"> <span class="arrow">&#x21B6;</span> 元に戻す (Ctrl+Z) </button> <button id="redo" class="btn btn-primary" :disabled="!canRedo" @click="undoStack.redo()"> <span class="arrow">&#x21B7;</span> やり直し (Ctrl+Y) </button> <button class="btn" disabled> アクション回数: {{actionCount}} </button> <button id="clear" class="btn btn-default" :disabled="!actionCount" @click="undoStack.clear()"> リセット </button> </div> <!-- undoable form --> <form id="undoable-form"> <div class="row"> <!-- HTML input elements --> <div class="col-md-5"> <h3>HTML入力要素</h3> <div class="form-group"> <label for="firstName">名字</label> <input id="firstName" class="form-control" placeholder="名字" /> </div> <div class="form-group"> <label for="lastName">名前</label> <input id="lastName" class="form-control" placeholder="名前" /> </div> <div class="form-group"> <label for="select">選択</label> <select id="select" class="form-control"> <option value="value1">リンゴ</option> <option value="value2" selected>オレンジ</option> <option value="value3">ブドウ</option> </select> </div> <div class="form-group"> <label for="area">複数行テキスト</label> <textarea id="area" class="form-control" placeholder="複数行テキスト"></textarea> </div> <div class="form-group label-indent"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1" checked> 赤 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 緑 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 青 </label> </div> <div class="form-group label-indent"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> あたたかい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> つめたい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 常温 </label> </div> </div> <!-- Wijmo controls --> <div class="col-md-7"> <h3>Wijmoコントロール</h3> <div class="form-group"> <label for="country">国</label> <wj-combo-box id="country" placeholder="国" :itemsSource="countries" :isRequired="false" :selectedIndex="-1"/> </div> <div class="form-group"> <label for="amount">金額</label> <wj-input-number id="amount" placeholder="金額" :format="'c2'" :min="0" :step="10" :isRequired="false" :value="null"/> </div> <div class="form-group"> <label for="date">日付</label> <wj-input-date id="date" placeholder="日付" :isRequired="false" :value="null"/> </div> <div class="form-group"> <label for="color" title="ComboBox">コンボボックス</label> <wj-combo-box id="color" :itemsSource="colors" :isRequired="false" :selectedIndex="-1"/> </div> <div class="form-group"> <label for="ac" title="AutoComplete">オートコンプリート</label> <wj-auto-complete id="ac" :itemsSource="colors" :selectedIndex="-1"/> </div> <div class="form-group"> <label for="colors" title="MultiSelect">複数選択</label> <wj-multi-select id="colors" :itemsSource="colors"/> </div> <div class="form-group"> <label for="mac" title="MultiAutoComplete">タグ入力</label> <wj-multi-auto-complete id="mac" :itemsSource="colors" :selectedIndex="-1"/> </div> <div class="form-group"> <label for="gauge">ゲージ</label> <wj-radial-gauge :thickness=".2" :min="0" :max="100" :value="50" :isReadOnly="false" :tickSpacing="10" :showTicks="true" :showText="'Value'" :needleShape="'Outer'" :needleLength="'Inner'"/> </div> <div class="form-group"> <label for="grid">グリッド</label> <wj-flex-grid div id="grid" :anchorCursor="true" :frozenColumns="2" :allowAddNew="true" :allowDelete="true" :itemsSource="data" :initialized="initGrid"> <wj-flex-grid-column binding="id" header="ID" :width=80></wj-flex-grid-column> <wj-flex-grid-column binding="name" header="名前"></wj-flex-grid-column> <wj-flex-grid-column binding="country" header="国"></wj-flex-grid-column> <wj-flex-grid-column binding="active" header="有効"></wj-flex-grid-column> <wj-flex-grid-column binding="downloads" header="DL数" :width=80></wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="売上" :width=80></wj-flex-grid-column> </wj-flex-grid> <button id="add-row" class="btn btn-primary" @click="addRow($event)"> コードで行を追加 </button> <button id="del-row" class="btn btn-primary" @click="deleteRow($event)"> コードで行を削除 </button> <label> 新しい行を先頭に表示 <input id="nr-top" class="wj-no-undo" type="checkbox" @click="grid.newRowAtTop = $event.target.checked" /> </label> </div> </div> </div> </form> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import 'src/app.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.gauge'; import '@grapecity/wijmo.vue2.grid'; import { UndoStack } from '@grapecity/wijmo.undo'; import { CellRangeEventArgs } from '@grapecity/wijmo.grid'; let App = Vue.extend({ name: "app", // component state data: function() { return { undoStack: null, grid: null, data: this.getData(), colors: this.getColors(), countries: this.getCountries(), names: this.getNames(), canUndo: false, canRedo: false, actionCount: 0 }; }, // enable undo/redo for the form mounted() { this.undoStack = new UndoStack('#undoable-form', { maxActions: 50, stateChanged: s => { this.canUndo = s.canUndo; this.canRedo = s.canRedo; this.actionCount = s.actionCount; } }); }, // component methods methods: { // initialize grid initGrid(s) { // save reference to the grid this.grid = s; // add data maps to some columns let col = s.getColumn('name'); col.dataMap = this.names; col.dataMap.isEditable = true; col = s.getColumn('country'); col.dataMap = this.countries; }, // add a row in code, calling "onRowAdded" to enable undo for this action addRow(e) { let g = this.grid, view = g.editableCollectionView, newItem = view.addNew(); g.focus(); newItem.id = -1; newItem.name = '新しい項目'; newItem.active = true; g.onRowAdded(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.commitNew(); e.preventDefault(); // don't submit the form }, // delete a row in code, calling "onDeletingRow" to enable undo for this action deleteRow(e) { let g = this.grid, view = g.editableCollectionView; g.focus(); if (view.items.length) { let sel = g.selection; if (sel.row > -1) { let item = g.rows[sel.row].dataItem; g.onDeletingRow(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.remove(item); } } e.preventDefault(); // don't submit the form }, // generate some data for the sample getColors() { return '黒,白,赤,緑,青,黄,茶,オレンジ'.split(','); }, getCountries() { return 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','); }, getNames() { return '成宮 真紀,山本 雅治,加藤 泰江,川村 匡'.split(','); }, getData() { let countries = this.getCountries(), names = this.getNames(), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity UndoStack</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>