J2EE 之easyUI+jsp+JDBC模式（三）
（一）创建项目登录页
（二）实现数据显示页
（三）添加datagrid控件
（四）实现添加功能页
（五）实现更新功能页
（六）实现删除功能页
添加datagrid控件
为listlogin.html页面中的datagrid控件数据表添加工具栏和分页栏。
（1）在datagrid中添加如下代码，即可添加了工具栏。
toolbar : [ {//显示工具栏
text : '添加',//工具栏上的按钮标题
iconCls : 'icon-add',//工具栏上的按钮图标
handler : function() {//当单击添加按钮时，就在该函数中进行处理
}
}, '-', {
text : '更新',
iconCls : 'icon-edit',
handler : function() {
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
}
}]
（2）在datagrid中添加如下代码，即可添加了分页栏。
pagination : true,//显示分页工具
pageNumber : 1,//表示显示第几页，第一页
pageSize : 10,//表示每页显示的记录个数
pageList : [ 10, 20, 30, 40, 50 ],//选择每页显示记录个数列表
一个带有工具栏和分页栏的管理员信息列表页面listlogin.html完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员信息列表</title>
<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/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
//利用easyui的datagrid组件以表格方式显示数据表login的内容
$('#dg').datagrid({
url:'listlogin.jsp', //这是处理数据的后台程序
columns:[[ //columns是定义datagrid张爱玲折表格头
{field:'id',title:'编号',width:100}, //表格头部的列标题
{field:'name',title:'用户名',width:100},
{field:'pass',title:'密码',width:100}
]],
toolbar : [ {//显示工具栏
text : '添加',
iconCls : 'icon-add',
handler : function() {
}
}, '-', {
text : '更新',
iconCls : 'icon-edit',
handler : function() {
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
}
}] ,
pagination : true,//显示分页工具
pageNumber : 1,//表示显示第几页，第一页
pageSize : 10,//表示每页显示的记录个数
pageList : [ 10, 20, 30, 40, 50 ],//第一页显示记录个数列表
});
})
</script>
</head>
<body>
<div id="dg"></div>
</body>
</html>
运行结果如下图所示。