（一）創建項目登錄頁
（二）實現數據顯示頁
（三）添加datagrid控件
（四）實現添加功能頁
（五）實現更新功能頁
（六）實現刪除功能頁
代碼連接：https://gitee.com/night_lack/easyui_jsp_jdbc/tree/dev/
添加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>
運行結果如下圖所示。
