체크박스 기반 선택

행 선택을 위한 체크박스 기반 스키마를 추가하기 위해 FlexGrid의 Selector 클래스를 사용합니다.

이 선택 스키마는 일반적으로 확장 선택 항목을 만드는 컨트롤 키와 쉬프트 키가 없는 모바일 장치에 휼륭하게 작동합니다.

Selector 클래스는 일반 view와 계층 view에서 작동합니다. 계층 view와 함께 사용할 경우, 사용자는 전체 그룹에 대해 선택한 상태를 한 번에 토글할 수 있습니다.

Selector 클래스는 일반 스크롤 가능/데이터 열 뿐만 아니라 헤더 열에서도 사용할 수 있습니다.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid, HeadersVisibility } from '@grapecity/wijmo.grid'; import { Selector } from '@grapecity/wijmo.grid.selector'; import { CollectionView, PropertyGroupDescription } from '@grapecity/wijmo'; import { getData } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create the data (start grouped) let view = new CollectionView(getData(30)); setGroups(true); // create the grid let theGrid = new FlexGrid('#theGrid', { deferResizing: true, showMarquee: true, alternatingRowStep: 0, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'Country' }, { binding: 'product', header: 'Product' }, { binding: 'discount', header: 'Discount', format: 'p0' }, { binding: 'downloads', header: 'Downloads' }, { binding: 'sales', header: 'Sales' }, { binding: 'expenses', header: 'Expenses' } ], itemsSource: view }); // create the Selector let selector = new Selector(theGrid, { itemChecked: () => { showCheckedCount(); } }); // toggle groups document.getElementById('groups').addEventListener('click', e => { setGroups(e.target.checked); }); function setGroups(groupsOn) { let groups = view.groupDescriptions; groups.clear(); if (groupsOn) { groups.push(new PropertyGroupDescription('country'), new PropertyGroupDescription('product')); } } // toggle header column document.getElementById('header').addEventListener('click', e => { setHeaderColumn(e.target.checked); }); function setHeaderColumn(headerOn) { theGrid.headersVisibility = headerOn ? HeadersVisibility.All : HeadersVisibility.Column; selector.column = headerOn ? theGrid.rowHeaders.columns[0] : theGrid.columns[0]; } // show checked items showCheckedCount(); function showCheckedCount() { let cnt = document.getElementById('checked-count'), sel = theGrid.rows.filter(r => r.isSelected); cnt.textContent = sel.length.toString(); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Selector: Checkbox Selection</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"> <label> Grouped Data <input id="groups" type="checkbox" checked /> </label> <label> Header Column <input id="header" type="checkbox" checked /> </label> <p> There are now <b><span id="checked-count">0</span></b> items selected. </p> <div id="theGrid"></div> </div> </body> </html>
export function getData(count) { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Widgets,Gadgets,Yahoos'.split(','), data = []; for (var i = 0; i < count; i++) { var item = { id: i, country: pickOne(countries), product: pickOne(products), discount: Math.random() * .3, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }; data.push(item); } return data; } function pickOne(items) { return items[randBetween(0, items.length - 1)]; } function randBetween(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }
/* fixed grid height */ .wj-flexgrid { height: 350px; } /* some extra cell padding */ .wj-flexgrid .wj-cell { padding: 8px; } /* some space after the labels */ label { margin-right: 4em; }
(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', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/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);