グリッド:コンテキストメニュー

Menuコントロールを使用して、Wijmoコントロールのコンテキストメニューを作成できます。

以下のFlexGridには、いくつかのオプションがあるカスタムコンテキストメニューがあります。 グリッドを右クリックして表示します。

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid } from '@mescius/wijmo.grid'; import { FlexGridContextMenu } from './flex-grid-context-menu'; import { getData } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { let theGrid = new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID' }, { binding: 'date', header: '日付' }, { binding: 'country', header: '国' }, { binding: 'active', header: '有効' }, { binding: 'sales', header: '売上' }, { binding: 'expenses', header: '費用' }, ], showMarquee: true, allowSorting: 'MultiColumn', itemsSource: getData(100) }); new FlexGridContextMenu(theGrid); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Context Menus</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="theGrid"></div> </div> </body> </html>
export function getData(cnt) { let countries = 'アメリカ,ドイツ,イギリス,日本'.split(','); let data = []; for (var i = 0; i < cnt; i++) { data.push({ id: i, date: new Date(Date.now() - Math.random() * 10 * 24 * 3600 * 1000), country: countries[i % countries.length], active: Math.random() < .5, sales: Math.random() * 1000, expenses: Math.random() * 500 }); } return data; }
.wj-flexgrid { height: 300px; } .wj-flexgrid .wj-cell.wj-frozen { background: #FFFBDD; } .ctx-menu { padding: 3px; min-width: 120px; background: rgb(221, 250, 255); overflow: hidden; } .ctx-menu .wj-listbox-item { margin: 6px; }
import { Menu } from '@mescius/wijmo.input'; import { CellRange, GroupRow, AllowSorting, ClipStringOptions } from '@mescius/wijmo.grid'; import { DataType, SortDescription, CollectionViewGroup, PropertyGroupDescription, saveFile } from '@mescius/wijmo'; import { FlexGridXlsxConverter } from '@mescius/wijmo.grid.xlsx'; import { FlexGridPdfConverter, ScaleMode } from '@mescius/wijmo.grid.pdf'; export class FlexGridContextMenu { constructor(grid) { let host = grid.hostElement, menu = this._buildMenu(grid); host.addEventListener('contextmenu', (e) => { // select the cell/column that was clicked let sel = grid.selection, ht = grid.hitTest(e), row = ht.getRow(); switch (ht.panel) { case grid.cells: let colIndex = ht.col; // if this is a group header, select the group column if (row instanceof GroupRow && row.dataItem instanceof CollectionViewGroup) { let gd = row.dataItem.groupDescription; if (gd instanceof PropertyGroupDescription) { let col = grid.getColumn(gd.propertyName); if (col && col.index > -1) { colIndex = col.index; } } } grid.select(ht.row, colIndex); break; case grid.columnHeaders: grid.select(sel.row, ht.col); break; case grid.rowHeaders: grid.select(ht.row, sel.col); break; default: return; // invalid panel } // show the menu for the current column if (grid.selection.col > -1) { e.preventDefault(); // cancel the browser's default menu menu.show(e); // and show ours } }, true); } _buildMenu(grid) { let menu = new Menu(document.createElement('div'), { owner: grid.hostElement, displayMemberPath: 'header', subItemsPath: 'items', commandParameterPath: 'cmd', dropDownCssClass: 'ctx-menu', openOnHover: true, closeOnLeave: true, itemsSource: [ { header: 'ソート', items: [ { header: '昇順', cmd: 'SRT_ASC' }, { header: '降順', cmd: 'SRT_DESC' }, { header: 'なし', cmd: 'SRT_NONE' }, { header: '-' }, { header: 'すべてのソートを解除', cmd: 'SRT_CLR' } ] }, { header: '-' }, { header: '列の固定/固定解除', cmd: 'PIN' }, { header: '-' }, { header: '列幅の自動調整', cmd: 'ASZ' }, { header: 'すべての列幅の自動調整', cmd: 'ASZ_ALL' }, { header: '-' }, { header: 'グループ化/グループ解除', cmd: 'GRP' }, { header: 'すべてのグループを解除', cmd: 'GRP_CLR' }, { header: '-' }, { header: 'エクスポート', items: [ { header: 'CSV', cmd: 'X_CSV' }, { header: 'Excel', cmd: 'X_XLSX' }, { header: 'PDF', cmd: 'X_PDF' }, ] } ], command: { // enable/disable menu commands canExecuteCommand: (cmd) => { let view = grid.collectionView, col = grid.columns[grid.selection.col]; switch (cmd) { case 'SRT_ASC': return col.currentSort != '+'; case 'SRT_DESC': return col.currentSort != '-'; case 'SRT_NONE': return col.currentSort != null; case 'SRT_CLR': return view.sortDescriptions.length > 0; case 'PIN': return true; // toggle pin case 'ASZ': case 'ASZ_ALL': return true; case 'GRP': return col.dataType != DataType.Number; // don't group numbers case 'GRP_CLR': return view.groupDescriptions.length > 0; } return true; }, // execute menu commands executeCommand: (cmd) => { let view = grid.collectionView, cols = grid.columns, col = cols[grid.selection.col], sd = view.sortDescriptions, gd = view.groupDescriptions; switch (cmd) { case 'SRT_ASC': case 'SRT_DESC': case 'SRT_NONE': if (grid.allowSorting != AllowSorting.MultiColumn) { sd.clear(); } else { for (let i = 0; i < sd.length; i++) { if (sd[i].property == col.binding) { sd.removeAt(i); break; } } } if (cmd != 'SRT_NONE') { sd.push(new SortDescription(col.binding, cmd == 'SRT_ASC')); } break; case 'SRT_CLR': sd.clear(); break; case 'PIN': let fCols = grid.frozenColumns; if (col.index >= fCols) { // pinning cols.moveElement(col.index, fCols, false); cols.frozen++; } else { // unpinning cols.moveElement(col.index, fCols - 1, false); cols.frozen--; } break; case 'ASZ': grid.autoSizeColumn(col.index); break; case 'ASZ_ALL': grid.autoSizeColumns(0, grid.columns.length - 1); break; case 'GRP': // remove group for (let i = 0; i < gd.length; i++) { if (gd[i].propertyName == col.binding) { gd.removeAt(i); return; // we're done } } // add group gd.push(new PropertyGroupDescription(col.binding)); break; case 'GRP_CLR': gd.clear(); break; // export case 'X_CSV': let rng = new CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1), csv = grid.getClipString(rng, ClipStringOptions.CSV, true, false); saveFile(csv, 'FlexGrid.csv'); break; case 'X_XLSX': FlexGridXlsxConverter.saveAsync(grid, null, 'FlexGrid.xlsx'); break; case 'X_PDF': FlexGridPdfConverter.export(grid, 'FlexGrid.pdf', { embeddedFonts: [{ source: 'https://demo.mescius.jp/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }], maxPages: 10, scaleMode: ScaleMode.PageWidth, documentOptions: { compress: true, header: { declarative: { text: '\t&[Page] of &[Pages]' } }, footer: { declarative: { text: '\t&[Page] of &[Pages]' } }, info: { author: 'MESCIUS', title: 'FlexGrid' } }, styles: { cellStyle: { font: { family: 'ipaexg' }, backgroundColor: '#ffffff', borderColor: '#c6c6c6' }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); break; } // restore focus to active grid cell grid.refresh(); let sel = grid.selection, cell = grid.cells.getCellElement(sel.row, sel.col); if (cell) { cell.focus(); } } } }); // done return menu; } }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);