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

前端之家收集整理的这篇文章主要介绍了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> <!-- 导入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: '年龄',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> <!-- 导入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',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"> 原文链接:https://www.f2er.com/dojo/291882.html

猜你在找的Dojo相关文章