datagrid（数据表格）组件的概述

datagrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。datagrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富，单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

datagrid（数据表格）组件的使用

这里，我会使用JavaScript去创建datagrid组件，然后通过datagrid组件自带的url属性请求数据。通过url属性加载数据实际上是easyUI底层通过Ajax请求数据，然后显示在页面中，这个过程是在页面加载完成后执行的。于是乎，我们可以在所在项目的WebContent目录下新建一个05-datagrid目录，并在该目录下新建一个05-datagrid.html页面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.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">$(function() {//页面加载完成后，创建数据表格datagrid$('#dg').datagrid({    //指定数据表格发送Ajax请求的地址url:'datagrid_data1.json',//...}); });
</script>
</head>
<body><table id="dg"></table>
</body>
</html>

那么通过url请求传给它的数据格式又有什么规范呢？数据格式必须是一个JSON数组，示例如下。

[{"productid": "FI-SW-01","productname": "Koi","unitcost": "10.00","status": "P","listprice": "36.50","attr1": "Large","itemid": "EST-1"},{"productid": "K9-DL-01","productname": "Dalmation","unitcost": "12.00","status": "P","listprice": "18.50","attr1": "Spotted Adult Female","itemid": "EST-10"},{"productid": "RP-SN-01","productname": "Rattlesnake","unitcost": "12.00","status": "P","listprice": "38.50","attr1": "Venomless","itemid": "EST-11"},{"productid": "RP-SN-01","productname": "Rattlesnake","unitcost": "12.00","status": "P","listprice": "26.50","attr1": "Rattleless","itemid": "EST-12"},{"productid": "RP-LI-02","productname": "Iguana","unitcost": "12.00","status": "P","listprice": "35.50","attr1": "Green Adult","itemid": "EST-13"},{"productid": "FL-DSH-01","productname": "Manx","unitcost": "12.00","status": "P","listprice": "158.50","attr1": "Tailless","itemid": "EST-14"},{"productid": "FL-DSH-01","productname": "Manx","unitcost": "12.00","status": "P","listprice": "83.50","attr1": "With tail","itemid": "EST-15"},{"productid": "FL-DLH-02","productname": "Persian","unitcost": "12.00","status": "P","listprice": "23.50","attr1": "Adult Female","itemid": "EST-16"},{"productid": "FL-DLH-02","productname": "Persian","unitcost": "12.00","status": "P","listprice": "89.50","attr1": "Adult Male","itemid": "EST-17"},{"productid": "AV-CB-01","productname": "Amazon Parrot","unitcost": "92.00","status": "P","listprice": "63.50","attr1": "Adult Male","itemid": "EST-18"}
]

于是，我们还应在05-datagrid目录下新建一个datagrid_data1.json文件，内容就是上面的那些东东。为了将通过Ajax请求响应回来的JSON数组格式的数据显示在页面中，我们需要这样做。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.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">$(function() {//页面加载完成后，创建数据表格datagrid$('#dg').datagrid({    //指定数据表格发送Ajax请求的地址url:'datagrid_data1.json',//定义标题行所有的列，注意这是一个二维数组columns:[[//像field、title等就是列属性{field:'productid',title:'商品编号',width:100},    {field:'productname',title:'商品名称',width:100},    {field:'unitcost',title:'商品单价',width:100,align:'left'},    {field:'status',title:'商品状态',width:100,align:'right'},    {field:'attr1',title:'商品属性',width:100,align:'right'}, ]]}); });
</script>
</head>
<body><table id="dg"></table>
</body>
</html>

可以看到现在使用到了datagrid组件的两个属性，如下列表所示。

也用到了如下列表所示的三个列属性。

其中，field属性后面跟的是通过Ajax请求响应回来的JSON数组中的每一个JSON对象中的属性名称，例如productid。

在Google Chrome浏览器中访问05-datagrid.html页面，运行的结果如下图所示。

不知你有没有想过数据表格要间隔变色显示呢？因为这或许会让用户看起来更舒服一点，要达到这个效果，就需要用到datagrid组件的一个striped属性了。

