EasyUI学习-----表格DataGrid获取数据的方式

最新推荐文章于 2024-07-22 15:13:59 发布

anqi771129

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量1.1k

点赞数

文章标签： javascript 数据库 json ViewUI

原文链接：http://www.cnblogs.com/fengfuwanliu/p/10074886.html

版权

第一种方式：直接返回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);
    }

}

转载于:https://www.cnblogs.com/fengfuwanliu/p/10074886.html

anqi771129

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI学习-----表格DataGrid获取数据的方式

第一种方式：直接返回JSON数据package com.easyuijson.util;import java.text.SimpleDateFormat;import net.sf.json.JsonConfig;import net.sf.json.processors.JsonValueProcessor;public class DateJs...
复制链接

扫一扫