dojox.grid.DataGrid显示数据

第一种方式直接得到已经存在的数据（存在本地或者是已经写死的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();
	}

}

备注：server端输出的字符串必须也要按照json对象中包含items属性的这中格式，否则是无法在前端显示内容的。

原文链接：https://www.f2er.com/dojo/291323.html

dojox.grid.DataGrid显示数据

猜你在找的Dojo相关文章