第一种方式直接得到已经存在的数据(存在本地或者是已经写死的JSON对象中),不需要跟server交互
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"> <link id="themeStyles" rel="stylesheet" href="../dojo/resources/dojo.css"> <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css"> <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/tundraGrid.css"> <script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parSEOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dojox.layout.FloatingPane"); dojo.require("dijit.dijit"); dojo.require("dojox.grid.DataGrid"); //数据对象中显示的结果必须是对象中的items属性中对应的值,否则显示不出来 data_hb = { //identifier: 'grid',//添加了这个属性就显示不出来了 //label: 'id',items: [{userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"},{userName:"huangbiao",description:"description1"}] }; var structure = [ { name: "用户名",field: "userName",width: "120px" },{ name: "密码",field: "userPwd",{ name: "电子邮件",field: "email",width: "150px;" },{ name: "博客",field: "blog",width: "150px" },{ name: "生日",field: "birthday",{ name: "年龄",field: "age",width: "80px" },{ name: "备注",field: "description",width: "120px" } ]; test_store = new dojo.data.ItemFileWriteStore({data: data_hb}); dojo.ready(function(){ }); </script> </head> <body class="claro"> <div jsid="grid" id="grid" dojoType="dojox.grid.DataGrid" store="test_store" structure="structure"></div> </body> </html>
第二种:数据来源于server端,和server进行交互
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"> <link id="themeStyles" rel="stylesheet" href="../dojo/resources/dojo.css"> <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css"> <link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/tundraGrid.css"> <script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parSEOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dojox.layout.FloatingPane"); dojo.require("dijit.dijit"); dojo.require("dojox.grid.DataGrid"); </script> </head> <body class="claro"> <div class="heading">dojox.grid.DataGrid Basic Test</div> <!-- 类似于发送了一个ajax请求获取数据,存储在ItemFileWriteStore对象中 --> <span dojoType="dojo.data.ItemFileWriteStore" jsId="jsonStore" url="../WriteJson"> </span> <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" store="jsonStore" query="{ name: '*' }" rowsPerPage="1" rowSelector="20px"> <thead> <tr> <th field="name" width="300px">Country/Continent Name</th> <th field="type" width="auto">Type</th> </tr> </thead> </table> </body> </html>
server端的代码
package hb.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class WriteJson */ public class WriteJson extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { this.doPost(request,response); } protected void doPost(HttpServletRequest request,IOException { System.out.println("{items:[{name:'Africa',type:'continent'},{name:'Africa1',type:'continent1'}]}"); PrintWriter pw = response.getWriter(); pw.write("{items:[{name:'Africa',type:'continent1'},type:'continent1'}]}"); pw.flush(); pw.close(); } }