행 세부 정보 사용자 정의

일반 그리드에 쉽게 들어가는 것보다 많은 정보를 포함하는 데이터 개체에 행이 바인딩된 경우도 있습니다.

이러한 시나리오에서는 wijmo.grid.detail 모듈에 포함된 FlexGridDetailProvider 클래스를 사용하는 것이 좋습니다. FlexGridDetailProvider는 사용자가 나머지 데이터를 보기 위해 확장할 수 있는 세부 정보 섹션을 각 행에 만듭니다.

사용자가 상호 작용할 수 있도록 행의 세부 정보 섹션 내에 사용자 정의 HTML 요소를 포함할 수 있습니다. 아래 샘플에서는 누르면 세부 정보가 축소되는 버튼을 세부 정보 섹션에 포함하는 방법을 보여 줍니다.

FlexGrid 알아보기 | FlexGrid API 문서

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjOdata from '@grapecity/wijmo.odata'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjGridDetail from '@grapecity/wijmo.grid.detail'; // // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // get OData categories and products const url = 'https://services.odata.org/Northwind/Northwind.svc'; const categories = new wjOdata.ODataCollectionView(url, 'Categories', { fields: ['CategoryID', 'CategoryName', 'Description'] }); const products = new wjOdata.ODataCollectionView(url, 'Products'); // // shared column definitions const categoryColumns = [ { binding: 'CategoryName', header: 'Category Name', width: '*' }, { binding: 'Description', header: 'Description', width: '2*' } ]; // // get products for a given category const _catToProductMap = new Map(); function getProducts(categoryID) { let categoryProducts = _catToProductMap.get(categoryID); if (!categoryProducts) { categoryProducts = products.items.filter(product => (product.CategoryID === categoryID)); _catToProductMap.set(categoryID, categoryProducts); } return categoryProducts; } // // // grid with HTML detail const customDetail = new wjGrid.FlexGrid('#customDetail', { autoGenerateColumns: false, itemsSource: categories, isReadOnly: true, headersVisibility: 'Column', selectionMode: 'Row', columns: categoryColumns, itemFormatter: (panel, rowIdx, columnIdx, cell) => { if ((panel.cellType == wjGrid.CellType.Cell) && (columnIdx == 0)) { const cat = panel.rows[rowIdx].dataItem; if (cat) { cell.innerHTML = `${cat.CategoryName} (ID: ${cat.CategoryID})`; const control = document.createElement('span'); control.className = 'glyphicon'; if (dpCustom.isDetailAvailable(rowIdx)) { if (dpCustom.isDetailVisible(rowIdx)) { control.className = 'glyphicon glyphicon-chevron-up'; control.addEventListener('click', () => dpCustom.hideDetail(rowIdx)); } else { control.className = 'glyphicon glyphicon-chevron-down'; control.addEventListener('click', () => dpCustom.showDetail(rowIdx, true)); } } cell.insertBefore(control, cell.firstChild); } } }, }); // //custom show/hide detail provider const dpCustom = new wjGridDetail.FlexGridDetailProvider(customDetail, { detailVisibilityMode: 'Code', rowHasDetail: row => !(row.dataItem.CategoryID % 2), createDetailCell: function (row) { // build detail content for the current category const cat = row.dataItem; const prods = getProducts(cat.CategoryID); let html = `ID: <b>${cat.CategoryID}</b><br/>`; html += `Name: <b>${cat.CategoryName}</b><br/>`; html += `Description: <b>${cat.Description}</b><br/>`; html += `<button class="btn btn-default btn-xs">Hide Detail</button>`; // // create and return detail cell const cell = document.createElement('div'); cell.innerHTML = html; // // bind button click cell.querySelector('button').addEventListener('click', e => { dpCustom.hideDetail(row); }); return cell; }, }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Row Details</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"> <h3>Using custom elements to show or hide details</h3> <p> This grid shows product categories on each row with custom show/hide elements. Expanding the rows shows an HTML element with information about the products in that category: </p> <div id="customDetail"></div> </div> </body> </html>
.wj-flexgrid { max-height: 350px; } body { margin-bottom: 20pt; } #customDetail .glyphicon { font-size: 1.25em; margin-right: 0.5em; cursor: pointer; color: gray; width: 1em; }
(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);