EasyUI表格DataGrid获取数据的方式

第一种方式：直接返回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获取数据的方式的更多相关文章

Request三种获取数据的方式
今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...
MFC获取数据的方式
假设输入框ID是:ID_NUMBER1,ID_NUMBER2,ID_NUMBER3. 获取数据的方式是: int number1,number2,number3; number1 = GetDlgIt ...
Layui数据表格的接口数据请求方式为Get
Layui数据表格的接口数据请求方式为Get
EasyUI的datagrid获取所有正在编辑状态的行的行编号
今天项目需要用了下EasyUI的datagrid的行编辑功能,跟着API来,只要是将各种状态时的处理逻辑弄好,还是蛮不错的. 开发过程中,遇到了个问题,在编辑完成后我需要获取datagrid所有处于编 ...
关于url拼接传参数和利用view的字典传参数时，模板获取数据的方式问题
url = "{% url 'dashboard:internship-theme-stat' %}?teacher_name="+teacher_name+"& ...
EasyUI表格DataGrid前端分页和后端分页的总结
Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...
EasyUI表格DataGrid格式化formatter用法
1.通过HTML标签创建数据表格时使用formatter <!DOCTYPE html> <html> <head> <meta charset=" ...
经历：easyui的datagrid没有数据滚动条的显示
今天,一个用户提出一个这样的问题,"查询不到结果时,为什么我看不到后面的标题呢?" 最初,我听到这个问题时,第一反应是:查出来数据不就有滚动条了吗,干嘛非要较真呢? 不过,后来想想 ...
EL表达式获取数据的方式
<%@page import="cn.jiemoxiaodi.domain.Person"%> <%@ page language="java" ...

随机推荐

20165317JAVA实验二-面向对象程序设计
JAVA实验二-面向对象程序设计提交点一参考Intellj IDEA 简易教程-单元测试完成单元测试的学习在IDEA中建立名为MyUtil5317的project,并在其src文件夹中创建名为M ...
如何将第三方jar包上传到Nexus私服
首先登陆私服服务器以动力威视私服为例: 自己搭建的私服地址:http://192.168.1.5:8081/nexus/index.html#view-reposi ...
kubernetes的Controller Manager
1. Controller Manager简介 Controller Manager作为集群内部的管理控制中心,负责集群内的Node.Pod副本.服务端点(Endpoint).命名空间(Namespa ...
linux内存不足，swap交换分区创建
为什么需要swap 根据Redhat公司的建议,Linux系统swap分区最适合的大小是物理内存的1-2倍.不过Linux上有些软件对swap分区得需求较大,例如要顺利执行Oracle数据库软件, ...
MVVM软件设计模式（转）
add by zhj: MVVM是一种软件设计模式,这里要说一下设计模式,我们通常所的设计模式是指面向对象中的设计模式,用在面向对象编程语言中.但软件设计模式是更高一个级别的设计模式,两者不是同一个东 ...
HD200703
#include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #inc ...
Advising controllers with the @ControllerAdvice annotation
The @ControllerAdvice annotation is a component annotation allowing implementation classes to be aut ...
JavaScript学习（五）
Sonatype Nexus Repository Manager修改密码不成功
nexus修改用户密码时出现Invalid authentication ticket 搜索一下,说会修改密码操作要在15秒内完成 ,于是快速操作,没想到真成功了
pandas操作速查表
准备工作 import numpy as np import pandas as pd 倒入文件或创建一个数据表 df = pd.DataFrame(pd.read_csv('name.csv',he ...

EasyUI表格DataGrid获取数据的方式

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

1）使用Ajax请求数据

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

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

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

1）前端页面

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

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

随机推荐

热门专题