第一种方式：直接返回JSON数据

package com.easyuijson.util;

import java.text.SimpleDateFormat;

import net.sf.json.JsonConfig;

import net.sf.json.processors.JsonValueProcessor;

public class DateJsonValueProcessor implements JsonValueProcessor{

    private String format;  

    public DateJsonValueProcessor(String format){

        this.format = format;

    }  

    public Object processArrayValue(Object value, JsonConfig jsonConfig) {

        return null;

    }

    public Object processObjectValue(String key, Object value, JsonConfig jsonConfig) {

        if(value == null)

        {

            return "";

        }

        if(value instanceof java.sql.Timestamp)

        {

            String str = new SimpleDateFormat(format).format((java.sql.Timestamp)value);

            return str;

        }

        if (value instanceof java.util.Date)

        {

            String str = new SimpleDateFormat(format).format((java.util.Date) value);

            return str;

        }  

        return value.toString();

    }

}
package com.easyuijson.servlet;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;

import com.easyuijson.model.Student;

import com.easyuijson.util.DateJsonValueProcessor;

import com.easyuijson.util.ResponseUtil;

import net.sf.json.JSONArray;

import net.sf.json.JsonConfig;

public class DatagridData extends HttpServlet {

    private static final long serialVersionUID = 1L;

    private static List<Student> studentList=null;

