재정렬 | Reordering

allowDragging 속성은 FlexGrid 컨트롤 내에서 행 및/또는 열 끌기를 활성화하는 데 사용할 수 있습니다.

기본적으로 열은 끌 수 있지만 행은 끌 수 없도록 설정되어 있습니다.

이 설정은 바인딩된 데이터에 적합합니다. 그리드가 데이터 원본에 바인딩되면 열은 이동되지만, 데이터 원본에 영향을 주지않습니다.

반면에 행에는 해당 행이 나타내는 데이터 개체에 대한 참조가 있습니다. 이를 이동하면 데이터 소스와 동기화되지 않게 됩니다.

또한 데이터 소스가 정렬되는 경우가 많을 경우 정렬 알고리즘에 의해 행 순서가 결정되는데, 이는 행을 드래그하여 설정한 명시적 위치와 일치되지 않습니다.

이 샘플은 바인딩된 그리드에서 행 끌기를 구현하는 방법을 보여줍니다.

두 단계가 필요합니다.

* 사용자가 데이터를 정렬하지 못하도록 그리드의 allowSorting 속성을 false로 설정합니다.

* 그리드의 draggedRow 이벤트를 처리하여 데이터 소스의 항목 순서를 새 행과 일치하도록 변경합니다.

행 머리글로 행을 끌어 새 위치로 행을 끌어 보십시오.

*참고*: 터치 장치에서 끌어서 놓기 작업을 활성화하려면 프로젝트에서 '@grapecity/wijmo.touch' 모듈을 가져와야 합니다.

FlexGrid 알아보기 | FlexGrid API 참고

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import '@grapecity/wijmo.touch'; // support drag/drop on touch devices import { AllowDragging, FlexGrid, SelectionMode } from '@grapecity/wijmo.grid'; import { getData } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create the grid with draggable rows let dragIndex; let theGrid = new FlexGrid('#theGrid', { itemsSource: getData(50), selectionMode: SelectionMode.ListBox, alternatingRowStep: 0, allowSorting: false, allowDragging: AllowDragging.Both, // save the drag row index when dragging starts draggingRow: (s, e) => { dragIndex = e.row; s.collectionView.moveCurrentToPosition(dragIndex); }, // reorder items in the data source when dragging ends draggedRow: (s, e) => { let dropIndex = e.row, arr = s.collectionView.sourceCollection; s.collectionView.deferUpdate(() => { let item = arr[dragIndex]; arr.splice(dragIndex, 1); arr.splice(dropIndex, 0, item); s.collectionView.moveCurrentToPosition(dropIndex); }); }, }); // show the current item document.getElementById('currItem').addEventListener('click', () => { let currItem = JSON.stringify(theGrid.collectionView.currentItem); alert('The currentItem is: ' + currItem); }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Reordering Rows</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="theGrid"></div> <button id="currItem" class="btn btn-default"> Show current item </button> </div> </body> </html>
// generate some random data export function getData(cnt) { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < cnt; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 100000 * 100) / 100, expenses: Math.round(Math.random() * 50000 * 100) / 100 }); } return data; }
.wj-flexgrid { max-height: 400px; margin: 10px 0; } .wj-flexgrid .wj-cell { padding: 8px; }
(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.chart.map': 'npm:@grapecity/wijmo.chart.map/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.rest': 'npm:@grapecity/wijmo.rest/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);