dojo tree的使用

前端之家收集整理的这篇文章主要介绍了dojo tree的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

tree是web中相当常见的组件,这里我们了解下dojo中的tree。

require(['dojo/json','dojo/text!./data/countries.json','dojo/data/ItemFileReadStore','dijit/tree/ForestStoreModel',...],function(json,countriesData,ItemFileReadStore,ForestStoreModel,...){
    
    // Create a new store and model for countries data
 var countriesStore = ItemFileReadStore({
 data: json.parse(countriesData)
 });
 
 var countriesModel = new ForestStoreModel({
 store: this.countriesStore,query:{type: 'continent'},rootId:'Geography',rootLabel:'Geography'
 });

});


dojo中的tree的json形式如下,保存为:countries.json文件

{
    "identifier": "id","label": "name","items": [
            { "id": "AF","name":"Africa","type":"continent","population":"900 million","area": "30,221,532 sq km","timezone": "-1 UTC to +4 UTC","children":[{"_reference":"EG"},{"_reference":"KE"},{"_reference":"SD"}] },{ "id": "EG","name":"Egypt","type":"country" },{ "id": "KE","name":"Kenya","type":"country","children":[{"_reference":"Nairobi"},{"_reference":"Mombasa"}] },{ "id": "Nairobi","name":"Nairobi","type":"city" },{ "id": "Mombasa","name":"Mombasa",{ "id": "SD","name":"Sudan","children":{"_reference":"Khartoum"} },{ "id": "Khartoum","name":"Khartoum",{ "id": "AS","name":"Asia","children":[{"_reference":"CN"},{"_reference":"IN"},{"_reference":"RU"},{"_reference":"MN"}] },{ "id": "CN","name":"China",{ "id": "IN","name":"India",{ "id": "RU","name":"Russia",{ "id": "MN","name":"Mongolia",{ "id": "OC","name":"Oceania","population":"21 million","children":{"_reference":"AU"}},{ "id": "AU","name":"Australia","population":"21 million"},{ "id": "EU","name":"Europe","children":[{"_reference":"DE"},{"_reference":"FR"},{"_reference":"ES"},{"_reference":"IT"}] },{ "id": "DE","name":"Germany",{ "id": "FR","name":"France",{ "id": "ES","name":"Spain",{ "id": "IT","name":"Italy",{ "id": "NA","name":"North America","children":[{"_reference":"MX"},{"_reference":"CA"},{"_reference":"US"}] },{ "id": "MX","name":"Mexico","population":"108 million","area":"1,972,550 sq km","children":[{"_reference":"Mexico City"},{"_reference":"Guadalajara"}] },{ "id": "Mexico City","name":"Mexico City","type":"city","population":"19 million","timezone":"-6 UTC"},{ "id": "Guadalajara","name":"Guadalajara","population":"4 million","timezone":"-6 UTC" },{ "id": "CA","name":"Canada","population":"33 million","area":"9,984,670 sq km","children":[{"_reference":"Ottawa"},{"_reference":"Toronto"}] },{ "id": "Ottawa","name":"Ottawa","population":"0.9 million","timezone":"-5 UTC"},{ "id": "Toronto","name":"Toronto","population":"2.5 million","timezone":"-5 UTC" },{ "id": "US","name":"United States of America",{ "id": "SA","name":"South America","children":[{"_reference":"BR"},{"_reference":"AR"}] },{ "id": "BR","name":"Brazil","population":"186 million" },{ "id": "AR","name":"Argentina","population":"40 million" }
]}

猜你在找的Dojo相关文章