TreeView 검색

TreeViews 검색은 계층 구조 특성 때문에 간단한 작업이 아닙니다. 일반적으로 노드는 부분적으로 부모 노드에서 정의되고, 노드와 관련된 추가 콘텐츠를 통해서도 정의된 컨텍스트를 반영합니다.

예를 들어 사용자가 아래 TreeView에서 "Electronics"를 검색하는 경우 자식 노드를 결과에 포함하고 싶을 수도 , 포함하고 싶지 않을 수도 있습니다. 또한 항목에 자세한 설명이 포함되어 있는 경우 검색에 도움이 되도록 키워드를 추가할 수도 있습니다. 따라서 사용자가 "beard" 등을 입력한다면 "Trimmers/Shavers" 노드가 선택되기를 원할 것입니다.

AutoComplete 컨트롤을 사용하면 TreeView에서 사용할 검색 상자를 간편하게 구현할 수 있습니다. 이 샘플에서는 전체 노드 경로와 키워드를 포함하는 플랫 searchArray를 작성하고, 이 배열을 TreeView에서 검색할 itemsSource로 사용합니다.

'itemsSource' 및 'displayMemberPath' 속성 외에도, 'searchMemberPath' 속성을 사용하여 검색에 포함할 키워드가 있는 필드 이름을 지정합니다.

예를 들어 검색 상자에 'beard', 'collect' 또는 'food'를 입력해 보십시오.

Wijmo 알아보기 | TreeView API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjNav from '@grapecity/wijmo.nav'; import { getData } from './data'; document.readyState === 'complete' ? init() : window.onload = init; class searchItem { } function getSearchList(items, searchList, path) { // set defaults if (searchList == null) searchList = []; if (path == null) path = ''; // add items and sub-items for (var i = 0; i < items.length; i++) { var item = items[i]; searchList.push({ item: item, path: path + item.header, keywords: item.keywords }); if (item.items) { getSearchList(item.items, searchList, path + item.header + ' / '); } } return searchList; } function init() { // create the tree var tree = new wjNav.TreeView('#theTree', { itemsSource: getData(), displayMemberPath: 'header', childItemsPath: 'items', }); // create the search AutoComplete var search = new wjInput.AutoComplete('#search', { itemsSource: getSearchList(tree.itemsSource), selectedIndex: -1, displayMemberPath: 'path', searchMemberPath: 'keywords', selectedIndexChanged: function (s) { if (s.selectedItem) { tree.selectedItem = s.selectedItem.item; } } }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo TreeView Searching</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 for="search">Search: </label> <div id="search"></div> <div id="theTree"></div> </div> </body> </html>
export function getData() { return [ { header: 'Electronics', items: [ { header: 'Trimmers/Shavers', keywords: 'beard hair' }, { header: 'Tablets', keywords: 'screen computer android ios facebook' }, { header: 'Phones', keywords: 'talk listen email facebook', items: [ { header: 'Apple' }, { header: 'Motorola' }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', keywords: 'music loudspeaker' }, { header: 'Monitors', keywords: 'screen color lcd oled' } ] }, { header: 'Toys', items: [ { header: 'Shopkins', keywords: 'animals collectibles' }, { header: 'Train Sets', keywords: 'models rail collectibles' }, { header: 'Science Kit', keywords: 'education physics chemistry' }, { header: 'Play-Doh', keywords: 'clay sculpt models' }, { header: 'Crayola', keywords: 'drawing painting wax chalk pencils' } ] }, { header: 'Home', items: [ { header: 'Coffee Maker', keywords: 'kitchen appliance drink' }, { header: 'Breadmaker', keywords: 'kitchen appliance food cooking' }, { header: 'Solar Panel', keywords: 'electric sun renewable energy' }, { header: 'Work Table', keywords: 'shop tools' }, { header: 'Propane Grill', keywords: 'food cooking barbecue meat' } ] } ]; }
.wj-control { margin-bottom: 6px; } .wj-treeview { display:block; font-size: 120%; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } body { margin-bottom: 24pt; }
(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);