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的引用值而已，相当方便吧！