第一种：数据存在本地或者已经写死的JSON对象中，不需要跟服务端进行数据传输
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"> 9 <link id="themeStyles" rel="stylesheet" href="../dojo/resources/dojo.css"> 10 <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css"> 11 <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/tundraGrid.css"> 12 <script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> 13 <script type="text/javascript"> 14 15 dojo.require("dojo.parser"); 16 dojo.require("dijit.form.Button"); 17 dojo.require("dojox.grid.DataGrid"); 18 dojo.require("dojo.data.ItemFileWriteStore"); 19 dojo.require("dojo.data.ItemFileWriteStore"); 20 dojo.require("dojox.layout.FloatingPane"); 21 22 dojo.require("dijit.dijit"); 23 dojo.require("dojox.grid.DataGrid"); 24 //数据对象中显示的结果必须是对象中的items属性中对应的值，否则显示不出来 25 data_hb = { 26 //identifier: 'grid',//添加了这个属性就显示不出来了 27 //label: 'id', 28 items: [{userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"}, 29 {userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"}, 30 {userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"}, 31 {userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"}, 32 {userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"}] 33 }; 34 35 var structure = [ 36 { name: "用户名", field: "userName", "120px" }, 37 { name: "密码", field: "userPwd", "120px" }, 38 { name: "电子邮件", field: "email", "150px;" }, 39 { name: "博客", field: "blog", "150px" }, 40 { name: "生日", field: "birthday", "120px" }, 41 { name: "年龄", field: "age", "80px" }, 42 { name: "备注", field: "description", "120px" } 43 ]; 44 45 test_store = new dojo.data.ItemFileWriteStore({data: data_hb}); 46 47 dojo.ready(function(){ 48 49 }); 50 </script> 51 </head> 52 <body class="claro"> 53 54 55 <div jsid="grid" id="grid" dojoType="dojox.grid.DataGrid" store="test_store" structure="structure"></div> 56 57 58 59 </body> 60 </html>
第二种：数据来源于服务器端
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"> 9 <link id="themeStyles" rel="stylesheet" href="../dojo/resources/dojo.css"> 10 <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css"> 11 <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/tundraGrid.css"> 12 <script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> 13 <script type="text/javascript"> 14 15 dojo.require("dojo.parser"); 16 dojo.require("dijit.form.Button"); 17 dojo.require("dojox.grid.DataGrid"); 18 dojo.require("dojo.data.ItemFileWriteStore"); 19 dojo.require("dojo.data.ItemFileWriteStore"); 20 dojo.require("dojox.layout.FloatingPane"); 21 22 dojo.require("dijit.dijit"); 23 dojo.require("dojox.grid.DataGrid"); 24 25 26 </script> 27 </head> 28 <body class="claro"> 29 30 31 <div class="heading">dojox.grid.DataGrid Basic Test</div> 32 <!-- 类似于发送了一个ajax请求获取数据，存储在ItemFileWriteStore对象中 --> 33 <span dojoType="dojo.data.ItemFileWriteStore" 34 jsId="jsonStore" url="../WriteJson"> 35 </span> 36 37 <table dojoType="dojox.grid.DataGrid" 38 jsid="grid" id="grid" 39 store="jsonStore" query="{ name: '*' }" rowsPerPage="1" rowSelector="20px"> 40 <thead> 41 <tr> 42 <th field="name" width="300px">Country/Continent Name</th> 43 <th field="type" width="auto">Type</th> 44 </tr> 45 </thead> 46 </table> 47 48 </body> 49 </html>
服务端后台代码：
1 package hb.servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 /** 12 * Servlet implementation class WriteJson 13 */ 14 public class WriteJson extends HttpServlet { 15 private static final long serialVersionUID = 1L; 16 17 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 18 this.doPost(request, response); 19 } 20 21 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 22 System.out.println("{items:[{name:'Africa', type:'continent'},{name:'Africa1', type:'continent1'}]}"); 23 PrintWriter pw = response.getWriter(); 24 pw.write("{items:[{name:'Africa', type:'continent'},{name:'Africa1', type:'continent1'},{name:'Africa1', type:'continent1'},{name:'Africa1', type:'continent1'},{name:'Africa1', type:'continent1'}]}"); 25 pw.flush(); 26 pw.close(); 27 } 28 29 }
注：本文转载于http://hbiao68.iteye.com/blog/1683875，感谢原文作者！