第一种：数据存在本地或者已经写死的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显示数据的方法（转）的更多相关文章

  1. dojox.grid.DataGrid

    创建表格 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" style=&q ...

  2. dojox.grid.EnhancedGrid 和 dojox.grid.DataGrid 的继承关系

    dojox.grid.EnhancedGrid  的介绍说, EnhancedGrid 是基于 DataGrid 提供增强功能的. EnhancedGrid (dojox.grid.EnhancedG ...

  3. dojo Datagrid 实现数据删除功能

    DataGrid实现数据动态刷新功能见前一个帖子:http://www.cnblogs.com/qq552048250/p/4447103.html 实现数据删除只需要向表格中动态添加按钮,并为按钮的 ...

  4. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  5. NPOI导出WPF DataGrid控件显示数据

    最近做个项目,需要导出DataGrid显示的数据,中间遇到了不少的坑,在此纪录一下,方便以后查看,也希望能给用到的人,一点帮助. 导出DataGrid显示的数据,并不是导出DataGrid的Items ...

  6. Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页

    1.关于LigerUI: LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以应用于. ...

  7. #.NET# DataGrid显示大量数据——DataGridView虚模式

    要解决的目标:如何让 Datagridview 快速平滑显示大量数据 通常,Winform 下的表格控件是很"低效"的,如 DataGrid 和 DataGridView.造成低效 ...

  8. 程序间获取ALV显示数据（读取ALV GRID上的数据）

    程序间获取ALV数据的两种方法: 方法1:通过修改SUBMIT的目标程序,把内表EXPORT到内存,SUBMIT后IMPORT ,该方法需要修改目标程序,可以任意设置目标程序的中断点: * Execu ...

  9. ExtJS用Grid显示数据后如何自动选取第一条记录

    用Grid显示数据后,如何让系统自动选取第一条记录呢?在显示Grid时由于其Store正在loading,没法在Grid选取第一条记录,因为还没有记录,所以应在其Store进行操作. 查看Ext.da ...

随机推荐

  1. 【11】JMicro微服务-配置管理

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到10小节 JMicro目前仅支持基于Zookeeper做配置管理,全部配置信息可以在ZK做增删改查 ...

  2. 【GDKOI2017】小队任务 莫比乌斯反演+杜教筛

    题目大意:给你n,求$\sum_{i=1}^{n}\sum_{j=i}^{n}[gcd(i,j)=1](i+1)(j+1)$ 子任务一:暴力 子任务二:$T=50000,n≤10^7$ 子任务三:$T ...

  3. css之px自动转rem—sublime 插件CSSREM

    CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...

  4. 前端的CRUD增删改查的小例子

    前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...

  5. SpringMVC+AJAX+JSON

    在做一个ajax发送json到springmvc的控制层,控制层的对象中有一个List集合,ajax调用总是报415错误.发现了一个一直没有注意到的问题,借机记录一下. (细节部分都忽略了,在最后的d ...

  6. OpenGL12-shader(GLSL)着色语言2-（参数传递)(代码以上传)

    上一篇中介绍了如何使用shader,用来一个最简单的shader,计算顶点的位置,调用了 OpenGL 顶点着色语言中的内置变量对顶点进行操作,这一例程中,将展示如何将应用层 的数据传递到shader ...

  7. Major GC和Full GC的区别是什么？触发条件呢？

    作者:RednaxelaFX链接:http://www.zhihu.com/question/41922036/answer/93079526来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...

  8. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  9. JavaScript预编译详解

    一.js运行三部曲: 1.语法分析(通篇扫描看有没有语法错误) 2.预编译 3.解释执行 二.预编译前奏 1.imply global 暗示全局变量:任何变量如果未经声明就赋值,此变量为全局对象所有 ...

  10. Socket编程 - 网络基础知识

    API编程部分:http://www.cnblogs.com/Jimmy1988/p/7895213.html 1. 协议简介 此处,我们主要介绍Linux编程常用的三种协议(TCP/UDP/IP), ...