JSON

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

字号+ 作者：H5之家 来源：H5之家 2017-03-12 08:04 我要评论( )

前台页面部分： %@ page language="java"pageEncoding="UTF-8"% !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" html head titlegird绑定JSON数据案例/title !-- 表格样式 -- style type="text/css" @import"js/dojo-release-1.1.0/dojox/gr

前台页面部分：
<%@ 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 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;


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 dojoType="dojox.Grid" model="model" structure="layout"></div>
        </body>

    注：
            1.model表示绑定数据模型
            2.structure表示绑定数据结构
            3.可以指定2种样式：tundra和tundraGrid。也可以将样式加在body上如：
            <body>

　

dojo1.1.0学习总结--Gird绑定JSON

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • UE4学习:下载文件并转成JSON类型数据

    UE4学习:下载文件并转成JSON类型数据

    2017-03-12 09:00

  • Python模块学习之json

    Python模块学习之json

    2017-03-12 08:02

  • jstree学习笔记

    jstree学习笔记

    2017-03-11 17:00

  • ObjectMapper学习笔记

    ObjectMapper学习笔记

    2017-03-11 16:03

网友点评
精彩导读
4种json解析技术对比

4种json解析技术对比

简单实现js菜单栏切换效果

简单实现js菜单栏切换效果

解析JSON时注意的相关问题进行学习

解析JSON时注意的相关问题进行学习

微信小程式，超能裝的實例教程

微信小程式，超能裝的實例教程

JSON、XML解析

JSON、XML解析

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by DedeCms 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习