J2EE 之easyui+jsp+JDBC模式（五）
（一）创建项目登录页
（二）实现数据显示页
（三）添加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("更新失败");
}
%>