这时，05-datagrid.html页面的内容就要修改成下面这个样子了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.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">$(function() {//页面加载完成后，创建数据表格datagrid$('#dg').datagrid({    //指定数据表格发送Ajax请求的地址url:'datagrid_data1.json',//定义标题行所有的列，注意这是一个二维数组columns:[[//像field、title等就是列属性{field:'productid',title:'商品编号',width:100},    {field:'productname',title:'商品名称',width:100},    {field:'unitcost',title:'商品单价',width:100,align:'left'},    {field:'status',title:'商品状态',width:100,align:'right'},    {field:'attr1',title:'商品属性',width:100,align:'right'}, ]],//显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色striped:true}); });
</script>
</head>
<body><table id="dg"></table>
</body>
</html>

在Google Chrome浏览器中访问该页面，运行的结果如下图所示。

最令广大程序员高兴的一件事是datagrid组件提供了一个分页工具栏，程序员们再也不用像之前那样在页面上写一堆的显示分页工具栏的代码了。要想使用datagrid组件提供的分页工具栏，必须得在datagrid组件中添加pagination:true，即要用到datagrid组件的pagination属性。

为了使用datagrid组件提供的分页工具栏，05-datagrid.html页面的内容便要修改成下面这个样子了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.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">$(function() {//页面加载完成后，创建数据表格datagrid$('#dg').datagrid({    //指定数据表格发送Ajax请求的地址url:'datagrid_data1.json',//定义标题行所有的列，注意这是一个二维数组columns:[[//像field、title等就是列属性{field:'productid',title:'商品编号',width:100},    {field:'productname',title:'商品名称',width:100},    {field:'unitcost',title:'商品单价',width:100,align:'left'},    {field:'status',title:'商品状态',width:100,align:'right'},    {field:'attr1',title:'商品属性',width:100,align:'right'}, ]],//显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色striped:true,//显示分页工具栏pagination:true,//分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏pagePosition:"bottom"}); });
</script>
</head>
<body><table id="dg"></table>
</body>
</html>

在Google Chrome浏览器中访问该页面，运行的结果如下图所示。

从上图中，我们发现分页工具栏默认显示的是英文，但我们想显示中文，那么该怎么办呢？得引入locale目录下的easyui-lang-zh_CN.js文件。于是，05-datagrid.html页面的内容便要修改成下面这个样子了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.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" src="../locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">$(function() {//页面加载完成后，创建数据表格datagrid$('#dg').datagrid({    //指定数据表格发送Ajax请求的地址url:'datagrid_data1.json',//定义标题行所有的列，注意这是一个二维数组columns:[[//像field、title等就是列属性{field:'productid',title:'商品编号',width:100},    {field:'productname',title:'商品名称',width:100},    {field:'unitcost',title:'商品单价',width:100,align:'left'},    {field:'status',title:'商品状态',width:100,align:'right'},    {field:'attr1',title:'商品属性',width:100,align:'right'}, ]],//显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色striped:true,//显示分页工具栏（分页工具栏默认显示的是英文，但我们想显示中文，那么该怎么办呢？得引入locale目录下的easyui-lang-zh_CN.js文件）pagination:true,//分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏pagePosition:"bottom"}); });
</script>
</head>
<body><table id="dg"></table>
</body>
</html>

再次在Google Chrome浏览器中访问该页面，运行的结果如下图所示。

其中，datagrid组件还有一个pageList属性，如下列表所示。

