（一）創建項目登錄頁
（二）實現數據顯示頁
（三）添加datagrid控件
（四）實現添加功能頁
（五）實現更新功能頁
（六）實現刪除功能頁
實現更新數據功能
1、在listlogin.html頁面中，單擊用戶單擊datagrid表格工具欄上的“更新”按鈕即彈出一個更新管理員的對話框，代碼如下。
function update(row){//該函數用於處理當用戶單擊工具欄上的更新按鈕事件
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><input name="id" id="id" type="hidden"></input></td>';
str+=' </tr> ';
str+='</table>';
str+='</form>';
$("#dd").html(str);//把表單放到id="dd"元素，即把表單放到對話框中
$('#ff').form('load',row[0]);//把用戶選擇的數據行的內容裝入到表單中
$("#id").val(row[0]["id"]);//因爲要進行更新所以要把用戶的選擇數據行的關鍵字id值隱藏賦給表單中的id字段
}
2、要在datagrid的工具欄上的更新按鈕的事件中輸入如下代碼。
{
text : '更新',
iconCls : 'icon-edit',
handler : function() {
var row=$('#dg').datagrid("getSelections");//獲取用戶選擇的數據行
if(row){
if(row.length>1){
//選擇的數據行大於1,提示用戶，一次只能選擇一行數據進行更新操作
$.messager.alert("提示","一次只能更新一行數據，不能更新多行數據");
return false;
}else if(row.length==1){
update(row);//如選擇選擇了一行數據，則調用update（）方法，彈出更新對話框
}else{
//如果沒有選擇數據行則提示用戶只有選擇數據行後才能進行更新操作
$.messager.alert("提示","沒有選擇要更新的數據行，不能進行更新操作");
return false;
}
}
}
}
3、完整的代碼如下。
<!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 update(row){//該函數用於處理當用戶單擊工具欄上的更新按鈕事件
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:"updatelogin.jsp" ,//當用於單擊提交按鈕時，把表單數據提交到後臺updatelogin.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><input name="id" id="id" type="hidden"></input></td>';
str+='</tr>';
str+='</table>';
str+='</form>';
$("#dd").html(str);//把表單放到id="dd"元素，即把表單放到對話框中
$('#ff').form('load',row[0]);
$("#id").val(row[0]["id"]);
}
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() {
var row=$('#dg').datagrid("getSelections");//獲取用戶選擇的數據行
if(row){
if(row.length>1){
//選擇的數據行大於1,提示用戶，一次只能選擇一行數據進行更新操作
$.messager.alert("提示","一次只能更新一行數據，不能更新多行數據");
return false;
}else if(row.length==1){
update(row);//如選擇選擇了一行數據，則調用update（）方法，彈出更新對話框
}else{
//如果沒有選擇數據行則提示用戶只有選擇數據行後才能進行更新操作
$.messager.alert("提示","沒有選擇要更新的數據行，不能進行更新操作");
return false;
}
}
}
}, '-', {
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>
4、運行結果如下圖所示。
在更新管理員對話框中若單擊”更新“按鈕，則把更新的信息傳遞給後臺服務器的update.jsp程序進行處理。
5、在WebContext目錄中創建updatelogin.jsp文件，如下圖所示。
updatelogin.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;
//用於更新login數據表中滿足條件的記錄
public static boolean updateUsers(int id,String name,String pass){
boolean flag=false;//用於標誌
try{
Class.forName(DBDRIVER);//加驅動程序
conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);//連接數據庫
String sql="update login set name=?,pass=? where id=?"; //設置sql命令
PreparedStatement psta=conn.prepareStatement(sql);//創建執行sql命令的對象
psta.setString(1, name);//爲命令中的參數賦值
psta.setString(2, pass);
psta.setInt(3, id);
int i=psta.executeUpdate();//執行sql命令，並把執行結果返回給i
if(i>0){//若i的值大於0則表示執行sql命令成功，否則執行sql命令失敗
flag=true;
}
psta.close();//關閉執行sql對象
conn.close();//關閉數據庫連接對象
return flag;//返回標誌位，執行更新成功返回 true，否則返回false
}catch(Exception e){
return flag;
}
}
%>
<%
if(updateUsers(Integer.parseInt(request.getParameter("id").toString()),request.getParameter("name"), request.getParameter("pass"))){
out.println("更新成功");
}else{
out.println("更新失敗");
}
%>