第一种方式：直接返回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 studentList=null;
static {
studentList = new ArrayList();
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">学生IDth>
<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'">学生QQth>
<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">学生IDth>
<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'">学生QQth>
<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">学生IDth>
<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'">学生QQth>
<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 studentList=null;
static {
studentList = new ArrayList();
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);
}
}
