5.20241.9
5.20241.9
ツリービュー：データ連結
TreeViewコントロールをデータに連結するには、次の3つのプロパティを設定する必要があります。
- itemsSource：階層化データを含む配列を定義します。配列の各項目には、ノードおよび（オプションで）子ノードの配列に関する情報が含まれます。
- displayMemberPath：ツリーノードに表示されるテキストを含む、項目内のプロパティの名前を定義します。デフォルトでは、このプロパティは文字列「header」に設定されています。
- childItemsPath：子ノードの配列を含む、項目内のプロパティの名前を定義します。デフォルトでは、このプロパティは文字列「items」に設定されています。
TreeViewをデータに連結すると、デフォルトでは、各レベルの最初のノードが展開され、その他のすべてが折りたたまれます。この動作をカスタマイズするには、ツリー項目の生成後に発生するloadedItemsイベントを処理します。
ツリーのロード時に項目を選択するには、selectedItemプロパティを設定します。TreeViewコントロールは、必要に応じてツリーを展開またはスクロールして、選択されたノードを自動的に表示します。
collapseToLevelメソッドを使用して、すべてのノードを特定のレベルまで折りたたんだり、特定のレベルまで展開することもできます。
HTML
<div id="theTree"></div>
Javascript
import * as wjNav from '@mescius/wijmo.nav';
// ツリーを作成します
var tree = new wjNav.TreeView('#theTree', {
itemsSource: getData(),
displayMemberPath: 'header',
childItemsPath: 'items',
});
// ツリーデータを取得します
function getData() {
return [
{
header: '電子機器',
img: 'resources/electronics.png',
items: [
{ header: 'トリマー/シェーバー' },
{ header: 'タブレット' },
{
header: 'スマートフォン',
img: 'resources/phones.png',
items: [
{ header: 'アップル' },
{ header: 'モトローラ', newItem: true },
{ header: 'ノキア' },
{ header: 'サムスン' }
]
},
{ header: 'スピーカー', newItem: true },
{ header: 'モニター' }
]
},
{
header: '玩具',
img: 'resources/toys.png',
items: [
{ header: 'ショップキンズ' },
{ header: '電車セット' },
{ header: '科学キット', newItem: true },
{ header: '粘土' },
{ header: 'クレヨラ' }
]
},
{
header: '家電',
img: 'resources/home.png',
items: [
{ header: 'コーヒーメーカー' },
{ header: 'ホームベーカリー', newItem: true },
{ header: 'ソーラーパネル', newItem: true },
{ header: '作業テーブル' },
{ header: 'プロパングリル' }
]
}
];
}
}
異種データ
大部分のTreeViewアプリケーションでは、displayMemberPathプロパティとchildItemsPathプロパティが、ノードに表示するプロパティの名前を定義する文字列と、子項目を含むプロパティの名前を定義する文字列にそれぞれ設定されます。
ただし、これらの連結プロパティの名前がデータの階層レベルによって異なるアプリケーションもあります。この場合、これらのプロパティに名前の配列を使用できます。
以下の例では、displayMemberPathおよびchildItemsPathプロパティに文字列ではなく配列を使用しています。
HTML
<div id="theTree"></div>
Javascript
onload = function() {
// ツリーを作成します
var tree = new wijmo.nav.TreeView('#theTree', {
itemsSource: getData(),
displayMemberPath: 'continent,country,city'.split(','),
childItemsPath: 'countries,cities'.split(',')
});
// データを取得します
function getData() {
return [
{ continent: 'アフリカ', countries: [
{ country: 'アルジェリア', cities: [
{ city: 'アルジェ' },
{ city: 'オラン' },
{ city: 'コンスタンティン' }
] },
{ country: 'アンゴラ', cities: [
{ city: 'ルアンダ' },
{ city: 'アンブリズ' },
{ city: 'ベイルンド' }
] },
{ country: 'ベニン', cities: [
{ city: 'ポルトノボ' },
{ city: 'コトヌー' },
{ city: 'パラコウ' }
] },
{ country: 'ボツワナ', cities: [
{ city: 'ハボローネ' },
{ city: 'フランシスタウン' },
{ city: 'モレポロール' }
] },
] },
{ continent: 'アジア', countries: [
{ country: 'アフガニスタン', cities: [
{ city: 'カブール' },
{ city: 'カンダハー' },
{ city: 'ヘラート' }
] },
{ country: 'アルメニア', cities: [
{ city: 'エレバン' },
{ city: 'ギュムリ' },
{ city: 'バナゾール' }
] },
{ country: 'アゼルバイジャン', cities: [
{ city: 'バクー' },
{ city: 'アジャバディ' },
{ city: 'アスタラ' }
] },
{ country: 'バーレーン', cities: [
{ city: 'マナマ' },
{ city: 'リフファ' },
{ city: 'シトラ' }
] },
] },
{ continent: 'ヨーロッパ', countries: [
{ country: 'アルバニア', cities: [
{ city: 'ティラナ' },
{ city: 'エルバサン' },
{ city: 'フィエル' }
] },
{ country: 'アンドラ', cities: [
{ city: 'アンドララビエハ' },
{ city: 'カニーリョ' },
{ city: 'エンキャンプ' }
] },
{ country: 'オーストリア', cities: [
{ city: 'ウィーン' },
{ city: 'ザルツブルク' },
{ city: 'グラーツ' }
] },
{ country: 'ベラルーシ', cities: [
{ city: 'ミンスク' },
{ city: 'バリソー' },
{ city: 'スラツク' }
] },
] },
{ continent: 'アメリカ', countries: [
{ country: 'カナダ', cities: [
{ city: 'オタワ' },
{ city: 'トロント' },
{ city: 'バンクーバー' }
] },
{ country: 'アメリカ合衆国', cities: [
{ city: 'ワシントン' },
{ city: 'ニューヨーク' },
{ city: 'ピッツバーグ' }
] },
{ country: 'メキシコ', cities: [
{ city: 'メキシコシティ' },
{ city: 'アカプルコ' },
{ city: 'サンノゼ' }
] },
{ country: 'ベリーズ', cities: [
{ city: 'ベルモパン' },
{ city: 'ダングリーガ' },
{ city: 'ベリーズシティ' }
] },
] },
{ continent: 'オセニアニア', countries: [
{ country: 'オーストラリア', cities: [
{ city: 'キャンベラ' },
{ city: 'シドニー' },
{ city: 'メルボルン' }
] },
{ country: 'ニュージーランド', cities: [
{ city: 'ウェリントン' },
{ city: 'クライストチャーチ' },
{ city: 'オークランド' }
] },
{ country: 'フィジー', cities: [
{ city: 'スバ' },
{ city: 'ラバサ' },
{ city: 'ナシヌ' }
] },
{ country: 'バヌアツ', cities: [
{ city: 'ポートビラ' },
{ city: 'フォラリ' },
{ city: 'エタート' }
] },
] },
];
}
}