（一）創建項目登錄頁
（二）實現數據顯示頁
（三）添加datagrid控件
（四）實現添加功能頁
（五）實現更新功能頁
（六）實現刪除功能頁
實現添加數據功能
1、在listlogin.html頁面中，單擊用戶單擊datagrid表格工具欄上的“添加”按鈕即彈出一個添加管理員的對話框，代碼如下。
function insert(){
if($("#dd") != null){//判斷頁面中是滯存在id等於dd元素，若存則刪除它
$("#dd").remove();
}
$("body").append("<div id='dd'></div>");//在頁面的body元素中添加一個div元素，且它的id="dd"
$('#dd').dialog({ //定義一個彈出一個窗口
title: '添加管理員', //窗口的標題
width: 280, //窗口的寬度
height: 140, //窗口的高度
closed: false, //窗口沒有顯示關閉按鈕
cache: false, //沒有設置緩衝
modal: true ,//設置窗口模式爲真的
buttons:[{ //爲窗口設置兩個按鈕，即登錄和重置兩個按鈕
text:'添加',
handler:function(){//當單擊登錄按鈕時，調用send（）方法進行處理表單
$('#ff').form('submit', {
url:"insertlogin.jsp" ,//當用於單擊提交按鈕時，把表單數據提交到後臺login.jsp進行處理
onSubmit: function(){
//在這裏可以對用戶輸入的信息進行驗證操作
if($("#name").val()==""){//判斷用戶名輸入框是否爲空，若爲空則提示用戶，並返回到登錄界面
$.messager.alert('錯誤','用戶名不能爲空');
return false;
}
if($("#pass").val()==""){//判斷密碼輸入框是否爲空，若爲空則提示用戶，並返回到登錄界面
$.messager.alert('錯誤','密碼不能爲空');
return false;
}
},
success:function(data){ //若提交成功則彈出對話框提示用戶
$('#dd').dialog("close");//關閉當前添加窗口
$('#dg').datagrid("reload");//重新裝入表格的內容
}
});
}
},{
text:'關閉',
handler:function(){//當單擊重置按鈕所要執行的任務
$('#dd').dialog("close");//關閉當前添加窗口
$('#dg').datagrid("reload");//重新裝入表格的內容
}
}]
});
//str變量是構建添加管理員表單
var str="";
str+='<form id="ff" method="post">';
str+='<table>';
str+=' <tr>';
str+=' <td>用戶名:</td>';
str+=' <td><input name="name" id="name" type="text"></input></td>';
str+=' </tr>';
str+=' <tr>';
str+=' <td>密 碼:</td>';
str+=' <td><input name="pass" id="pass" type="password"></input></td>';
str+=' </tr> ';
str+='</table>';
str+='</form>';
$("#dd").html(str);//把表單放到id="dd"元素，即把表單放到對話框中
};
2、完整的代碼如下。
<!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 insert(){//當用戶單擊工具欄上的“添加“按鈕時將會執行該方法。
if($("#dd") != null){//判斷頁面中是滯存在id等於dd元素，若存則刪除它
$("#dd").remove();
}
$("body").append("<div id='dd'></div>");//在頁面的body元素中添加一個div元素，且它的id="dd"
$('#dd').dialog({ //定義一個彈出一個窗口
title: '添加管理員', //窗口的標題
width: 280, //窗口的寬度
height: 140, //窗口的高度
closed: false, //窗口沒有顯示關閉按鈕
cache: false, //沒有設置緩衝
modal: true ,//設置窗口模式爲真的
buttons:[{ //爲窗口設置兩個按鈕，即登錄和重置兩個按鈕
text:'添加',
handler:function(){//當單擊登錄按鈕時，調用send（）方法進行處理表單
$('#ff').form('submit', {
url:"insertlogin.jsp" ,//當用於單擊提交按鈕時，把表單數據提交到後臺login.jsp進行處理
onSubmit: function(){
//在這裏可以對用戶輸入的信息進行驗證操作
if($("#name").val()==""){//判斷用戶名輸入框是否爲空，若爲空則提示用戶，並返回到登錄界面
$.messager.alert('錯誤','用戶名不能爲空');
return false;
}
if($("#pass").val()==""){//判斷密碼輸入框是否爲空，若爲空則提示用戶，並返回到登錄界面
$.messager.alert('錯誤','密碼不能爲空');
return false;
}
},
success:function(data){ //若提交成功則彈出對話框提示用戶
$('#dd').dialog("close");//關閉當前添加窗口
$('#dg').datagrid("reload");//重新裝入表格的內容
}
});
}
},{
text:'關閉',
handler:function(){//當單擊重置按鈕所要執行的任務
$('#dd').dialog("close");//關閉當前添加窗口
$('#dg').datagrid("reload");//重新裝入表格的內容
}
}]
});
//str變量是構建添加管理員表單
var str="";
str+='<form id="ff" method="post">';
str+='<table>';
str+='<tr>';
str+='<td>用戶名:</td>';
str+='<td><input name="name" id="name" type="text"></input></td>';
str+='</tr>';
str+='<tr>';
str+='<td>密 碼:</td>';
str+='<td><input name="pass" id="pass" type="password"></input></td>';
str+='</tr>';
str+='</table>';
str+='</form>';
$("#dd").html(str);//把表單放到id="dd"元素，即把表單放到對話框中
};
$(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() {
insert();
}
}, '-', {
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>
運行結果，當我們單擊工具欄上的添加按鈕結果如下。
當單擊"添加"按鈕時，將會把管理員信息傳遞至後臺處理程序insert.jsp中進行處理。
2，在WebContext目錄中添加管理員的後臺處理程序insertlogin.jsp。如下圖所示。
insertlogin.jsp文件代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%!
private static final String DBDRIVER = "org.gjt.mm.mysql.Driver";// 採用mysql-connector-java-5.1.12-bin.jar作爲連接mysql數據庫時，使用的數據庫驅動類。
// 連接數據庫地址,其中localhost是我們在本機上安裝的mysql數據庫管理系統，stsc是在myssql數據庫系統中創建的數據庫名,若使用較低版時，使用“jdbc:mysql://localhost:3306/zy”
private static final String DBURL = "jdbc:mysql://localhost:3306/stsc";// 採用mysql-connector-java-5.1.12-bin.jar作爲連接mysql數據庫時，使用的數據庫地址。
// 連接數據庫管理員，是mysql數據庫的系統管理員root
private static final String DBUSER = "root";
// 連接數據庫管理員登錄密碼,是在安裝mysql數據庫時，給定的密碼
private static final String DBPASS = "admin";
// 創建數據庫連接對象conn
private static Connection conn = null;
public static boolean insertUsers(String name,String pass){//該方法用於把參數name和pass的值添加到數據表login中
boolean flag=false;//標誌位，用於是否添加成功，若添加成功flag爲true,否則爲false
try{
Class.forName(DBDRIVER);//加驅動程序
conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);//連接數據庫
String sql="insert into login(name,pass) values(?,?)";//設置sql命令
PreparedStatement psta=conn.prepareStatement(sql);//創建執行sql命令的對象
psta.setString(1, name);//爲命令中的參數賦值
psta.setString(2, pass);
int i=psta.executeUpdate();//執行sql命令，並把執行結果返回結i變量
if(i>0){//若執行命令成功i變量的值是大於0，否則小於0
flag=true;
}
psta.close();//關閉執行sql對象
conn.close();//關閉數據庫連接對象
return flag;//返回標誌位，執行添加成功返回 true，否則返回false
}catch(Exception e){
return flag;
}
}
%>
<%
if(insertUsers(request.getParameter("name"), request.getParameter("pass"))){
out.println("添加成功");
}else{
out.println("添加失敗");
}
%>