dojox.grid.DataGrid显示数据的方法(转)
2024-08-28 16:45:34
第一种:数据存在本地或者已经写死的JSON对象中,不需要跟服务端进行数据传输
<%@ 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>
第二种:数据来源于服务器端
<%@ 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>
服务端后台代码:
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();
} }
注:本文转载于http://hbiao68.iteye.com/blog/1683875,感谢原文作者!
最新文章
- Tomcat8安装, 安全配置与性能优化(转)
- solr update接口常用方法
- 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu
- SharePoint 2013 Designer系列之数据视图筛选
- HTTP请求头
- 解决php deprecated 的问题
- FMX下Edit只能输入数字
- android中5大布局
- 转:XBMC源代码分析
- OC登陆界面登陆按钮动画
- 如何在VBA窗体中使用 DataGrid 控件?
- js运动 分享到
- Android 高级UI设计笔记22:Android 指示引导页(带圆点)
- Umbraco中的Member登录时的Lock out功能
- wdcp-apache配置错误导致进程淤积进而内存吃紧
- JS分析URL字符串,取得参数名,AJAX传参请求代码示例
- 关于在linux下清屏的几种技巧(转载-备忘)
- asp.net mvc webapi 实用的接口加密方法(转载)
- twisted的tcp.py分析
- 在ubuntu14系统中将redis-server设置为开机启动项