EasyUI框架Datagrid（數(shù)據(jù)表格）的實現(xiàn)，以及Datagrid的分頁顯示（詳解）

在前端頁面中使用EasyUI框架時，通常會使用EasyUI自帶的datagrid（數(shù)據(jù)表格）樣式，下面我們對datagrid樣式進行簡單的介紹，并且會對datagrid的分頁顯示進行詳細的介紹。

EasyUI的數(shù)據(jù)表格的實現(xiàn)有多種方式，下面我們介紹一下常用的幾種。

1. 將靜態(tài)HTML渲染為datagrid樣式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid</title>
</head>
<body>
	<!-- 方式一：將靜態(tài)HTML渲染為datagrid樣式 -->
	<table class="easyui-datagrid">
		<thead>
			<tr>
                        <!--在表頭的每列中都必須加入field屬性-->
				<th data-options="field:'id'">編號</th>
				<th data-options="field:'name'">姓名</th>
				<th data-options="field:'age'">年齡</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>張三</td>
				<td>32</td>
			</tr>
			<tr>
				<td>002</td>
				<td>李四</td>
				<td>30</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

將靜態(tài)表格渲染成EasyUI的datagrid形式非常簡單，只需要在table中添加datagrid所指定的樣式即可。但是需要注意的是：在第一行的“表頭”中的每列中必須添加field屬性，才會顯示下方的數(shù)據(jù)。

顯示效果如下：

2. 使用datagrid組件自帶的url屬性請求數(shù)據(jù)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid</title>
<body>
	
	<!-- 方式二：發(fā)送ajax請求獲取json數(shù)據(jù)創(chuàng)建datagrid -->
	<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'" class="easyui-datagrid">
		<thead>
			<tr>
				<th data-options="field:'id'">編號</th>
				<th data-options="field:'name'">姓名</th>
				<th data-options="field:'age'">年齡</th>
			</tr>
		</thead>
	</table>
</body>
</html>

通過url屬性加載數(shù)據(jù)實際上是EasyUI底層通過Ajax請求數(shù)據(jù)，然后顯示在頁面中。這個過程是在頁面加載完成后執(zhí)行的。

那通過URL請求傳給它的數(shù)據(jù)格式又有什么規(guī)范呢？

數(shù)據(jù)格式必須為一個JSON數(shù)組，數(shù)組中的每一個JSON對象與表頭的中列的field屬性相對相應(yīng)。

示例如下：

[
    {"id":"001",name:"李四,"age":"30"},
    {"id":"001",name:"張三","age":"32"}
]

上述代碼的運行結(jié)果如下：

3. 使用easyUI提供的API創(chuàng)建datagrid，并且實現(xiàn)分頁操作。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid</title>
</head>
<body>
    <!--創(chuàng)建一個空表格-->
	<table id="mytable"></table>

	<script type="text/javascript">
		$(function() {
			//頁面加載完成后，創(chuàng)建數(shù)據(jù)表格datagrid
			$("#mytable").datagrid(
							{
								//定義標題行所有的列，注意這是一個二維數(shù)組
								columns : [ [ {
									title : '編號',
									field : 'id',
									checkbox : true
								}, {
									title : '姓名',
									field : 'name'
								}, {
									title : '年齡',
									field : 'age'
								}, {
									title : '地址',
									field : 'address'
								} ] ],
								//指定數(shù)據(jù)表格發(fā)送ajax請求的地址
								url : '${pageContext.request.contextPath }/json/datagrid_data.json',
                                            <!--使用獨立的一列顯示行數(shù)-->
								rownumbers : true,
								singleSelect : true,
								//定義工具欄
								toolbar : [ {
									text : '添加',
									iconCls : 'icon-add',
									//為按鈕綁定單擊事件
									handler : function() {
										alert('add...');
									}
								}, {
									text : '刪除',
									iconCls : 'icon-remove'
								}, {
									text : '修改',
									iconCls : 'icon-edit'
								}, {
									text : '查詢',
									iconCls : 'icon-search'
								} ],
								//顯示分頁條
								pagination : true,

                                                                     //顯示分頁的條數(shù)
								pageList : [ 3, 5, 7, 10 ]
							});
		});
	</script>
</body>
</html>

上述代碼通過$("#mytable")調(diào)用了datagrid方法，該方法傳入的是一個JSON對象，里面包含諸多屬性，屬性的作用詳見網(wǎng)址:

EasyUI框架API

顯示效果如下：

上述代碼實際上也是在頁面加載完畢后，通過Ajax請求獲取的表格數(shù)據(jù)。但是我們在設(shè)置分頁欄后，Ajax請求會多出兩個請求參數(shù)，我們可以通過火狐瀏覽器的抓包工具查看：

page參數(shù)：當前前臺請求數(shù)據(jù)的當前頁號
rows參數(shù)：每頁顯示的條數(shù)

這兩個參數(shù)時后臺進行分頁查詢必不可少的參數(shù)，所以我們在后臺程序中必須接收這兩個參數(shù)才能進行分頁查詢。

通過抓包我們知道了EasyUI的Pagination組件，已經(jīng)封裝好了前臺的分頁邏輯，但是要真正實現(xiàn)分頁顯示，后臺還需要響應(yīng)前臺所必須的參數(shù)，例如：數(shù)據(jù)的總條數(shù)，總頁數(shù)，當前頁號，數(shù)據(jù)信息。但通過分析可知，我們只需要響應(yīng)數(shù)據(jù)的總條數(shù)，和數(shù)據(jù)信息即可。這又是為什么呢？因為這個請求是一個Ajax請求，并沒有刷新頁面，也就是當前所在頁面只需要通過在原來的基礎(chǔ)上+1或者-1即可，總頁數(shù)又可以通過計算得知。
具體相應(yīng)數(shù)據(jù)的格式如下：

{
    //數(shù)據(jù)的總條數(shù)
	"total":123,
    //在當前頁需要顯示的數(shù)據(jù)
	"rows":[
    	    {"id":"001","name":"李四","age":"30"},
    	    {"id":"001","name":"張三","age":"32"}
	]
}

注意：上面給出的所有代碼并沒有引入EasyUI所需要的js以及css文件，在使用時需根據(jù)情況添加依賴文件。

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>

posted @ 2018-09-26 17:52 聽到微笑閱讀(128) 評論(0) 收藏舉報來源

刷新頁面返回頂部

聽到微笑的博客

EasyUI框架Datagrid（數(shù)據(jù)表格）的實現(xiàn)，以及Datagrid的分頁顯示（詳解）

1. 將靜態(tài)HTML渲染為datagrid樣式

2. 使用datagrid組件自帶的url屬性請求數(shù)據(jù)

3. 使用easyUI提供的API創(chuàng)建datagrid，并且實現(xiàn)分頁操作。

公告

聽到微笑的博客

EasyUI框架Datagrid（數(shù)據(jù)表格）的實現(xiàn)，以及Datagrid的分頁顯示（詳解）

1. 將靜態(tài)HTML渲染為datagrid樣式

2. 使用datagrid組件自帶的url屬性請求數(shù)據(jù)

3. 使用easyUI提供的API創(chuàng)建datagrid，并且實現(xiàn)分頁操作。

公告

EasyUI框架Datagrid（數(shù)據(jù)表格）的實現(xiàn)，以及Datagrid的分頁顯示（詳解）

3. 使用easyUI提供的API創(chuàng)建datagrid，并且實現(xiàn)分頁操作。