레이아웃 정의 | Layout Definition

TransposedMultiRow 컨트롤은 TransposedGrid 컨트롤과 같이 열이 데이터 항목을 나타내고 행이 항목 속성을 나타내는 전치 레이아웃을 사용하여 데이터를 표시하도록 FlexGrid 컨트롤을 확장합니다.

그러나 TransposedGrid 컨트롤과 달리 TransposedMultiRow 컨트롤은 여러 열을 사용하여 각 데이터 항목을 나타냅니다.

MultiRow 컨트롤과 마찬가지로 TransposedMultiRow 컨트롤은 layoutDefinition 속성을 사용하여 레이아웃을 사용자 지정할 수도 있습니다. 이 속성은 MultiRow 컨트롤에서와 동일한 의미와 사용법을 갖지만 결과 view는 전치로 인해 다르게 보입니다.

이 샘플은 레이아웃 정의가 동일한 TransposedMultiRowMultiRow 컨트롤 간의 차이점을 보여줍니다.

FlexGrid 알아보기 | Layout Definition 도움말 | TransposedMultiRow API 문서

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjPdf from '@grapecity/wijmo.pdf'; import * as wjGridPdf from '@grapecity/wijmo.grid.pdf'; import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx'; import { MultiRow } from '@grapecity/wijmo.grid.multirow'; import { TransposedMultiRow } from '@grapecity/wijmo.grid.transposedmultirow'; import { generateAppData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let appData = generateAppData(); let orders = appData.orders; let layoutDefs = appData.layoutDefs; let currentLayout = appData.layoutDefs.currentItem; let trnMultirow = new TransposedMultiRow('#trnMultirow', { itemsSource: orders, layoutDefinition: currentLayout.def }); let ordMultirow = new MultiRow('#ordMultirow', { itemsSource: orders, layoutDefinition: currentLayout.def }); let ldComboBox = new wjInput.ComboBox('#ldComboBox', { itemsSource: layoutDefs, displayMemberPath: 'name' }); // updateDescriptions(); layoutDefs.currentChanged.addHandler(() => { currentLayout = appData.layoutDefs.currentItem; updateMultirow(); updateDescriptions(); }); // document.getElementById('btnExportToExcel').addEventListener('click', function () { wjGridXlsx.FlexGridXlsxConverter.saveAsync(trnMultirow, { includeRowHeaders: true }, 'FlexGrid.xlsx'); }); // document.getElementById('btnExportToPDF').addEventListener('click', function () { wjGridPdf.FlexGridPdfConverter.export(trnMultirow, 'FlexGrid.pdf', { documentOptions: { pageSettings: { layout: wjPdf.PdfPageOrientation.Landscape } }, scaleMode: wjGridPdf.ScaleMode.ActualSize }); }); // function updateMultirow() { trnMultirow.layoutDefinition = currentLayout.def; ordMultirow.layoutDefinition = currentLayout.def; } // function updateDescriptions() { wjCore.setText(document.querySelector('#mainDesc'), currentLayout.descriptions.main); wjCore.setText(document.querySelector('#trnDesc'), currentLayout.descriptions.transposedView); wjCore.setText(document.querySelector('#ordDesc'), currentLayout.descriptions.ordinaryView); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo TransposedMultiRow Layout Definition</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>Layout option: <div id="ldComboBox"></div></label> <p id="mainDesc"></p> <label>Transposed MultiRow</label> <p id="trnDesc"></p> <div id="trnMultirow"></div> <div> <button id="btnExportToExcel" class="btn btn-default"> Export To Excel </button> <button id="btnExportToPDF" class="btn btn-default"> Export To PDF </button> </div> <label>Ordinary MultiRow</label> <p id="ordDesc"></p> <div id="ordMultirow"></div> </div> </body> </html>
import * as wjCore from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.grid'; // export function generateAppData() { // create some data let appData = {}, customers = [], firstNames = 'Aaron,Paul,John,Mark,Sue,Tom,Bill,Joe,Tony,Brad,Frank,Chris,Pat'.split(','), lastNames = 'Smith,Johnson,Richards,Bannon,Wong,Peters,White,Brown,Adams,Jennings'.split(','), cities = 'York,Paris,Rome,Cairo,Florence,Sidney,Hamburg,Vancouver'.split(','), states = 'SP,RS,RN,SC,CS,RT,BC'.split(','); for (let i = 0; i < 50; i++) { let first = randArray(firstNames), last = randArray(lastNames); customers.push({ id: i, name: first + ' ' + last, address: randBetween(100, 10000) + ' ' + randArray(lastNames) + ' St.', city: randArray(cities), state: randArray(states), zip: wjCore.format('{p1:d5}-{p2:d3}', { p1: randBetween(10000, 99999), p2: randBetween(100, 999) }), email: first + '.' + last + '@gmail.com', phone: wjCore.format('{p1:d3}-{p2:d4}', { p1: randBetween(100, 999), p2: randBetween(1000, 9999) }) }); } let cityMap = new wjGrid.DataMap(cities); let shippers = [ { id: 0, name: 'Speedy Express', email: 'speedy@gmail.com', phone: '431-3234', express: true }, { id: 1, name: 'Flash Delivery', email: 'flash@gmail.com', phone: '431-6563', express: true }, { id: 2, name: 'Logitrax', email: 'logitrax@gmail.com', phone: '431-3981', express: false }, { id: 3, name: 'Acme Inc', email: 'acme@gmail.com', phone: '431-3113', express: false } ]; let orders = []; let today = new Date(); for (let i = 0; i < 20; i++) { let shipped = wjCore.DateTime.addDays(today, -randBetween(1, 3000)); orders.push({ id: i, date: wjCore.DateTime.addDays(shipped, -randBetween(1, 5)), shippedDate: shipped, amount: randBetween(10000, 500000) / 100, customer: clone(randArray(customers)), shipper: clone(randArray(shippers)) }); } // function randBetween(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // function randArray(arr) { return arr[randBetween(0, arr.length - 1)]; } // shallow copy function clone(obj) { if (wjCore.isFunction(Object.assign)) { // IE does not support it return Object.assign({}, obj); } let clone = {}; for (let prop in obj) { if (obj.hasOwnProperty(prop)) { clone[prop] = obj[prop]; } } return clone; } // expose orders CollectionView to the app appData.orders = new wjCore.CollectionView(orders); // expose grouped orders CollectionView to the app appData.groupedOrders = new wjCore.CollectionView(orders, { groupDescriptions: [ 'customer.city' ] }); // expose paged orders CollectionView to the app appData.pagedOrders = new wjCore.CollectionView(orders, { pageSize: 4 }); // expose addNew oders CollectionView to the app appData.addNewOrders = new wjCore.CollectionView(orders, { newItemCreator: function () { return { customer: {}, shipper: {} }; }, }); appData.addNewOrders.moveCurrentToLast(); // refresh views when data source changes let ordersRefreshing = false; appData.orders.collectionChanged.addHandler(function () { ordersRefreshing = true; if (!pagedOrdersRefreshing) { appData.pagedOrders.refresh(); } if (!groupedOrdersRefreshing) { appData.groupedOrders.refresh(); } if (!addNewOrdersRefreshing) { appData.addNewOrders.refresh(); } ordersRefreshing = false; }); // addNew orders let addNewOrdersRefreshing = false; appData.addNewOrders.collectionChanged.addHandler(function () { addNewOrdersRefreshing = true; if (!ordersRefreshing) { appData.orders.refresh(); } if (!pagedOrdersRefreshing) { appData.pagedOrders.refresh(); } if (!groupedOrdersRefreshing) { appData.groupedOrders.refresh(); } addNewOrdersRefreshing = false; }); // grouped orders let groupedOrdersRefreshing = false; appData.groupedOrders.collectionChanged.addHandler(function () { groupedOrdersRefreshing = true; if (!ordersRefreshing) { appData.orders.refresh(); } if (!pagedOrdersRefreshing) { appData.pagedOrders.refresh(); } if (!addNewOrdersRefreshing) { appData.addNewOrders.refresh(); } groupedOrdersRefreshing = false; }); // paged orders let pagedOrdersRefreshing = false; appData.pagedOrders.collectionChanged.addHandler(function () { pagedOrdersRefreshing = true; if (!ordersRefreshing) { appData.orders.refresh(); } if (!addNewOrdersRefreshing) { appData.addNewOrders.refresh(); } if (!groupedOrdersRefreshing) { appData.groupedOrders.refresh(); } pagedOrdersRefreshing = false; }); // sample layout definitions appData.ldOneLine = [ { cells: [{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true }] }, { cells: [{ binding: 'date', header: 'Ordered' }] }, { cells: [{ binding: 'shippedDate', header: 'Shipped' }] }, { cells: [{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' }] }, { cells: [{ binding: 'customer.name', header: 'Customer' }] }, { cells: [{ binding: 'customer.address', header: 'Address', wordWrap: true }] }, { cells: [{ binding: 'customer.city', header: 'City', dataMap: cityMap }] }, { cells: [{ binding: 'customer.state', header: 'State', width: 45 }] }, { cells: [{ binding: 'customer.zip', header: 'Zip' }] }, { cells: [{ binding: 'customer.email', header: 'Customer Email', cssClass: 'email' }] }, { cells: [{ binding: 'customer.phone', header: 'Customer Phone' }] }, { cells: [{ binding: 'shipper.name', header: 'Shipper' }] }, { cells: [{ binding: 'shipper.email', header: 'Shipper Email', cssClass: 'email' }] }, { cells: [{ binding: 'shipper.phone', header: 'Shipper Phone' }] }, { cells: [{ binding: 'shipper.express', header: 'Express' }] } ]; appData.ldThreeLines = [ { header: 'Order', colspan: 3, cells: [ { binding: 'id', header: 'ID', rowspan: 2, cssClass: 'id' }, { binding: 'amount', header: 'Amount', format: 'c', rowspan: 2, cssClass: 'amount' }, { binding: 'date', header: 'Ordered' }, { binding: 'shippedDate', header: 'Shipped' } ] }, { header: 'Customer', colspan: 3, cells: [ { binding: 'customer.name', header: 'Name' }, { binding: 'customer.address', header: 'Address', rowspan: 2 }, { binding: 'customer.city', header: 'City', dataMap: cityMap }, { binding: 'customer.email', header: 'EMail', rowspan: 2, cssClass: 'email' }, { binding: 'customer.state', header: 'State', width: 45 }, { binding: 'customer.phone', header: 'Phone' }, { binding: 'customer.zip', header: 'Zip' }, ] }, { header: 'Shipper', colspan: 3, cells: [ { binding: 'shipper.name', header: 'Shipper' }, { binding: 'shipper.email', header: 'EMail', cssClass: 'email' }, { binding: 'shipper.express', header: 'Express' } ] } ]; appData.layoutDefs = new wjCore.CollectionView([ { name: 'Basic layout', descriptions: { main: 'This layout is divided into three groups: order, customer, and shipper. Each group consists of multiple properties and spans three columns.', transposedView: 'This view uses three columns per record, and different number of rows per group.', ordinaryView: 'This view uses the same number of rows per record, and three columns per group.' }, def: appData.ldThreeLines }, { name: 'Grid layout', descriptions: { main: 'This layout is like a grid view. Each group consists of single property and spans one column.', transposedView: 'This view corresponds to transposed grid view in which columns represent records.', ordinaryView: 'This view corresponds to traditional grid view in which rows represent records.' }, def: appData.ldOneLine } ]); return appData; }
.wj-transposed-multirow { height: 300px; margin: 6px 0; } .wj-multirow { height: 400px; margin: 6px 0; }
(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);