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

淡淡的烟草味﹌ 2023-06-12 05:25 21阅读 0赞

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

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

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

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

可以看到现在使用到了datagrid组件的两个属性，如下列表所示。  
![在这里插入图片描述][20191102134031696.png]  
也用到了如下列表所示的三个列属性。  
![在这里插入图片描述][20191102134039928.png]  
其中，field属性后面跟的是通过Ajax请求响应回来的JSON数组中的每一个JSON对象中的属性名称，例如productid。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
在Google Chrome浏览器中访问05-datagrid.html页面，运行的结果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]  
不知你有没有想过数据表格要间隔变色显示呢？因为这或许会让用户看起来更舒服一点，要达到这个效果，就需要用到datagrid组件的一个striped属性了。  
![在这里插入图片描述][20191102142350327.png]  
这时，05-datagrid.html页面的内容就要修改成下面这个样子了。

在Google Chrome浏览器中访问该页面，运行的结果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]  
最令广大程序员高兴的一件事是datagrid组件提供了一个分页工具栏，程序员们再也不用像之前那样在页面上写一堆的显示分页工具栏的代码了。要想使用datagrid组件提供的分页工具栏，必须得在datagrid组件中添加`pagination:true`，即要用到datagrid组件的pagination属性。  
![在这里插入图片描述][20191102162121169.png]  
为了使用datagrid组件提供的分页工具栏，05-datagrid.html页面的内容便要修改成下面这个样子了。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <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浏览器中访问该页面，运行的结果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]  
从上图中，我们发现分页工具栏默认显示的是英文，但我们想显示中文，那么该怎么办呢？得引入locale目录下的easyui-lang-zh\_CN.js文件。于是，05-datagrid.html页面的内容便要修改成下面这个样子了。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <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浏览器中访问该页面，运行的结果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]  
其中，datagrid组件还有一个pageList属性，如下列表所示。  
![在这里插入图片描述][20191102162149934.png]  
如果我们在05-datagrid.html页面中应用了该属性，就如下面这样。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <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浏览器中访问该页面，运行的结果就如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]  
一般来说，每一行记录最后面的那列都代表的是一组操作，例如修改或者删除，以方便对记录执行修改或者删除操作，就像下图所示的那样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]  
要想实现这样的效果，必须用到一个列属性，即formatter属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 8]  
如此一来，05-datagrid.html页面便要修改成下面这个样子了。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <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参数表示的是每页显示的记录数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 9]  
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"
    		}
    	]
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: /images/20230531/66bbad43611f499db184b0f1808d0493.png
[20191102134031696.png]: /images/20230531/b1c5a1b26c704513bb7861b182b2a617.png
[20191102134039928.png]: /images/20230531/f60589c9f9364ca5b520be20cd918fdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: /images/20230531/76322e18598647ff9d0666de14b0fb93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]: /images/20230531/ce4ec8d637ed479697f817af478d9f19.png
[20191102142350327.png]: /images/20230531/dbf954ec899d467b84f261e71fb6e7c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]: /images/20230531/7d15fdbf62834b8b850f1733b6ddae25.png
[20191102162121169.png]: /images/20230531/7c7ca610c84546c2af4d6d3a77ea6758.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]: /images/20230531/bfdf2cc13e9d49dcad1b2dbe6427ab36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]: /images/20230531/09b0f3ee9b874588bc58ea67d766dfc4.png
[20191102162149934.png]: /images/20230531/89cd8aa0a6c9452ba6896c25be90baad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]: /images/20230531/0917266cad2f48e39bdca08a99f143b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]: /images/20230531/c7c78d43d75c43dc9c38ebb73b74eb54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 8]: /images/20230531/8ebc1557fe7d4f258b8a337affc09137.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 9]: /images/20230531/a48c5bb8842640df98ef84653642201d.png