一：簡介
以表格的形式展示資料、項目中式很常見的一個使用、table展示資料、牽扯到分頁、上一頁下一頁、首頁、尾頁、翻頁、選中展示的記錄用於操作、總記錄數等等、使用DataGrid很容易實現這一點。
二：頁面源碼
各個欄位在頁面中都有詳細的說明
datagrid.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'original.jsp' starting page</title> <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css"> <link rel="stylesheet" type="text/css" href="css/easyui/icon.css"> <link rel="stylesheet" type="text/css" href="css/easyui/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript"> </script> </head> <body id="blayout" class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:false" style="height:100px;"> </div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"> </div> <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center'" href='datagridtaps.html' style="overflow: hidden;"></div></body></html>
<!DOCTYPE html><html> <head> <title>dategridtaps.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <script type="text/javascript"> $(function(){ $('#datagrid').datagrid({ url:'login_getJson.action',// title: 'ssss', iconCls:'icon-save', pagination:true, pageSize:10, pageList:[10,20,30,40,50,60,70,80,90,100], fit:true,//使表格自適應 fitColumns:true,//使得表格中所有的列寬相加等於自適應的寬度、也就是瀏覽器改變大小的時候下方會不會出現捲軸、一般只有在列較少的時候使用 nowrap:false,//表格中的文字可以換行、預設是false、不能換行、這樣在文字很多的時候就看不到全部：使用真實的資料去測試 border:false, idFeild:'id',//標識、會記錄我們選中項的id、不一定是id、通常使用主鍵 sortName:'id',//設定預設排序時的 欄位（必須是field中的一個欄位） sortOrder:'asc',//是按照升序還是降序排序但是僅僅添加這兩個欄位並不會自動排序、這樣寫的意義就是前台會自動的向後台傳遞兩個參數：sort order,我們可以在後台查詢記錄的時候進行排序 columns:[ [{ title:'編號', field:'id', width:100,//必須要給// sortable:true,//指定按照這個排序 },{ title:'姓名', field:'userName', width:100,//必須要給 },{ title:'密碼', field:'passWord', width:100,//必須要給 }] ] }); }); </script> <div class="easyui-tabs" data-options="fit:true,border:false"> <div title="使用者管理"> <table id="datagrid"></table> </div> </div> </body></html>
這裡沒有和資料庫進行互動、僅在方法中手動構造一個UserDTO的List
public String getJson() throws IOException{List<UserDTO> userList = new ArrayList<UserDTO>();userList.add(new UserDTO("1","chy","123"));userList.add(new UserDTO("2","mxx","123"));userList.add(new UserDTO("3","chk","123"));//當與後台互動時、可以根據前台回傳的頁號與每頁記錄數查詢資料//List<UserDTO> userList = userService.getUsers(page, rows); 這樣就可以動態擷取每頁記錄數、前台動態展示。//但是現在前台的總頁數卻變成每頁的記錄數、這樣就要求還要有個service查詢總記錄數、然後重新構造Json傳回到前台//int count = userService.getUersCount();/* * 想要按照某個列進行排序的時候、就使用前台傳過來的關於排序的欄位和排序方式 sort、order * List<UserDTO> userList = userService.getUsers(page, rows, sort, order) */System.out.println("sort" + sort + " order" + order);Map<String, Object> m = new HashMap<String, Object>();m.put("total", 12);m.put("rows", userList);System.out.println(getJson(m));PrintWriter pw = ServletActionContext.getResponse().getWriter();pw.write(getJson(m));pw.flush();pw.close();return null;}
private String getJson(Object o) throws IOException,JsonGenerationException, JsonMappingException {ObjectMapper om = new ObjectMapper();StringWriter sw = new StringWriter();JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);om.writeValue(jg, o);jg.close();return sw.toString();}
四：補充說明
1、 內嵌html頁面、html頁面中有class=”easyui-tabs”的div
2、 在內嵌html頁面的那個panel中要添加一個style=”overflow:hidden;”屬性、針對Google瀏覽器的捲軸。
3、 Datagrid 有分頁屬性pagination：他的子選項pageSize——每頁顯示的記錄數 pageList——供於選擇的每頁的數量。
4、 每次請求後台都會向後台傳遞兩個預設的參數、page（當前頁號）、rows（每頁總記錄數）、當我們使用排序時、指定排序的欄位和規則時、就會多傳兩個參數：sort（排序的欄位）、order（排序方式：asc、desc）。我們可以根據這些參數來查詢記錄、
5、 傳入的前台的Json格式的字串要進行特殊處理、否則會錯誤的顯示總記錄數。具體處理看後台代碼中關於Json的處理。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
