五、easyUI中的datagrid（数据表格）组件
1.datagrid（数据表格）组件的概述
datagrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。datagrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富，单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
2.datagrid（数据表格）组件的使用
使用JavaScript去创建datagrid组件，通过datagrid组件自带的url属性请求数据。通过url属性加载数据实际上是easyUI底层通过Ajax请求数据，然后显示在页面中，这个过程是在页面加载完成后执行的。新建一个05-datagrid.html页面。
通过url请求传给它的数据
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>datagridtitle><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js">script><script type="text/javascript" src="./js/jquery.easyui.min.js">script>
head>
<body><table id="dg">table><script type="text/javascript">$(function() {// 页面加载完成后，创建数据表格datagrid$('#dg').datagrid({//指定数据表格发送Ajax请求的地址url:'./data/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>
body>
html>
数据格式必须是一个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"}
]
使用到了datagrid组件的两个属性，如下列表所示:
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| columns | array | DataGrid列配置对象，详见列属性说明中更多的细节 | undefined |
| url | string | 一个UR!从远程站点请求数据 | null |
也用到了如下列表所示的三个列属性
| 属性名称 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 列标题文本 | undefined |
| field | string | 列字段名称。 | undefined |
| align | string | 指明如何对齐列数据。可以使用的值有: eft,right，center | undefined |
field属性后面跟的是通过Ajax请求响应回来的JSON数组中的每一个JSON对象中的属性名称，例如productid
运行的结果如下图所示：
数据表格要间隔变色显示，需要用到datagrid组件的striped属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| striped | boolean | 是否显示斑马线效果 | false |
05-datagrid.html页面的内容就要修改成下面这个样子
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>datagridtitle><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js">script><script type="text/javascript" src="./js/jquery.easyui.min.js">script>
head>
<body><table id="dg">table><script type="text/javascript">$(function() {// 页面加载完成后，创建数据表格datagrid$('#dg').datagrid({// 指定数据表格发送Ajax请求的地址url:'./data/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>
body>
html>
运行的结果如下图所示：
datagrid组件提供了一个分页工具栏，想使用datagrid组件提供的分页工具栏，必须得在datagrid组件中添加pagination:true，即要用到datagrid组件的pagination属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| pagination | boolean | 如果为true，则在DataGrid控件底部显示分页工具栏 | false |
| pagePosition | string | 定义分页工具栏的位置。可用的值有: top,bottom,both’(该属性自1.3版开始可用) | bottom |
使用datagrid组件提供的分页工具栏，05-datagrid.html页面的内容便要修改成下面这个样子了
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>datagridtitle><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js">script><script type="text/javascript" src="./js/jquery.easyui.min.js">script>
head>
<body><table id="dg">table><script type="text/javascript">$(function() {// 页面加载完成后，创建数据表格datagrid$('#dg').datagrid({// 指定数据表格发送Ajax请求的地址url:'./data/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>
body>
html>
运行的结果如下图所示：
发现分页工具栏默认显示的是英文，但想显示中文，得引入locale目录下的easyui-lang-zh_CN.js文件，于是，05-datagrid.html页面的内容便要修改成下面这个样子
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>datagridtitle><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/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="./js/locale/easyui-lang-zh_CN.js">script>
head>
<body><table id="dg">table><script type="text/javascript">$(function() {// 页面加载完成后，创建数据表格datagrid$('#dg').datagrid({// 指定数据表格发送Ajax请求的地址url:'./data/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>
body>
html>
运行的结果如下图所示：
其中，datagrid组件还有一个pageList属性，如下列表所示：
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| pageList | array | 在设置分页属性的时候 初始化页面大小选择列表 | [10,20,30.40,50] |
在05-datagrid.html页面中应用了该属性，就如下面这样
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>datagridtitle><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/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="./js/locale/easyui-lang-zh_CN.js">script>
head>
<body><table id="dg">table><script type="text/javascript">$(function() {// 页面加载完成后，创建数据表格datagrid$('#dg').datagrid({// 指定数据表格发送Ajax请求的地址url:'./data/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",//下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数）pageList:[3,5,10]});});script>
body>
html>
运行的结果如下图所示：
一般来说，每一行记录最后面的那列都代表的是一组操作，例如修改或者删除，以方便对记录执行修改或者删除操作，就像下图所示的那样。
要想实现这样的效果，必须用到一个列属性，即formatter属性
如此一来，05-datagrid.html页面便要修改成下面这个样子了
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>datagridtitle><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/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="./js/locale/easyui-lang-zh_CN.js">script>
head>
<body><table id="dg">table><script type="text/javascript">$(function() {// 页面加载完成后，创建数据表格datagrid$('#dg').datagrid({// 指定数据表格发送Ajax请求的地址url:'./data/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) {// row为行记录，index是每一行的行号从0开始console.log(value, row, index);return "修改 | 删除";}}]],// 显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色striped:true,// 显示分页工具栏pagination:true,// 分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏pagePosition:"bottom",//下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数）pageList:[3,5,10]});});script>
body>
html>
输出结果如下所示：
前台向后台发送的请求是一个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"}]
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！