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