dojo1.1.0学习总结--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>  <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>  <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: '年龄',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',name:'张三1',name:'李四 2',name:'王五3',name:'赵六4',age:'29'},{id:'5',name:'刘二5',{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>  <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数据，并绑定到表格  <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',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',age:'29'}]}"; response.getWriter().write(data); 提示：url: "./json.do?page=12"可以传参数到Action 2. 直接写一个JSON对象的方式 //var myData = {identifier:'id',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,clientSort:true}); 其中指定按id查询并提供客户端排序 4.表格视图结构 {name: '编号',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">

dojo1.1.0学习总结--Gird绑定JSON数据案例

猜你在找的Dojo相关文章