ツリービュー:ODataの遅延読み込み

この例では、TreeViewコントロールを使用してODataソースから階層データを表示する方法を示します。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjNav from '@grapecity/wijmo.nav'; import * as wjOdata from '@grapecity/wijmo.odata'; import * as wjCore from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // NorthWind service URL var nwindService = 'https://services.odata.org/Northwind/Northwind.svc'; // // create the tree var tree = new wjNav.TreeView('#theTree', { displayMemberPath: ['FullName', 'ShipName', 'Summary'], childItemsPath: ['Orders', 'Order_Details'], lazyLoadFunction: lazyLoadODataFunction, }); // // get employee list var view = new wjOdata.ODataCollectionView(nwindService, 'Employees', { fields: 'EmployeeID,FirstName,LastName'.split(','), loaded: function (s, e) { // // when the data is loaded, add FullName and Orders array to employees var items = s.items.map(function (employee) { employee.FullName = employee.FirstName + ' ' + employee.LastName; employee.Orders = []; // lazy-load orders }); // // populate the tree with the employees array tree.itemsSource = s.items; } }); // // lazy-load orders and details function lazyLoadODataFunction(node, callback) { switch (node.level) { // // load orders for an employee case 0: var url = 'Employees(' + node.dataItem.EmployeeID + ')/Orders'; var orders = new wjOdata.ODataCollectionView(nwindService, url, { fields: 'OrderID,ShipName,ShipCountry'.split(','), loaded: function () { var items = orders.items.map(function (e) { e.Order_Details = []; // lazy-order details return e; }); callback(items); } }); break; // // load extended details for an order case 1: var url = "Order_Details_Extendeds?$filter=OrderID eq " + node.dataItem.OrderID; var details = new wjOdata.ODataCollectionView(nwindService, url, { fields: 'ProductName,ExtendedPrice'.split(','), loaded: function () { var items = details.items.map(function (e) { e.Summary = wjCore.format('{ProductName}: {ExtendedPrice:c}', e); return e; }); callback(items); } }); break; // // default default: callback(null); } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Sample</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="theTree"></div> </div> </body> </html> /* level 0 nodes and deeper (employees...) */ .wj-treeview .wj-nodelist > .wj-node { font-weight: bold; } /* level 1 nodes and deeper (orders...) */ .wj-treeview .wj-nodelist > .wj-nodelist > .wj-node { font-weight: normal; font-size: 95%; color: darkblue; } /* level 2 nodes and deeper (order details...) */ .wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist > .wj-node { font-size: 90%; color: darkslategrey; } /* default trees on this sample */ .wj-treeview { height: 350px; border: 1px solid rgba(0,0,0,0.2); } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjCore from '@grapecity/wijmo'; import * as wjData from '@grapecity/wijmo.odata'; import * as wjNav from '@grapecity/wijmo.nav'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjNavModule } from '@grapecity/wijmo.angular2.nav'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { private _nwindService: string = 'https://services.odata.org/Northwind/Northwind.svc'; items: any[] = []; lazyLoadODataItems: any[] = []; lazyLoadODataFunction: Function; // constructor() { var employees: wjData.ODataCollectionView; employees = new wjData.ODataCollectionView(this._nwindService, 'Employees', { fields: 'EmployeeID,FirstName,LastName'.split(','), loaded: () => { var items = employees.items.map((e) => { e.FullName = e.FirstName + ' ' + e.LastName; e.Orders = []; // lazy-load orders return e; }); this.lazyLoadODataItems = items; } }); // lazy loading function this.lazyLoadODataFunction = this._lazyLoadODataFunction.bind(this); } private _lazyLoadODataFunction(node: wjNav.TreeNode, callback: Function) { switch (node.level) { // load orders for an employee case 0: var url = 'Employees(' + node.dataItem.EmployeeID + ')/Orders'; var orders = new wjData.ODataCollectionView(this._nwindService, url, { fields: 'OrderID,ShipName,ShipCountry'.split(','), loaded: () => { var items = orders.items.map(function (e) { e.Order_Details = []; // lazy-order details return e; }); callback(items); } }); break; // load extended details for an order case 1: var url = "Order_Details_Extendeds/?$filter=OrderID eq " + node.dataItem.OrderID; var details = new wjData.ODataCollectionView(this._nwindService, url, { fields: 'ProductName,ExtendedPrice'.split(','), loaded: () => { var items = details.items.map((e) => { e.Summary = wjCore.format('{ProductName}: {ExtendedPrice:c}', e); return e; }); callback(items); } }); break; // default default: callback(null); } } } // @NgModule({ imports: [WjNavModule, BrowserModule], declarations: [AppComponent], providers: [], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Hosting GCControls</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-tree-view #tvLazyLoadOData [itemsSource]="lazyLoadODataItems" [displayMemberPath]="['FullName', 'ShipName', 'Summary' ]" [childItemsPath]="['Orders', 'Order_Details']" [lazyLoadFunction]="lazyLoadODataFunction"> </wj-tree-view> </div> /* level 0 nodes and deeper (employees...) */ .wj-treeview .wj-nodelist > .wj-node { font-weight: bold; } /* level 1 nodes and deeper (orders...) */ .wj-treeview .wj-nodelist > .wj-nodelist > .wj-node { font-weight: normal; font-size: 95%; color: darkblue; } /* level 2 nodes and deeper (order details...) */ .wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist > .wj-node { font-size: 90%; color: darkslategrey; } /* default trees on this sample */ .wj-treeview { height: 350px; border: 1px solid rgba(0,0,0,0.2); } body { margin-bottom: 24pt; } import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjNav from '@grapecity/wijmo.react.nav'; import * as wjCore from '@grapecity/wijmo'; import * as wjData from '@grapecity/wijmo.odata'; class App extends React.Component { constructor(props) { super(props); this.state = { lazyLoadODataItems: [], nwindService: 'https://services.odata.org/Northwind/Northwind.svc', }; this.created(); } render() { return (<div className="container-fluid"> <wjNav.TreeView itemsSource={this.state.lazyLoadODataItems} displayMemberPath={['FullName', 'ShipName', 'Summary']} childItemsPath={['Orders', 'Order_Details']} lazyLoadFunction={this.lazyLoadODataFunction.bind(this)}> </wjNav.TreeView> </div>); } created() { var employees = new wjData.ODataCollectionView(this.state.nwindService, "Employees", { fields: "EmployeeID,FirstName,LastName".split(","), loaded: () => { var items = employees.items.map(e => { e.FullName = e.FirstName + " " + e.LastName; e.Orders = []; // lazy-load orders return e; }); this.setState({ lazyLoadODataItems: items }); } }); } lazyLoadODataFunction(node, callback) { switch (node.level) { // load orders for an employee case 0: var url = "Employees(" + node.dataItem.EmployeeID + ")/Orders"; var orders = new wjData.ODataCollectionView(this.state.nwindService, url, { fields: "OrderID,ShipName,ShipCountry".split(","), loaded: () => { var items = orders.items.map(function (e) { e.Order_Details = []; // lazy-order details return e; }); callback(items); } }); break; // load extended details for an order case 1: var url = "Order_Details_Extendeds/?$filter=OrderID eq " + node.dataItem.OrderID; var details = new wjData.ODataCollectionView(this.state.nwindService, url, { fields: "ProductName,ExtendedPrice".split(","), loaded: () => { var items = details.items.map(e => { e.Summary = wjCore.format("{ProductName}: {ExtendedPrice:c}", e); return e; }); callback(items); } }); break; // default default: callback(null); } } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</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 id="app"></div> </body> </html> /* level 0 nodes and deeper (employees...) */ .container-fluid .wj-treeview .wj-nodelist>.wj-node { font-weight: bold; } /* level 1 nodes and deeper (orders...) */ .container-fluid .wj-treeview .wj-nodelist>.wj-nodelist>.wj-node { font-weight: normal; font-size: 95%; color: darkblue; } /* level 2 nodes and deeper (order details...) */ .container-fluid .wj-treeview .wj-nodelist>.wj-nodelist>.wj-nodelist>.wj-node { font-size: 90%; color: darkslategrey; } /* default trees on this sample */ .container-fluid .wj-treeview { height: 350px; border: 1px solid rgba(0,0,0,0.2); } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-tree-view :itemsSource="lazyLoadODataItems" :displayMemberPath="['FullName', 'ShipName', 'Summary' ]" :childItemsPath="['Orders', 'Order_Details']" :lazyLoadFunction="lazyLoadODataFunction"> </wj-tree-view> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.nav"; import * as wjCore from "@grapecity/wijmo"; import * as wjData from '@grapecity/wijmo.odata'; let App = Vue.extend({ name: "app", data: function() { return { lazyLoadODataItems: [], nwindService:'https://services.odata.org/Northwind/Northwind.svc', }; }, methods: { lazyLoadODataFunction(node, callback) { switch (node.level) { // load orders for an employee case 0: var url = "Employees(" + node.dataItem.EmployeeID + ")/Orders"; var orders = new wjData.ODataCollectionView(this.nwindService, url, { fields: "OrderID,ShipName,ShipCountry".split(","), loaded: () => { var items = orders.items.map(function(e) { e.Order_Details = []; // lazy-order details return e; }); callback(items); } }); break; // load extended details for an order case 1: var url = "Order_Details_Extendeds/?$filter=OrderID eq " + node.dataItem.OrderID; var details = new wjData.ODataCollectionView( this.nwindService, url, { fields: "ProductName,ExtendedPrice".split(","), loaded: () => { var items = details.items.map(e => { e.Summary = wjCore.format( "{ProductName}: {ExtendedPrice:c}", e ); return e; }); callback(items); } } ); break; // default default: callback(null); } } }, created: function() { var employees = new wjData.ODataCollectionView( this.nwindService, "Employees", { fields: "EmployeeID,FirstName,LastName".split(","), loaded: () => { var items = employees.items.map(e => { e.FullName = e.FirstName + " " + e.LastName; e.Orders = []; // lazy-load orders return e; }); this.lazyLoadODataItems = items; } } ); } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> /* level 0 nodes and deeper (employees...) */ .container-fluid .wj-treeview .wj-nodelist > .wj-node { font-weight: bold; } /* level 1 nodes and deeper (orders...) */ .container-fluid .wj-treeview .wj-nodelist > .wj-nodelist > .wj-node { font-weight: normal; font-size: 95%; color: darkblue; } /* level 2 nodes and deeper (order details...) */ .container-fluid .wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist > .wj-node { font-size: 90%; color: darkslategrey; } /* default trees on this sample */ .container-fluid .wj-treeview { height: 350px; border: 1px solid rgba(0,0,0,0.2); } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Sample</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.vue'); </script> </head> <body> <div id="app"> </div> </body> </html>