如果我们在05-datagrid.html页面中应用了该属性，就如下面这样。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.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" src="../locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">$(function() {//页面加载完成后，创建数据表格datagrid$('#dg').datagrid({    //指定数据表格发送Ajax请求的地址url:'datagrid_data1.json',//定义标题行所有的列，注意这是一个二维数组columns:[[//像field、title等就是列属性{field:'productid',title:'商品编号',width:100},    {field:'productname',title:'商品名称',width:100},    {field:'unitcost',title:'商品单价',width:100,align:'left'},    {field:'status',title:'商品状态',width:100,align:'right'},    {field:'attr1',title:'商品属性',width:100,align:'right'}, ]],//显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色striped:true,//显示分页工具栏（分页工具栏默认显示的是英文，但我们想显示中文，那么该怎么办呢？得引入locale目录下的easyui-lang-zh_CN.js文件）pagination:true,//分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏pagePosition:"bottom",//下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数）pageList:[3,5,10]}); });
</script>
</head>
<body><table id="dg"></table>
</body>
</html>

那么，在Google Chrome浏览器中访问该页面，运行的结果就如下图所示。

一般来说，每一行记录最后面的那列都代表的是一组操作，例如修改或者删除，以方便对记录执行修改或者删除操作，就像下图所示的那样。

要想实现这样的效果，必须用到一个列属性，即formatter属性。

如此一来，05-datagrid.html页面便要修改成下面这个样子了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.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" src="../locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">$(function() {//页面加载完成后，创建数据表格datagrid$('#dg').datagrid({    //指定数据表格发送Ajax请求的地址url:'datagrid_data1.json',//定义标题行所有的列，注意这是一个二维数组columns:[[//像field、title等就是列属性{field:'productid',title:'商品编号',width:100},    {field:'productname',title:'商品名称',width:100},    {field:'unitcost',title:'商品单价',width:100,align:'left'},    {field:'status',title:'商品状态',width:100,align:'right'},    {field:'attr1',title:'商品属性',width:100,align:'right'}, {field:'xxxx',title:'操作',width:100,align:'left',formatter:function(value,row,index){return "<a href='#'>修改</a> | <a href='#'>删除</a>";}}]],//显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色striped:true,//显示分页工具栏（分页工具栏默认显示的是英文，但我们想显示中文，那么该怎么办呢？得引入locale目录下的easyui-lang-zh_CN.js文件）pagination:true,//分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏pagePosition:"bottom",//下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数）pageList:[3,5,10]}); });
</script>
</head>
<body><table id="dg"></table>
</body>
</html>

我们知道在页面加载完毕后，会通过Ajax请求获取表格数据，除此之外，我们还要知道一件事情，那就是在显示分页工具栏后，Ajax请求会多出两个请求参数。在使用Google Chrome浏览器中访问页面时，按住F12进入调试模式，就能看到datagrid组件向后台提交了两个参数rows和page，从名称的定义上不难理解，page参数表示的是前台请求数据的当前页数，rows参数表示的是每页显示的记录数。

rows和page这两个参数是后台进行分页查询必不可少的参数，所以我们在后台程序中必须接收这两个参数才能进行分页查询。通过以上的分析，我们知道了easyUI的datagrid组件已经封装好了前台的分页逻辑，但是要真正实现分页显示，后台还需要响应前台所必须的参数，例如：数据的总记录数、总页数、当前页数以及数据列表信息等。其实，后台响应回来的数据只需要包括数据的总记录数和数据列表信息即可。这是为什么呢？因为前台向后台发送的请求是一个Ajax请求，这时并没有刷新页面，也就是说当前所在页面只需要通过在原来的基础上+1或者-1即可，总页数又可以通过计算得知。所以，具体的响应数据的格式应该像下面这样。

