听到微笑
听到微笑

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

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

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

1. 将静态HTML渲染为datagrid样式





datagrid


	
	

		
			

                        
				编号
				姓名
				年龄
			

		
		
			

				001
				张三
				32
			

			

				002
				李四
				30

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

显示效果如下：

EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）_第1张图片

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





datagrid

	
	
	

		
			

				编号
				姓名
				年龄

通过url属性加载数据实际上是EasyUI底层通过Ajax请求数据，然后显示在页面中。这个过程是在页面加载完成后执行的。

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

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

示例如下：

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

 

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

EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）_第2张图片

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

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>




datagrid

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

EasyUI框架API

 

显示效果如下：

EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）_第3张图片

 

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

EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）_第4张图片

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

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

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

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

 

你可能感兴趣的:(WEB前端)