EasyUI表格DataGrid获取数据的方式

Posted 2021-01-12 xianya

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);
    }

}

以上是关于EasyUI表格DataGrid获取数据的方式的主要内容，如果未能解决你的问题，请参考以下文章

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

easyui的datagrid怎么绑定数据库

jQuery easyUI 使用 datagrid 表格

jquery easyui datagrid 如何获取表格某一列全部数据数据

easyUI数据表格datagrid之笔记

easyUI——页面多个datagrid导致表头与数据错位