Gird绑定JSON数据案例 -

独善其身008

浏览: 171403 次
性别:
来自: 苏州

最近访客更多访客>>

chuan518

hao85629

小灰灰不小心

april2017

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (71)

社区版块

存档分类

Gird绑定JSON数据案例

json 数据结构 Dojo Struts CSS

前台页面部分：
<%@ 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: '年龄', 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>

     
    <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',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">

分享到：