{//数据的总记录数"total": 28,//当前页需要显示的数据列表信息"rows": [{"productid": "FI-SW-01","productname": "Koi","unitcost": "10.00","status": "P","listprice": "36.50","attr1": "Large","itemid": "EST-1"},{"productid": "K9-DL-01","productname": "Dalmation","unitcost": "12.00","status": "P","listprice": "18.50","attr1": "Spotted Adult Female","itemid": "EST-10"},{"productid": "RP-SN-01","productname": "Rattlesnake","unitcost": "12.00","status": "P","listprice": "38.50","attr1": "Venomless","itemid": "EST-11"},{"productid": "RP-SN-01","productname": "Rattlesnake","unitcost": "12.00","status": "P","listprice": "26.50","attr1": "Rattleless","itemid": "EST-12"},{"productid": "RP-LI-02","productname": "Iguana","unitcost": "12.00","status": "P","listprice": "35.50","attr1": "Green Adult","itemid": "EST-13"},{"productid": "FL-DSH-01","productname": "Manx","unitcost": "12.00","status": "P","listprice": "158.50","attr1": "Tailless","itemid": "EST-14"},{"productid": "FL-DSH-01","productname": "Manx","unitcost": "12.00","status": "P","listprice": "83.50","attr1": "With tail","itemid": "EST-15"},{"productid": "FL-DLH-02","productname": "Persian","unitcost": "12.00","status": "P","listprice": "23.50","attr1": "Adult Female","itemid": "EST-16"},{"productid": "FL-DLH-02","productname": "Persian","unitcost": "12.00","status": "P","listprice": "89.50","attr1": "Adult Male","itemid": "EST-17"},{"productid": "AV-CB-01","productname": "Amazon Parrot","unitcost": "92.00","status": "P","listprice": "63.50","attr1": "Adult Male","itemid": "EST-18"}]
}

easyUI快速入门第五讲——easyUI中的datagrid（数据表格）组件相关推荐

Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏
Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏即使是现在,很多初学游戏开发的同学,在谈到Unity的时候,依然会认为Unity只能用于制作3D游戏的.实际上,Unity在2013年发布 ...
树莓派从零开始快速入门第9讲——串口
树莓派从零开始快速入门第9讲--串口目录树莓派从零开始快速入门第9讲--串口一.前言二.配置串口三.串口收发测试 1.查询端口 2.串口调试四.程序编写并运行五.结束语一.前言串口是 ...
datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件（el-datagrid）...
背景 element-ui 中的 el-table 组件只提供了数据展示,而分页功能作为一个单独的组件 el-pagination,并没有像 Ant Design 一样集成到 el-able 组件中, ...
树莓派从零开始快速入门第8讲——单总线（以DS18B20为例）
树莓派从零开始快速入门第8讲--单总线(以DS18B20为例) 目录树莓派从零开始快速入门第8讲--单总线(以DS18B20为例) 一.前言二.硬件连接三.使能1-write接口四.通讯测试 ...
树莓派从零开始快速入门第5讲——点亮LED
树莓派从零开始快速入门第5讲--点亮LED 目录树莓派从零开始快速入门第5讲--点亮LED 一.前言二.引脚对照表三.硬件连接四.编写程序 1.编程方式简述 2.python编程五.结束语 ...
树莓派从零开始快速入门第14讲——摄像头
树莓派从零开始快速入门第14讲--摄像头目录树莓派从零开始快速入门第14讲--摄像头一.前言二.硬件准备三.软件配置 1.打开图形化窗口 2.下载并运行motion 3.查看监控画面 4.配 ...
树莓派从零开始快速入门第0讲——环境安装
树莓派从零开始快速入门第0讲--环境安装目录树莓派从零开始快速入门第0讲--环境安装一.前言二.硬件准备 1. 树莓派(必选) 2. SD卡(必选) 3. 读卡器(必选) 4. 电源(必选) ...
R语言入门第四集实验三：数据可视化
R语言入门第四集实验三:数据可视化一.资源 [R语言]R语言数据可视化--东北大学大数据班R实训第三次作业在r中rowsums_R语言初级教程(15): 矩阵(下篇) R语言环境变量的设置环境 ...
Android零基础入门第83节：Activity间数据传递方法汇总
2019独角兽企业重金招聘Python工程师标准>>> 在Activity间传递的数据一般比较简单,但是有时候实际开发中也会传一些比较复杂的数据,本节一起来学习更多Activity间 ...
前端简单入门第十八讲使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...

easyUI快速入门第五讲——easyUI中的datagrid（数据表格）组件

datagrid（数据表格）组件的概述

datagrid（数据表格）组件的使用

easyUI快速入门第五讲——easyUI中的datagrid（数据表格）组件相关推荐

最新文章

热门文章