Dojo Toolkit解析メモ Tree篇(その1)
Dojo Toolkit解析メモ Tree篇(その1)API DOCdijit.Treedojo.require("dijit.Tree");コンストラクタvar foo = new dijit.Tree(params: Object?, srcNodeRef: DomNode|String);htmlタグで生成する方法方法その1(非推奨)データストア<div dojoType="dojo.data.ItemFileReadStore" jsId="areaStore" url="http://localhost:8080/webService1/getAreaClassApi2"></div>ツリーウィジェット<div dojoType="dijit.Tree" id="tree" store="areaStore" query="{type:'middleClassCode'}" labelAttr="label" openOnClick="true" persist="false"></div>方法その2(推奨)データストア<div dojoType="dojo.data.ItemFileReadStore" jsId="areaStore" url="http://localhost:8080/webService1/getAreaClassApi2"></div>データモデル<div dojoType="dijit.tree.ForestStoreModel" jsId="myModel" store="areaStore" query="{type:'middleClassCode'}" rootId="areaRoot" rootLabel="エリア" childrenAttrs="children"></div>ツリーウィジェット<div dojoType="dijit.Tree" id="tree2" model="myModel" openOnClick="true" showRoot="false" persist="false"></div>※データモデルを使用することが推奨されているようです。データストアで定義しているurlプロパティで指定しているアプリケーションは、楽天トラベル地区コード検索APIから、地区コードデータを取得し以下の形式のJSONオブジェクトを返します。{identifier: 'id',name: 'name',label: 'label',items: [{id:'1', name:'hokkaido', label:'北海道', type:'middleClassCode', children:[ {_reference:'2'}, {_reference:'3'}, {_reference:'4'}, {_reference:'5'}, {_reference:'6'}, {_reference:'7'}, {_reference:'8'}, {_reference:'9'}, {_reference:'10'}, {_reference:'11'}, {_reference:'12'}, {_reference:'13'}, {_reference:'14'}]},{id:'2', name:'sapporo', label:'札幌市内中心部', type:'smallClassCode'},{id:'3', name:'jozankei', label:'定山渓', type:'smallClassCode'},{id:'4', name:'wakkanai', label:'稚内・利尻・礼文・豊富・苫前・留萌', type:'smallClassCode'},{id:'5', name:'abashiri', label:'網走・紋別・北見・知床・ウトロ', type:'smallClassCode'},{id:'6', name:'kushiro', label:'釧路・阿寒・川湯・根室', type:'smallClassCode'},{id:'7', name:'obihiro', label:'帯広・十勝・えりも', type:'smallClassCode'},{id:'8', name:'furano', label:'富良野・美瑛・トマム', type:'smallClassCode'},{id:'9', name:'asahikawa', label:'旭川・層雲峡・滝川', type:'smallClassCode'},{id:'10', name:'chitose', label:'千歳・支笏・苫小牧・夕張', type:'smallClassCode'},{id:'11', name:'otaru', label:'小樽・余市・積丹', type:'smallClassCode'},{id:'12', name:'niseko', label:'ルスツ・ニセコ・倶知安', type:'smallClassCode'},{id:'13', name:'hakodate', label:'函館・湯の川・大沼・奥尻', type:'smallClassCode'},{id:'14', name:'noboribetsu', label:'登別・洞爺・室蘭', type:'smallClassCode'},{id:'15', name:'aomori', label:'青森県', type:'middleClassCode', children:[ {_reference:'16'}, {_reference:'17'}, {_reference:'18'}, {_reference:'19'}, {_reference:'20'}]},{id:'16', name:'aomori', label:'青森市内・浅虫温泉', type:'smallClassCode'},{id:'17', name:'tsugaru', label:'津軽半島(五所川原)', type:'smallClassCode'},{id:'18', name:'hirosaki', label:'弘前・黒石', type:'smallClassCode'},{id:'19', name:'hachinohe', label:'八戸・三沢・古牧・十和田', type:'smallClassCode'},{id:'20', name:'shimokita', label:'下北半島(むつ・大間)', type:'smallClassCode'},{id:'84', name:'tiba', label:'千葉県', type:'middleClassCode', children:[ {_reference:'85'}, {_reference:'86'}, {_reference:'87'}, {_reference:'88'}, {_reference:'89'}, {_reference:'90'}, {_reference:'91'}, {_reference:'92'}]},~~~省略~~~{id:'85', name:'chiba', label:'千葉市(千葉市街・幕張) ', type:'smallClassCode'},{id:'86', name:'keiyo', label:'舞浜・船橋', type:'smallClassCode'},{id:'87', name:'kashiwa', label:'松戸・柏・八千代', type:'smallClassCode'},{id:'88', name:'narita', label:'成田空港周辺', type:'smallClassCode'},{id:'89', name:'choshi', label:'銚子・佐原・東金・九十九里', type:'smallClassCode'},{id:'90', name:'sotobo', label:'外房(鴨川・勝浦・御宿・茂原)', type:'smallClassCode'},{id:'91', name:'tateyama', label:'南房総(館山・白浜・千倉)', type:'smallClassCode'},{id:'92', name:'uchibo', label:'内房(市原・木更津・君津・富津)', type:'smallClassCode'},{id:'93', name:'tokyo', label:'東京都', type:'middleClassCode', children:[ {_reference:'94'}, {_reference:'105'}, {_reference:'106'}, {_reference:'107'}]},{id:'94', name:'tokyo', label:'東京23区内', type:'smallClassCode', children:[ {_reference:'95'}, {_reference:'96'}, {_reference:'97'}, {_reference:'98'}, {_reference:'99'}, {_reference:'100'}, {_reference:'101'}, {_reference:'102'}, {_reference:'103'}, {_reference:'104'}]},{id:'105', name:'nishi', label:'東京西部(武蔵野・三鷹・立川・府中・八王子)', type:'smallClassCode'},{id:'106', name:'okutama', label:'奥多摩・青梅', type:'smallClassCode'},{id:'107', name:'ritou', label:'伊豆諸島・小笠原諸島', type:'smallClassCode'},{id:'95', name:'A', label:'東京駅・銀座・日本橋', type:'detailClassCode'},{id:'96', name:'B', label:'新橋・汐留・お台場', type:'detailClassCode'},{id:'97', name:'C', label:'赤坂・六本木', type:'detailClassCode'},{id:'98', name:'D', label:'渋谷・青山', type:'detailClassCode'},{id:'99', name:'E', label:'品川・目黒・羽田', type:'detailClassCode'},{id:'100', name:'F', label:'新宿・中野・杉並', type:'detailClassCode'},{id:'101', name:'G', label:'池袋・赤羽・板橋・練馬', type:'detailClassCode'},{id:'102', name:'H', label:'御茶ノ水・水道橋・飯田橋', type:'detailClassCode'},{id:'103', name:'I', label:'上野・浅草・両国・足立', type:'detailClassCode'},{id:'104', name:'J', label:'江東・江戸川・新小岩', type:'detailClassCode'},~~~省略~~~{id:'328', name:'okinawa', label:'沖縄県', type:'middleClassCode', children:[ {_reference:'329'}, {_reference:'330'}, {_reference:'331'}, {_reference:'332'}, {_reference:'333'}, {_reference:'334'}]},{id:'329', name:'nahashi', label:'那覇', type:'smallClassCode'},{id:'330', name:'hokubu', label:'北部(恩納・名護・本部・伊江島)', type:'smallClassCode'},{id:'331', name:'chubu', label:'中部(宜野湾・北谷・沖縄・読谷)', type:'smallClassCode'},{id:'332', name:'nanbu', label:'南部・本島周辺離島(糸満・慶良間諸島・久米島)', type:'smallClassCode'},{id:'333', name:'Miyako', label:'宮古島・伊良部島', type:'smallClassCode'},{id:'334', name:'ritou', label:'石垣島・西表島・小浜島(八重山諸島)', type:'smallClassCode'},]}生成されるhtmlページ