dojox.grid.DataGrid显示数据

原创 2013年12月04日 10:07:11

 第一种方式直接得到已经存在的数据(存在本地或者是已经写死的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",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"},
		        {userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"},
		        {userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"},
		        {userName:"huangbiao",userPwd:"password",email:"hbiao68@yeah.net",blog:"my_blog",birthday:"1988-11-30",age:"24",description:"description1"}]
	};

var structure = [
    { name: "用户名", field: "userName", width: "120px" },
    { name: "密码", field: "userPwd", width: "120px" },
    { name: "电子邮件", field: "email", width: "150px;" },
    { name: "博客", field: "blog", width: "150px" },
    { name: "生日", field: "birthday", width: "120px" },
    { 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, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("{items:[{name:'Africa', type:'continent'},{name:'Africa1', type:'continent1'}]}");
		PrintWriter pw = response.getWriter();
		pw.write("{items:[{name:'Africa', type:'continent'},{name:'Africa1', type:'continent1'},{name:'Africa1', type:'continent1'},{name:'Africa1', type:'continent1'},{name:'Africa1', type:'continent1'}]}");
		pw.flush();
		pw.close();
	}

}

 

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

 

 

 

dojo Grid用法总结

DataGrid、EnhancedGrid都有noDataMessage属性,可以设置这个属性来显示提示信息,例如: noDataMessage : "本单位当前无用户信息!" 要让这个属性起作用,...
  • earthhour
  • earthhour
  • 2013年12月25日 18:50
  • 3568

dojox.grid.DataGrid 编程篇(1) -- Layout设计

最近使用了dojo组件,其中使用了 dojox.grid.DataGrid 进行一览表示的核心组件,这里总结一些实际使用中遇到的问题和解决方法。官方Guide: http://dojotoolkit....
  • fangxinggood
  • fangxinggood
  • 2012年09月10日 00:57
  • 8811

DojoX DataGrid

DojoX DataGrid
  • qingqingzijinxin
  • qingqingzijinxin
  • 2016年08月11日 21:30
  • 169

dojox/grid/DataGrid数据格网

DataGrid与EnhancedGrid都是创建数据网格小部件,EnhancedGrid继承了DataGrid类,它们的区别在于EnhancedGrid类中增加了插件的安装,在小部件里面可以加入插件...
  • xiaotian602574436
  • xiaotian602574436
  • 2017年07月26日 17:36
  • 188

dojox.grid.DataGrid 编程篇(2) -- 方法与事件

dojox.grid.DataGrid 组件还提供了一些方法,使用者利用这些方法可以进一步丰富表格的表现体验。1. 获取、修改任一单元格的数据:取得第3行,字段"f3"的值var grid = dij...
  • fangxinggood
  • fangxinggood
  • 2012年09月14日 01:42
  • 6986

关于 dojo.data.ItemFileWriteStore & dojox.grid.DataGrid 一个注意事项

修改内存中的 store 后, DataGrid 的内容本应该自动更新, 但是今天在 coding 的时候却出现了异常, store 添加一个 item 成功, 但是用这个 store 的 DataG...
  • zsp_1111
  • zsp_1111
  • 2012年05月04日 18:28
  • 2774

extjs_02_grid(显示本地数据,显示跨域数据)

extjs_02_grid(显示本地数据,显示跨域数据)
  • adam_zs
  • adam_zs
  • 2014年06月22日 13:42
  • 1551

数据显示

上一篇文章介绍了Visual C++ 2010对SQL  SERVER  2008进行连接,我们建立了一个MFC程序,其中把基类CView替换成了CListView,这篇文章小菜进行数据获取和访问。 ...
  • zyq11223
  • zyq11223
  • 2012年04月20日 15:55
  • 483

dojox.grid.DataGrid 编程篇(一)- 方法与事件

dojox.grid.DataGrid 编程篇(2) -- 方法与事件 dojox.grid.DataGrid 组件还提供了一些方法,使用者利用这些方法可以进一步丰富表格的表现体验。 参考自:ht...
  • qq_15167261
  • qq_15167261
  • 2015年08月06日 19:32
  • 341

Android用surface直接显示yuv数据(一)

研究了一段时间Android的surface系统,一直执着地认为所有在surface或者屏幕上显示的画面,必须要转换成RGB才能显示,yuv数据也要通过颜色空间转换成RGB才能显示。可最近在研究sta...
  • tung214
  • tung214
  • 2014年07月04日 14:13
  • 6143
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dojox.grid.DataGrid显示数据
举报原因:
原因补充:

(最多只允许输入30个字)