    static {

        studentList = new ArrayList<Student>();

        Student student1 = new Student(1001, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student2 = new Student(1002, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student3 = new Student(1003, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student4 = new Student(1004, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student5 = new Student(1005, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student6 = new Student(1006, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        studentList.add(student1);

        studentList.add(student2);

        studentList.add(student3);

        studentList.add(student4);

        studentList.add(student5);

        studentList.add(student6);

    }

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp){

        try {

            System.out.println("跳转成功！");

            int total = studentList.size();

            JSONObject result = new JSONObject();

            JsonConfig jsonConfig = new JsonConfig();

            jsonConfig.registerJsonValueProcessor(java.util.Date.class,

                    new DateJsonValueProcessor("yyyy-MM-dd"));

            JSONArray jsonArray = JSONArray.fromObject(studentList, jsonConfig);

            result.put("rows", jsonArray);

            result.put("total", total);

            ResponseUtil.write(resp, result);

        } catch (Exception ex) {

            ex.printStackTrace();

        }

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        doGet(req, resp);

    }

}
package com.easyuijson.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

public class ResponseUtil {

    public static void write(HttpServletResponse response,Object o)throws Exception{

        response.setContentType("text/html;charset=utf-8");

        PrintWriter out=response.getWriter();

        out.println(o.toString());

        out.flush();

        out.close();

    }

}

   1）使用Ajax请求数据

<body>

    <table id="dg" class="easyui-datagrid" title="基本数据表格"

        style="width: 700px; height: 250px"

        data-options="singleSelect:true,collapsible:true">

        <thead data-options="frozen:true">

            <tr>

                <th data-options="field:'stuId',width:100">学生ID</th>

                <th data-options="field:'stuName',width:100">学生姓名</th>

            </tr>

        </thead>

        <thead>

            <tr>

                <th data-options="field:'stuSex',width:100">学生性别</th>

                <th data-options="field:'stuAge',width:100">学生年龄</th>

                <th data-options="field:'stuEmail',width:100,align:'center'">学生邮箱</th>

                <th data-options="field:'stuQQ',width:100,align:'right'">学生QQ</th>

                <th data-options="field:'stuAddress',width:200,align:'center'">学生地址</th>

            </tr>

        </thead>

    </table>

</body>

<script type="text/javascript">

    $(function() {

        //动态加载标题和数据

        $.ajax({

            url : "${pageContext.request.contextPath}/datagridData.do",

            type : "post",

            dataType : "json",

            success : function(data) {

                $("#dg").datagrid("loadData", data.rows); //动态取数据

            }

        });

    });

</script>

   2）使用表格Url属性请求数据

<table class="easyui-datagrid" title="基本数据表格"

        style="width: 700px; height: 250px"

        data-options="singleSelect:true,collapsible:true,url:'${pageContext.request.contextPath}/datagridData.do'">

        <thead data-options="frozen:true">

            <tr>

                <th data-options="field:'stuId',width:100">学生ID</th>

                <th data-options="field:'stuName',width:100">学生姓名</th>

            </tr>

        </thead>

        <thead>

            <tr>

                <th data-options="field:'stuSex',width:100">学生性别</th>

                <th data-options="field:'stuAge',width:100">学生年龄</th>

                <th data-options="field:'stuEmail',width:100,align:'center'">学生邮箱</th>

                <th data-options="field:'stuQQ',width:100,align:'right'">学生QQ</th>

                <th data-options="field:'stuAddress',width:200,align:'center'">学生地址</th>

            </tr>

        </thead>

    </table>

   3）js创建表格的时候使用表格Url属性请求数据 

<body>

    <table id="studentList"></table>

</body>

<script type="text/javascript">

    $('#studentList').datagrid({

        title : '基本数据表格',

        width : 700,

        height : 250,

        url : '${pageContext.request.contextPath}/datagridData.do',

        frozenColumns : [ [ {

            field : 'stuId',

            title : '学生ID',

            width : 100

        }, {

            field : 'stuName',

            title : '学生姓名',

            width : 100

        } ] ],

        columns : [ [ {

            field : 'stuSex',

            title : '学生性别',

            width : 100

        }, {

            field : 'stuAge',

            title : '学生年龄',

            width : 100

        }, {

            field : 'stuEmail',

            title : '学生邮箱',

            width : 100

        }, {

            field : 'stuQQ',

            title : '学生QQ',

            width : 100

        }, {

            field : 'stuAddress',

            title : '学生地址',

            width : 200,

            align : 'center'

        } ] ]

    });

</script>

   第二种方式：通过JSTL填充表格

   1）前端页面

<table class="easyui-datagrid" title="基本数据表格"

        style="width: 700px; height: 250px"

        data-options="singleSelect:true,collapsible:true,url:'${pageContext.request.contextPath}/datagridData.do'">

        <thead data-options="frozen:true">

            <tr>

                <th data-options="field:'stuId',width:100">学生ID</th>

                <th data-options="field:'stuName',width:100">学生姓名</th>

            </tr>

        </thead>

        <thead>

            <tr>

                <th data-options="field:'stuSex',width:100">学生性别</th>

                <th data-options="field:'stuAge',width:100">学生年龄</th>

                <th data-options="field:'stuEmail',width:100,align:'center'">学生邮箱</th>

                <th data-options="field:'stuQQ',width:100,align:'right'">学生QQ</th>

                <th data-options="field:'stuAddress',width:200,align:'center'">学生地址</th>

            </tr>

        </thead>

        <tbody>

            <c:forEach var="student" items="${studentList}">

                <tr>

                    <td>${student.stuId}</td>

                    <td>${student.stuName}</td>

                    <td>${student.stuSex}</td>

                    <td>${student.stuAge}</td>

                    <td>${student.stuEmail}</td>

                    <td>${student.stuQQ}</td>

                    <td>${student.stuAddress}</td>

                </tr>

            </c:forEach>

        </tbody>

    </table>

   2）后台代码，使用servlet处理数据

package com.easyuijson.servlet;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import com.easyuijson.model.Student;

public class DatagridData extends HttpServlet {

    private static final long serialVersionUID = 1L;

    private static List<Student> studentList=null;

    static {

        studentList = new ArrayList<Student>();

        Student student1 = new Student(1001, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student2 = new Student(1002, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student3 = new Student(1003, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student4 = new Student(1004, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student5 = new Student(1005, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        Student student6 = new Student(1006, "Lucy", "男", 23, "Lucy@126.com", "84562548", "三个地方规划的恢复规划法规部分");

        studentList.add(student1);

        studentList.add(student2);

        studentList.add(student3);

        studentList.add(student4);

        studentList.add(student5);

        studentList.add(student6);

    }

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("跳转成功！");

        HttpSession httpSession= req.getSession();

        httpSession.setAttribute("studentList",studentList);for(Student stu:studentList) {

            System.out.println(stu);

        }

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        doGet(req, resp);

    }

}

EasyUI表格DataGrid获取数据的方式的更多相关文章

  1. Request三种获取数据的方式

    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...

  2. MFC获取数据的方式

    假设输入框ID是:ID_NUMBER1,ID_NUMBER2,ID_NUMBER3. 获取数据的方式是: int number1,number2,number3; number1 = GetDlgIt ...

  3. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

  4. EasyUI的datagrid获取所有正在编辑状态的行的行编号

    今天项目需要用了下EasyUI的datagrid的行编辑功能,跟着API来,只要是将各种状态时的处理逻辑弄好,还是蛮不错的. 开发过程中,遇到了个问题,在编辑完成后我需要获取datagrid所有处于编 ...

  5. 关于url拼接传参数和利用view的字典传参数时，模板获取数据的方式问题

    url = "{% url 'dashboard:internship-theme-stat' %}?teacher_name="+teacher_name+"& ...

  6. EasyUI表格DataGrid前端分页和后端分页的总结

    Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...

  7. EasyUI表格DataGrid格式化formatter用法

    1.通过HTML标签创建数据表格时使用formatter <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. 经历：easyui的datagrid没有数据滚动条的显示

    今天,一个用户提出一个这样的问题,"查询不到结果时,为什么我看不到后面的标题呢?" 最初,我听到这个问题时,第一反应是:查出来数据不就有滚动条了吗,干嘛非要较真呢? 不过,后来想想 ...

  9. EL表达式获取数据的方式

    <%@page import="cn.jiemoxiaodi.domain.Person"%> <%@ page language="java" ...

随机推荐

  1. 机器学习【工具】：Numpy基础

    Numpy Numpy 是 Python 数据科学计算的核心库,提供了高性能的多维数组对象及处理数组的工具 使用方式 import numpy as np 数组 生成数组  简单生成 a = np.a ...

  2. Orchard Core 增加了一个API模块，要怎么调用

    如下,我在Orchard Core框架中添加了一个API的模块,并且定义了对应的权限才可以调用,那么我们现在考虑的就是要怎么去调用它. 首先,我们用Fiddler查看下我们正常的登录的http报文,直 ...

  3. USB驱动框架

    以USB鼠标驱动为例 框架入口源文件: usb_mouse.c  hub.c (可根据入口源文件,再按着框架到内核走一遍) 内核版本:linux_2.6.22.6    硬件平台:JZ2440 以下是 ...

  4. javascript面向对象中继承实现？

    面向对象的基本特征有:封闭.继承.多态. 在javascript中实现继承的方法: 1.原型链(prototype chaining) 2.call()/apply() 3.混合方式(prototyp ...

  5. UDP网络通信

    网络概念 一.目的 二.IP地址 三.端口 一.目的 目的 : 主要用于让两个用户端的服务器或者客户端,可以实现资源共享和信息传递 二.IP地址 1.作用 : 计算机网络中一台计算机的标识 2.种类 ...

  6. FTP文件传输

    FTP项目作业要求:1.用户加密认证2.允许同时多用户登录3.每个用户有自己的家目录,且只能访问自己的家目录4.对用户进行磁盘配额,每个用户的可用空间不同5.允许用户在ftp server上随意切换目 ...

  7. 002-MVC架构，贫血的领域模型、spring mvc，webhars使用

    一.MVC.贫血的领域模型 MVC理念是将视图与模型进行解耦. 贫血的领域模型 <领域驱动设计>定义了一组架构规则,能够指导我们更好地将业务领域集成到代码中. 其中一个核心理念是将面向对象 ...

  8. RN-ios模拟器上调出中文输入法

    react-native 项目:在ios模拟器上需要拼写汉字,步骤是, 1.在模拟器的设置-通用-语言与地区-iphone语言设置为:简体中文 2.模拟器的 Hardware-Keyboard-勾选下 ...

  9. HTML中--定义header和footer高度中间自适应

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  10. ps切图插件

    ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用