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, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student2 = new Student(1002, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student3 = new Student(1003, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student4 = new Student(1004, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student5 = new Student(1005, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student6 = new Student(1006, "Lucy", "男", 23, "[email protected]", "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>

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

前端页面

<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>

后台代码，使用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, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student2 = new Student(1002, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student3 = new Student(1003, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student4 = new Student(1004, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student5 = new Student(1005, "Lucy", "男", 23, "[email protected]", "84562548", "三个地方规划的恢复规划法规部分");
        Student student6 = new Student(1006, "Lucy", "男", 23, "[email protected]", "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);
    }

}

原文地址：https://www.cnblogs.com/xianya/p/9786804.html

时间： 2024-08-27 19:55:05

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

easyui的datagrid获取选中行

注意设置idfield="id",这里的id要和下面field的id保持一致,而且要保证唯一性. easyui的datagrid获取选中行,布布扣,bubuko.com

MFC获取数据的方式

假设输入框ID是:ID_NUMBER1,ID_NUMBER2,ID_NUMBER3. 获取数据的方式是: int number1,number2,number3; number1 = GetDlgItemInt(ID_NUMBER1); number2 = GetDlgItemInt(ID_NUMBER2); number3 = number1 + number2; SetDlgItemInt(ID_NUMBER3,number3); 将数据3设置在输入框三中.

Request三种获取数据的方式

今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Request.QueryString: 该方法主要是获取页面路径URL的参数: 2. Request.Form:该方法主要是以post请求方式获取报文体的参数: 3. Request.param:包含上面两种方式,它会在QueryString,Form,ServerVariable中都搜索一遍: 而我今

EasyUI表格DataGrid假分页及获取表格数据

 假分页就是将所有要显示的数据全部查询出来后,进行前台的分页,适合数据量较小的Web项目 在假分页的情况下获取所有数据: var totalData = $("#datagrid").datagrid('getData'); var rows = totalData.originalRows; 完整的Demo: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

springmvc 后台向页面EasyUI的Datagrid传递数据（JSon格式）

===============EasyUIDatagrid 分页==================== EasyUIDatagrid 需要提供的JSon格式为:total和rows,所以我们只需要在后台中返回一个JSon格式为total和rows //定义一个EasyUIDatagridResult 类来包装JSon数据 public class EasyUIDatagridResult { private long total;  //返回JSon中的total值 private List<

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

url = "{% url 'dashboard:internship-theme-stat' %}?teacher_name="+teacher_name+"&month="+month # view context={ "month": default_month, "teacher_name":default_teacher } 在django模板中: 第一中获取teacher_name的方式:{{ reques

php上传excel表格并获取数据

这个是最近需要做的一个功能,在网上也查看了很多相关的文章,基本上大同小异,在这里整理一下. 一:首先是html部分 <html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id=&q

easyUI之datagrid大数据量加载慢的原因之我见

最近项目中使用了easyUI这个js展现层,说实话,展示效果还算不错,使用上也比较方便,但是让我头疼的就是datagrid的这个控件. 它的使用起始非常简单方便,而且提供的功能也比较全面,但是美中不足的就是,该控件在加载比较大的数据量时,渲染速度有点难以承受. 网上找了相关的解决方案,无外乎就是使用view. view这个东西说实话的确能起到改善datagrid的加载速度的问题,但是缺陷也比较多,网上有该缺陷描述,本人不在此说了. 还有一个提到的方案,就是修改 jquery-easyui-min

EL表达式获取数据的方式

<%@page import="cn.jiemoxiaodi.domain.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() +