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", "type":"city" },
{ "id": "SD", "name":"Sudan", "type":"country",
"children":{"_reference":"Khartoum"} },
{ "id": "Khartoum", "name":"Khartoum", "type":"city" },
{ "id": "AS", "name":"Asia", "type":"continent",
"children":[{"_reference":"CN"}, {"_reference":"IN"}, {"_reference":"RU"}, {"_reference":"MN"}] },
{ "id": "CN", "name":"China", "type":"country" },
{ "id": "IN", "name":"India", "type":"country" },
{ "id": "RU", "name":"Russia", "type":"country" },
{ "id": "MN", "name":"Mongolia", "type":"country" },
{ "id": "OC", "name":"Oceania", "type":"continent", "population":"21 million",
"children":{"_reference":"AU"}},
{ "id": "AU", "name":"Australia", "type":"country", "population":"21 million"},
{ "id": "EU", "name":"Europe", "type":"continent",
"children":[{"_reference":"DE"}, {"_reference":"FR"}, {"_reference":"ES"}, {"_reference":"IT"}] },
{ "id": "DE", "name":"Germany", "type":"country" },
{ "id": "FR", "name":"France", "type":"country" },
{ "id": "ES", "name":"Spain", "type":"country" },
{ "id": "IT", "name":"Italy", "type":"country" },
{ "id": "NA", "name":"North America", "type":"continent",
"children":[{"_reference":"MX"}, {"_reference":"CA"}, {"_reference":"US"}] },
{ "id": "MX", "name":"Mexico", "type":"country", "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", "type":"city", "population":"4 million", "timezone":"-6 UTC" },
{ "id": "CA", "name":"Canada", "type":"country", "population":"33 million", "area":"9,984,670 sq km",
"children":[{"_reference":"Ottawa"}, {"_reference":"Toronto"}] },
{ "id": "Ottawa", "name":"Ottawa", "type":"city", "population":"0.9 million", "timezone":"-5 UTC"},
{ "id": "Toronto", "name":"Toronto", "type":"city", "population":"2.5 million", "timezone":"-5 UTC" },
{ "id": "US", "name":"United States of America", "type":"country" },
{ "id": "SA", "name":"South America", "type":"continent",
"children":[{"_reference":"BR"}, {"_reference":"AR"}] },
{ "id": "BR", "name":"Brazil", "type":"country", "population":"186 million" },
{ "id": "AR", "name":"Argentina", "type":"country", "population":"40 million" }
]}