ODataCollectionView를 사용한 서버 기반 그룹화

Wijmo는 OData 소스를 지원하기 위해 ODataCollectionView 클래스를 제공하고 있습니다.

ODataCollectionView 클래스를 사용하기 위해, 데이터 서비스의 URL, 접근하려는 테이블 이름, 필드와 같은 선택적 매개변수, 서버 또는 클라이언트에서 필터링, 정렬 및 페이징을 수행할지 여부 등을 전달하여 새 인스턴스를 생성합니다.

ODataOASIS 표준으로 RESTful API를 구축하고 소비하는 데 대한 모범 사례를 정의합니다. OData는 OData 7.0 이후로 집계 지원 을 추가했습니다.

ODataCollectionView 클래스는 서버 기반 그룹화를 수행할 수 있습니다. 이를 위해서는 groupOnServer 를 true로 설정해야 합니다. 이 클래스는 OData API에서 그룹화가 지원되는지 여부를 확인합니다.

제공된 OData API가 서버 기반 그룹화를 지원하지 않으면 오류가 발생하고 실행이 중지됩니다.

서버 기반 그룹화 외에도, ODataCollectionView 클래스는 그룹 지연 로딩 지원을 제공합니다. 이 기능은 처음에는 최상위 그룹만 로드합니다. 나머지 데이터는 lazyLoadGroup 을 호출하여 대상 그룹을 확장함으로써 필요에 따라 로드됩니다. 이 메서드 호출은 그리드 인스턴스에서 내부적으로 처리됩니다.

그룹 지연 로딩을 활성화하려면 groupLazyLoading 속성을 true로 설정해야 합니다.

FlexGrid 알아보기 | ODataCollectionView 문서 | FlexGrid API 문서

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import { DataType } from '@mescius/wijmo'; import { ODataCollectionView } from '@mescius/wijmo.odata'; import { FlexGrid } from '@mescius/wijmo.grid'; import { FlexGridFilter } from '@mescius/wijmo.grid.filter'; document.readyState === 'complete' ? init() : window.onload = init; function init() { let url = "https://demodata.mescius.io/adventureworks/odata/v1/"; let tableName = "SalesOrderHeaders"; let fields = "AccountNumber,PurchaseOrderNumber,SalesOrderNumber,SubTotal,TaxAmt,Freight,TotalDue,ModifiedDate".split(','); let cvSettings = { fields: fields, sortOnServer: true, filterOnServer: true, groupOnServer: true, groupLazyLoading: true, groupDescriptions: ['AccountNumber'] }; // create the grid to show the data let theGrid = new FlexGrid('#theGrid', { isReadOnly: true, autoGenerateColumns: false, columns: [ { binding: 'AccountNumber', header: 'Account Number', visible: false, dataType: DataType.String }, { binding: 'PurchaseOrderNumber', header: 'Purchase Order Number', dataType: DataType.String, width: '*', minWidth: 200 }, { binding: "SalesOrderNumber", header: "Sales Order Number", dataType: DataType.String, width: '*', minWidth: 200 }, { binding: "SubTotal", header: "Sub Total", dataType: DataType.Number }, { binding: "TaxAmt", header: "Tax Amount", dataType: DataType.Number }, { binding: "Freight", header: "Freight", dataType: DataType.Number }, { binding: "TotalDue", header: "Total Due", dataType: DataType.Number }, { binding: "ModifiedDate", header: "Modified Date", dataType: DataType.Date } ], //create ODataCollectionView instance itemsSource: new ODataCollectionView(url, tableName, cvSettings) }); // add the filter with Condition filter as default new FlexGridFilter(theGrid, { defaultFilterType: 'Condition' }); document.getElementById("feature-options").addEventListener('click', (e) => { let element = e.target; // to avoid click for label switch (element && element.id) { case 'groupServer': cvSettings.groupLazyLoading = false; break; case 'lazyload': cvSettings.groupLazyLoading = true; break; } if (element.tagName == "INPUT") { theGrid.itemsSource = new ODataCollectionView(url, tableName, cvSettings); } }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid ODataCollectionView Binding</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="feature-options"> <label for="groupServer"> <input id="groupServer" type="radio" name="feature" value="groupOnServer" > Server-based group </label> <br> <label for="lazyload"> <input id="lazyload" type="radio" name="feature" value="lazyLoadGrouping" checked> Lazy-load grouping </label> </div> <div id="theGrid"></div> </div> </body> </html>
.wj-flexgrid { height: 300px; } body { margin-bottom: 20pt; }
(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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/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);