EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）

在前端页面中使用EasyUI框架时，通常会使用EasyUI自带的datagrid（数据表格）样式，下面我们对datagrid样式进行简单的介绍，并且会对datagrid的分页显示进行详细的介绍。

EasyUI的数据表格的实现有多种方式，下面我们介绍一下常用的几种。

1. 将静态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>

	<!-- 方式一：将静态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>

将静态表格渲染成EasyUI的datagrid形式非常简单，只需要在table中添加datagrid所指定的样式即可。但是需要注意的是：在第一行的“表头”中的每列中必须添加field属性，才会显示下方的数据。

显示效果如下：

2. 使用datagrid组件自带的url属性请求数据

<!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>

	<!-- 方式二：发送ajax请求获取json数据创建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属性加载数据实际上是EasyUI底层通过Ajax请求数据，然后显示在页面中。这个过程是在页面加载完成后执行的。

那通过URL请求传给它的数据格式又有什么规范呢？

数据格式必须为一个JSON数组，数组中的每一个JSON对象与表头的中列的field属性相对相应。

示例如下：

[

    {"id":"001",name:"李四,"age":"30"},

    {"id":"001",name:"张三","age":"32"}

]

上述代码的运行结果如下：

3. 使用easyUI提供的API创建datagrid，并且实现分页操作。

<%@ 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>

    <!--创建一个空表格-->

	<table id="mytable"></table>

	<script type="text/javascript">

		$(function() {

			//页面加载完成后，创建数据表格datagrid

			$("#mytable").datagrid(

							{

								//定义标题行所有的列，注意这是一个二维数组

								columns : [ [ {

									title : '编号',

									field : 'id',

									checkbox : true

								}, {

									title : '姓名',

									field : 'name'

								}, {

									title : '年龄',

									field : 'age'

								}, {

									title : '地址',

									field : 'address'

								} ] ],

								//指定数据表格发送ajax请求的地址

								url : '${pageContext.request.contextPath }/json/datagrid_data.json',

                                            <!--使用独立的一列显示行数-->

								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,

                                                                     //显示分页的条数

								pageList : [ 3, 5, 7, 10 ]

							});

		});

	</script>

</body>

</html>

上述代码通过$("#mytable")调用了datagrid方法，该方法传入的是一个JSON对象，里面包含诸多属性，属性的作用详见网址:

EasyUI框架API

显示效果如下：

上述代码实际上也是在页面加载完毕后，通过Ajax请求获取的表格数据。但是我们在设置分页栏后，Ajax请求会多出两个请求参数，我们可以通过火狐浏览器的抓包工具查看：

page参数：当前前台请求数据的当前页号
rows参数：每页显示的条数

这两个参数时后台进行分页查询必不可少的参数，所以我们在后台程序中必须接收这两个参数才能进行分页查询。

通过抓包我们知道了EasyUI的Pagination组件，已经封装好了前台的分页逻辑，但是要真正实现分页显示，后台还需要响应前台所必须的参数，例如：数据的总条数，总页数，当前页号，数据信息。但通过分析可知，我们只需要响应数据的总条数，和数据信息即可。这又是为什么呢？因为这个请求是一个Ajax请求，并没有刷新页面，也就是当前所在页面只需要通过在原来的基础上+1或者-1即可，总页数又可以通过计算得知。
具体相应数据的格式如下：

{

    //数据的总条数

	"total":123,

    //在当前页需要显示的数据

	"rows":[

    	    {"id":"001","name":"李四","age":"30"},

    	    {"id":"001","name":"张三","age":"32"}

	]

}

注意：上面给出的所有代码并没有引入EasyUI所需要的js以及css文件，在使用时需根据情况添加依赖文件。

<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>