dojox.grid.DataGrid显示数据的方法(转)
第一种:数据存在本地或者已经写死的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,感谢原文作者!
dojox.grid.DataGrid显示数据的方法(转)的更多相关文章
- dojox.grid.DataGrid
创建表格 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" style=&q ...
- dojox.grid.EnhancedGrid 和 dojox.grid.DataGrid 的继承关系
dojox.grid.EnhancedGrid 的介绍说, EnhancedGrid 是基于 DataGrid 提供增强功能的. EnhancedGrid (dojox.grid.EnhancedG ...
- dojo Datagrid 实现数据删除功能
DataGrid实现数据动态刷新功能见前一个帖子:http://www.cnblogs.com/qq552048250/p/4447103.html 实现数据删除只需要向表格中动态添加按钮,并为按钮的 ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- NPOI导出WPF DataGrid控件显示数据
最近做个项目,需要导出DataGrid显示的数据,中间遇到了不少的坑,在此纪录一下,方便以后查看,也希望能给用到的人,一点帮助. 导出DataGrid显示的数据,并不是导出DataGrid的Items ...
- Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页
1.关于LigerUI: LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以应用于. ...
- #.NET# DataGrid显示大量数据——DataGridView虚模式
要解决的目标:如何让 Datagridview 快速平滑显示大量数据 通常,Winform 下的表格控件是很"低效"的,如 DataGrid 和 DataGridView.造成低效 ...
- 程序间获取ALV显示数据(读取ALV GRID上的数据)
程序间获取ALV数据的两种方法: 方法1:通过修改SUBMIT的目标程序,把内表EXPORT到内存,SUBMIT后IMPORT ,该方法需要修改目标程序,可以任意设置目标程序的中断点: * Execu ...
- ExtJS用Grid显示数据后如何自动选取第一条记录
用Grid显示数据后,如何让系统自动选取第一条记录呢?在显示Grid时由于其Store正在loading,没法在Grid选取第一条记录,因为还没有记录,所以应在其Store进行操作. 查看Ext.da ...
随机推荐
- 【4】JMicro微服务-服务限流
如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 通过配置SMethod的maxSpeed属性实现服务限流,单位是个/每秒(qps),也就是服务方法每秒允许接收的最大请求个数 ...
- 【xsy1611】 数位dp 数位dp
这题是显然的数位$dp$,然而我居然写了一个下午!!! 我们不难想到差分,令$solve(x,y)$表示从第一个数字在区间$[0,x]$,第二个数字在区间$[0,y]$的答案. 不难发现题目中给了你一 ...
- jade直接写类似JavaScript语法的东西,不需要写script
我们知道,html做计算都是在JavaScript中完成的,那么不用JavaScript行不行呢,可以直接在jade中一样的编写 如: -var a = 3 -var b = 4 div a+b = ...
- 开源微信支付SDK
应该有一年多没在博客园上写文章了,毕竟是一个记录自己技术成长的平台,没能将写博客长期坚持下来,说起来也是挺惭愧的.对于自己的近况而言,确实平常加班也比较多,时间会比较压缩,所以到后来博客也基本停止了更 ...
- Java学习之路(八):Set
Set集合概述以及特点: set 是一个不包含重复元素的collection set只是一个接口,一般使用它的子类HashSet,LinkedHashSet,TreeSet HashSet 此类是Se ...
- MAC帧格式、IPV4数据报格式、TCP报文格式、UDP数据报格式
1.MAC帧格式 类型:2字节,指出数据域中携带的数据应交给哪些协议实体处理 校验码:校验数据段(采用32位CRC冗余校验方式进行校验) 2.IPV4数据报 版本:IP协议版本,这里为4 首部长度:占 ...
- RSNAKE 的 Slowloris DOS攻击工具初试
Slowloris 号称低带宽对服务器进行DDOS攻击 原理就是对WEB服务器发送 不完整的包并且以 单一 \r\n结尾,并不是 完整的HTTP包.造成WEB服务器堵塞达到最大连接数. 官网给出介绍 ...
- php 禁止谷歌蜘蛛抓取
$useragent = strtolower($_SERVER['HTTP_USER_AGENT']); if (strpos($useragent, 'googlebot')){ exit(); ...
- C/C++ -- Gui编程 -- Qt库的使用 -- QtWidget
#include<QtGui> int main(int argc, char * argv[]) { QApplication app(argc, argv); QTextCodec:: ...
- JAVA 之 多态 抽象 接口
一:多态 1:多态 一个对象有多种形式的能力 2:步骤 1编写父类派生子类 2子类重写父类方法 3用父类的数据类型引用子类对象 3:静态多态的实现方式就是方法重载 4:动态多态的实现方式就是重写 ...