XML 문서에 바인딩

이 샘플은 XML 문서를 FlexGrid 컨트롤의 계층 구조 데이터 소스로 사용하는 방법을 보여 줍니다. DOMParser 객체를 사용하여 XML 문자열을 문서 객체로 구문 분석한 다음, 문서를 반복하여 각각 "products" 배열을 포함하는 "category" 항목의 배열을 작성합니다. 이 배열을 itemsSource로 사용하고, childItemsPath 속성을 사용하여 각 범주의 제품을 트리로 표시합니다.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // var theGrid = new wjGrid.FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'name', header: 'Name', width: '3*' }, { binding: 'id', header: 'ID', dataType: 'String', width: '*' }, { binding: 'price', header: 'Unit Price', format: 'n2', dataType: 'Number', width: '*' }, ], headersVisibility: 'Column', childItemsPath: 'products', treeIndent: 25, itemsSource: getProductsByCategory() }); // // parse an XML document into an array function getProductsByCategory() { var items = [], parser = new DOMParser(), xml = getXml(), doc = parser.parseFromString(xml, 'application/xml'); // // get categories var categories = doc.querySelectorAll('category'); for (var c = 0; c < categories.length; c++) { var category = categories[c]; items.push({ id: parseInt(category.getAttribute('id')), name: category.getAttribute('name'), products: [] }); // // get products in this category var products = category.querySelectorAll('product'); for (var p = 0; p < products.length; p++) { var product = products[p]; items[items.length - 1].products.push({ id: parseInt(product.getAttribute('id')), name: product.getAttribute('name'), price: parseFloat(product.getAttribute('price')) }); } } // // all done return items; } // // get the XML string used as a data source function getXml() { return '<categories>' + '<category id="0" name="Beverages">' + '<product id="1" name="Chai" price="18" />' + '<product id="2" name="Chang" price="19" />' + '<product id="24" name="Guarana Fantastica" price="4.5" />' + '<product id="34" name="Sasquatch Ale" price="14" />' + '</category>' + '<category id="1" name="Condiments">' + '<product id="3" name="Aniseed Syrup" price="10" />' + '<product id="4" name="Chef Anton\'s Cajun Seasoning" price="22" />' + '<product id="5" name="Chef Anton\'s Gumbo Mix" price="21.35" />' + '<product id="6" name="Grandma\'s Boysenberry Spread" price="25" />' + '<product id="8" name="Northwoods Cranberry Sauce" price="40" />' + '<product id="15" name=" Genen Shouyu" price="15.5" />' + '</category>' + '<category id="2" name="Confections">' + '<product id="16" name="Pavlova" price="17.45" />' + '<product id="19" name="Teatime Chocolate Biscuits" price="9.2" />' + '<product id="20" name="Sir Rodney\'s Marmalade" price="81" />' + '<product id="21" name="Sir Rodney\'s Scones" price="10" />' + '<product id="25" name="NuNuCa Nuß-Nougat-Creme" price="14" />' + '<product id="26" name="Gumbär Gummibärchen" price="31.23" />' + '<product id="27" name="Schoggi Schokolade" price="43.9" />' + '</category>' + '<category id="3" name="Dairy Products">' + '<product id="11" name="Queso Cabrales" price="21" />' + '<product id="12" name="Queso Manchego La Pastora" price="38" />' + '<product id="31" name="Gorgonzola Telino" price="12.5" />' + '<product id="32" name="Mascarpone Fabioli" price="32" />' + '<product id="33" name="Geitost" price="2.5" />' + '<product id="59" name="Raclette Courdavault" price="55" />' + '<product id="60" name="Camembert Pierrot" price="34" />' + '<product id="69" name="Gudbrandsdalsost" price="36" />' + '</category>' + '<category id="4" name="Grains/Cereals">' + '<product id="22" name="Gustaf\'s Knäckebröd" price="21" />' + '<product id="23" name="Tunnbröd" price="9" />' + '<product id="42" name="Singaporean Hokkien Fried Mee" price="14" />' + '<product id="52" name="Filo Mix" price="7" />' + '<product id="56" name="Gnocchi di nonna Alice" price="38" />' + '<product id="57" name="Ravioli Angelo" price="19.5" />' + '<product id="64" name="Wimmers gute Semmelknödel" price="33.25" />' + '</category>' + '<category id="5" name="Meat/Poultry">' + '<product id="9" name="Mishi Kobe Niku" price="97" />' + '<product id="17" name="Alice Mutton" price="39" />' + '<product id="29" name="Thüringer Rostbratwurst" price="123.79" />' + '<product id="53" name="Perth Pasties" price="32.8" />' + '<product id="54" name="Tourtière" price="7.45" />' + '<product id="55" name="Pâté chinois" price="24" />' + '</category>' + '<category id="6" name="Produce">' + '<product id="7" name="Uncle Bob\'s Organic Dried Pears" price="30" />' + '<product id="14" name="Tofu" price="23.25" />' + '<product id="28" name="Rössle Sauerkraut" price="45.6" />' + '<product id="51" name="Manjimup Dried Apples" price="53" />' + '<product id="74" name="Longlife Tofu" price="10" />' + '</category>' + '<category id="7" name="Seafood">' + '<product id="10" name="Ikura" price="31" />' + '<product id="13" name="Konbu" price="6" />' + '<product id="18" name="Carnarvon Tigers" price="62.5" />' + '<product id="30" name="Nord-Ost Matjeshering" price="25.89" />' + '<product id="36" name="Inlagd Sill" price="19" />' + '<product id="37" name="Gravad lax" price="26" />' + '<product id="40" name="Boston Crab Meat" price="18.4" />' + '</category>' + '</categories>'; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Tree Grid Binding to XML Documents</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> </div> </body> </html>
.wj-flexgrid { height: 300px; } .wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) { background: white; color: #444; border-bottom: none; }
(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);