Dojo之调用数据源(json、xml等)页面自动解析显示

  首先是一个简单的调用json实例:

  json数据源:data.json

View Code
 1 {
 2     count: 4,
 3     people: [
 4         {
 5             first_name: "Joe",
 6             last_name: "Lennon",
 7             age: 25        
 8         },{
 9             first_name: "Darragh",
10             last_name: "Duffy",
11             age: 33
12         },{
13             first_name: "Jonathan",
14             last_name: "Reardon",
15             age: 30
16         },{
17             first_name: "Finian",
18             last_name: "O'Connor",
19             age: 23
20         }
21     ]
22 }

  然后dojo中调用json数据源的方法:

View Code
 1 dojo.xhrGet({
 2                 url: "data.json",
 3                 handleAs: "json",
 4                 load: function(data) {
 5                     var table = "<table border=\"1\">";
 6                     table += "<tr><th>Name</th><th>Age</th></tr>";
 7                     dojo.forEach(data.people, function(person) {
 8                         table += "<tr><td>";
 9                         table += person.first_name+" "+person.last_name;
10                         table += "</td><td>";
11                         table += person.age;
12                         table += "</td></tr>";
13                     });
14                     table += "</table>";
15                     dojo.place(table, dojo.body());
16                 }
17             });

  上面代码调用数据后对数据进行了出来,在页面创建了一个表单,具体效果如下图:

 

 

现在我们研究结合store数据源的形式将获取的json数据自动处理显示:

首先XML形式的数据:

可以建一个xml的文件,代码如下:

View Code
 1 <continents>
 2     <continent>
 3         <name>Africa</name>
 4         <population>900 million</population>
 5         <area>30,221,532 sq km</area>
 6     </continent>
 7     <continent>
 8         <name>Asia</name>
 9         <population>1 billion</population>
10         <area>25,428,192 sq km</area>
11     </continent>
12     <continent>
13         <name>Oceania</name>
14         <population>21 million</population>
15         <area>15,928,294 sq km</area>
16     </continent>
17     <continent>
18         <name>Europe</name>
19         <population>56 million</population>
20         <area>25,928,294 sq km</area>
21     </continent>
22     <continent>
23         <name>North America</name>
24         <population>100 million</population>
25         <area>90,928,294 sq km</area>
26     </continent>
27     <continent>
28         <name>South America</name>
29         <population>102 million</population>
30         <area>78,928,294 sq km</area>
31     </continent>
32     <continent>
33         <name>Antarctica</name>
34         <population>998</population>
35          <area>102,928,294 sq km</area>
36     </continent>
37 </continents>

然后在JS中调用:

View Code
1 var xmlStore = new dojox.data.XmlStore({  
2             url: 'data.xml',  
3             label: 'name'  
4         });

当然,不要忘了引用:

dojo.require('dojox.data.XmlStore');

dojo.require('dijit.form.ComboBox');

页面显示可以有两种方式去显示,第一种为table的形式:

View Code
1 <table jsid="grid" store="xmlStore" query="{name:'*'}" dojoType="dojox.grid.DataGrid" class="claro">
2         <thead>
3             <tr>
4                 <th field="name" width="auto">Name</th>
5                 <th field="population" width="auto">Population</th>
6                 <th field="area" width="auto">Area</th>
7             </tr>
8         </thead>
9     </table>

第二种可以用下拉框的形式

View Code
1 <input dojoType="dijit.form.ComboBox" store="xmlStore" searchAttr="name"></input>
2 <input dojoType="dijit.form.ComboBox" store="xmlStore" searchAttr="area"></input>

这就完成dojo自动加载数据源的调用显示了,很方便吧;

下面看看json的,只需要改变store引用方式就行:

json文件:

View Code
 1 {
 2     identifier: 'id',
 3      label: 'name',
 4     items:  [
 5         { "id": "AF", "name":"Africa", "type":"continent",
 6           "population":"900 million", "area": "30,221,532 sq km" },
 7         { "id": "AS", "name":"Asia", "type":"continent",
 8           "population":"1 billion", "area": "25,428,192 sq km" },
 9         { "id": "OC", "name":"Oceania", "type":"continent",
10           "population":"21 million", "area": "15,928,294 sq km" },
11         { "id": "EU", "name":"Europe", "type":"continent",
12           "population":"56 million", "area": "25,928,294 sq km" },
13         { "id": "NA", "name":"North America", "type":"continent",
14           "population":"100 million", "area": "90,928,294 sq km" },
15         { "id": "SA", "name":"South America", "type":"continent",
16           "population":"102 million", "area": "78,928,294 sq km" },
17         { "id": "AN", "name":"Antarctica", "type":"continent",
18           "population":"998", "area": "102,928,294 sq km" }
19 ]}

然后store引用  这里采用比较简单的ItemFileReadStore;(ItemFileReadStore比较适合于处理数据量较小的数据源,数据源可以是一个JSON文件或者象本例一样直接指定到客户端内存中的一组数据。当你使用更加大型的JSON数据集时,可以使用JsonRestStore,采用Rest服务来进行数据提供。下次讨论!)

View Code
1 //这个是引用json文件
2 var jsonStore = new dojo.data.ItemFileReadStore({url:"data2.json"});
3 //这个是引用页面中的json数据
4 var jsonStore2 = new dojo.data.ItemFileReadStore({data:data});

引用加上:dojo.require('dojo.data.ItemFileReadStore');

页面代码:

View Code
1 <table jsid="grid" store="jsonStore" query="{name:'*'}" dojoType="dojox.grid.DataGrid" class="claro">
2         <thead>
3             <tr>
4                 <th field="name" width="auto">Name</th>
5                 <th field="population" width="auto">Population</th>
6                 <th field="area" width="auto">Area</th>
7             </tr>
8         </thead>
9     </table>
View Code
1 <input dojoType="dijit.form.ComboBox" store="jsonStore" searchAttr="area"></input>

对比之前的页面代码,发现了吧  其实只是改变的store的引用值而已,相当方便吧!

posted @ 2012-04-27 16:11  爱吃猫的鱼~  阅读(1879)  评论(0编辑  收藏  举报