Gird绑定JSON数据案例
前台页面部分：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>gird绑定JSON数据案例</title>
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
@import "js/dojo-release-1.1.0/dojo/dijit/themes/tundra/tundra.css";
@import "js/dojo-release-1.1.0/dojox/grid/_grid/tundraGrid.css";
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css"
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
</script>
<!-- 获取JSON数据，并绑定到表格 -->
<script type="text/javascript">
//通过后台获取JSON数据（url可以使jsp也可以使Servlet或是Struts的action）
//var dataStore = new dojo.data.ItemFileReadStore({url: "jsondata.jsp"});
var dataStore = new dojo.data.ItemFileReadStore({url: "./json.do?page=12"});
//设置数据用于测试(identifier:'id'表示标识列)
//var myData = {identifier:'id',items:[{id:'1',name:'张三',age:'26'},{id:'2',name:'李四',age:'27'},{id:'3',name:'王五',age:'28'},{id:'4',name:'赵六',age:'29'}]};
//var dataStore = new dojo.data.ItemFileReadStore({data: myData});
//将数据绑定到模型
var model = new dojox.grid.data.DojoData(null, dataStore, {query:{ id :'*' }, clientSort:true});
//表格结构
var layout = [
{cells: [[
{name: '编号', width: "25%", field: "id"},
{name: '姓名', width: "50%", field: "name"},
{name: '年龄', width: "25%", field: "age"}
]]}
];
</script>
</head>
<body >
<!-- 将数据模型和列头绑定到表格层 -->
<div class="tundra" id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>
后台Action传输JSON数据
package org.sp.struts.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
/**
* 后台JSON数据
* @author 无尽de华尔兹
*
*/
public class JsonAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println(request.getParameter("page"));
String data = "{identifier:'id',items:[{id:'1',name:'张三1',age:'26'},{id:'2',name:'李四2',age:'27'},{id:'3',name:'王五3',age:'28'},{id:'4',name:'赵六4',age:'29'},{id:'5',name:'刘二5',age:'29'},{id:'6',name:'马七6',age:'29'}]}";
response.getWriter().write(data);
return null;
}
}
dojo 1.1.0 学习总结
七. gird绑定JSON数据案例
1.导入样式，库，组件包
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
@import "js/dojo-release-1.1.0/dojo/dijit/themes/tundra/tundra.css";
@import "js/dojo-release-1.1.0/dojox/grid/_grid/tundraGrid.css";
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css"
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
</script>
注：样式可以有2种，
1.tundra
2.tundraGrid
可以在div层中指定
2.获取JSON数据，并绑定到表格
<!-- 获取JSON数据，并绑定到表格 -->
<script type="text/javascript">
//1.通过后台获取JSON数据（url可以使jsp也可以使Servlet或是Struts的action）
var dataStore = new dojo.data.ItemFileReadStore({url: "data.jsp"});
//2.通过设置数据用于测试(identifier:'id'表示标识列)
//var myData = {identifier:'id',items:[{id:'1',name:'张三',age:'26'},{id:'2',name:'李四',age:'27'},{id:'3',name:'王五',age:'28'},{id:'4',name:'赵六',age:'29'}]};
//var dataStore = new dojo.data.ItemFileReadStore({data: myData});
//将数据绑定到模型
var model = new dojox.grid.data.DojoData(null, dataStore, {query:{ id :'*' }, clientSort:true});
//表格结构
var layout = [
{cells: [[
{name: '编号', width: "25%", field: "id"},
{name: '姓名', width: "50%", field: "name"},
{name: '年龄', width: "25%", field: "age"}
]]}
];
</script>
注：
1.获取后台JSON数据的方式
var dataStore = new dojo.data.ItemFileReadStore({url: "data.jsp"});
//var dataStore = new dojo.data.ItemFileReadStore({url: "./json.do"});
提示：如果使用的是servlet或是Struts的action，并且数据有中文会出现乱码，只要在action中设置UTF-8编码就能解决，如 下：
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String data = "{identifier:'id',items:[{id:'1',name:'张三1',age:'26'},{id:'2',name:'李四2',age:'27'},{id:'3',name:'王五3',age:'28'},{id:'4',name:'赵六4',age:'29'},{id:'5',name:'刘二5',age:'29'},{id:'6',name:'马七6',age:'29'}]}";
response.getWriter().write(data);
提示：url: "./json.do?page=12"可以传参数到Action
2. 直接写一个JSON对象的方式
//var myData = {identifier:'id',items:[{id:'1',name:'张三',age:'26'},{id:'2',name:'李四',age:'27'},{id:'3',name:'王五',age:'28'},{id:'4',name:'赵六',age:'29'}]};
//var dataStore = new dojo.data.ItemFileReadStore({data: myData});
JSON格式提示：identifier:'id' 标识要写，如果绑定到模型var model = new dojox.grid.data.DojoData(null, dataStore)这样写的话，可以省略identifier:'id',items:
3.将数据绑定到模型
var model = new dojox.grid.data.DojoData(null, dataStore, {query:{ id :'*' }, clientSort:true});
其中指定按id查询并提供客户端排序
4.表格视图结构
{name: '编号', width: "25%", field: "id"},
name表示显示的列名
width表示列的宽度
field表示要绑定的字段（该字段是JSON中的key）
3.将数据模型和列头绑定到表格层
<body >
<!-- 将数据模型和列头绑定到表格层 -->
<div class="tundra" id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
注：
1.model表示绑定数据模型
2.structure表示绑定数据结构
3. class="tundra"可以指定2种样式：tundra和tundraGrid。也可以将样式加在body上如：
<body class="tundraGrid">
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>gird绑定JSON数据案例</title>
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
@import "js/dojo-release-1.1.0/dojo/dijit/themes/tundra/tundra.css";
@import "js/dojo-release-1.1.0/dojox/grid/_grid/tundraGrid.css";
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css"
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
</script>
<!-- 获取JSON数据，并绑定到表格 -->
<script type="text/javascript">
//通过后台获取JSON数据（url可以使jsp也可以使Servlet或是Struts的action）
//var dataStore = new dojo.data.ItemFileReadStore({url: "jsondata.jsp"});
var dataStore = new dojo.data.ItemFileReadStore({url: "./json.do?page=12"});
//设置数据用于测试(identifier:'id'表示标识列)
//var myData = {identifier:'id',items:[{id:'1',name:'张三',age:'26'},{id:'2',name:'李四',age:'27'},{id:'3',name:'王五',age:'28'},{id:'4',name:'赵六',age:'29'}]};
//var dataStore = new dojo.data.ItemFileReadStore({data: myData});
//将数据绑定到模型
var model = new dojox.grid.data.DojoData(null, dataStore, {query:{ id :'*' }, clientSort:true});
//表格结构
var layout = [
{cells: [[
{name: '编号', width: "25%", field: "id"},
{name: '姓名', width: "50%", field: "name"},
{name: '年龄', width: "25%", field: "age"}
]]}
];
</script>
</head>
<body >
<!-- 将数据模型和列头绑定到表格层 -->
<div class="tundra" id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>
后台Action传输JSON数据
package org.sp.struts.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
/**
* 后台JSON数据
* @author 无尽de华尔兹
*
*/
public class JsonAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println(request.getParameter("page"));
String data = "{identifier:'id',items:[{id:'1',name:'张三1',age:'26'},{id:'2',name:'李四2',age:'27'},{id:'3',name:'王五3',age:'28'},{id:'4',name:'赵六4',age:'29'},{id:'5',name:'刘二5',age:'29'},{id:'6',name:'马七6',age:'29'}]}";
response.getWriter().write(data);
return null;
}
}
dojo 1.1.0 学习总结
七. gird绑定JSON数据案例
1.导入样式，库，组件包
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
@import "js/dojo-release-1.1.0/dojo/dijit/themes/tundra/tundra.css";
@import "js/dojo-release-1.1.0/dojox/grid/_grid/tundraGrid.css";
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css"
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
</script>
注：样式可以有2种，
1.tundra
2.tundraGrid
可以在div层中指定
2.获取JSON数据，并绑定到表格
<!-- 获取JSON数据，并绑定到表格 -->
<script type="text/javascript">
//1.通过后台获取JSON数据（url可以使jsp也可以使Servlet或是Struts的action）
var dataStore = new dojo.data.ItemFileReadStore({url: "data.jsp"});
//2.通过设置数据用于测试(identifier:'id'表示标识列)
//var myData = {identifier:'id',items:[{id:'1',name:'张三',age:'26'},{id:'2',name:'李四',age:'27'},{id:'3',name:'王五',age:'28'},{id:'4',name:'赵六',age:'29'}]};
//var dataStore = new dojo.data.ItemFileReadStore({data: myData});
//将数据绑定到模型
var model = new dojox.grid.data.DojoData(null, dataStore, {query:{ id :'*' }, clientSort:true});
//表格结构
var layout = [
{cells: [[
{name: '编号', width: "25%", field: "id"},
{name: '姓名', width: "50%", field: "name"},
{name: '年龄', width: "25%", field: "age"}
]]}
];
</script>
注：
1.获取后台JSON数据的方式
var dataStore = new dojo.data.ItemFileReadStore({url: "data.jsp"});
//var dataStore = new dojo.data.ItemFileReadStore({url: "./json.do"});
提示：如果使用的是servlet或是Struts的action，并且数据有中文会出现乱码，只要在action中设置UTF-8编码就能解决，如 下：
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String data = "{identifier:'id',items:[{id:'1',name:'张三1',age:'26'},{id:'2',name:'李四2',age:'27'},{id:'3',name:'王五3',age:'28'},{id:'4',name:'赵六4',age:'29'},{id:'5',name:'刘二5',age:'29'},{id:'6',name:'马七6',age:'29'}]}";
response.getWriter().write(data);
提示：url: "./json.do?page=12"可以传参数到Action
2. 直接写一个JSON对象的方式
//var myData = {identifier:'id',items:[{id:'1',name:'张三',age:'26'},{id:'2',name:'李四',age:'27'},{id:'3',name:'王五',age:'28'},{id:'4',name:'赵六',age:'29'}]};
//var dataStore = new dojo.data.ItemFileReadStore({data: myData});
JSON格式提示：identifier:'id' 标识要写，如果绑定到模型var model = new dojox.grid.data.DojoData(null, dataStore)这样写的话，可以省略identifier:'id',items:
3.将数据绑定到模型
var model = new dojox.grid.data.DojoData(null, dataStore, {query:{ id :'*' }, clientSort:true});
其中指定按id查询并提供客户端排序
4.表格视图结构
{name: '编号', width: "25%", field: "id"},
name表示显示的列名
width表示列的宽度
field表示要绑定的字段（该字段是JSON中的key）
3.将数据模型和列头绑定到表格层
<body >
<!-- 将数据模型和列头绑定到表格层 -->
<div class="tundra" id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
注：
1.model表示绑定数据模型
2.structure表示绑定数据结构
3. class="tundra"可以指定2种样式：tundra和tundraGrid。也可以将样式加在body上如：
<body class="tundraGrid">