（一）创建项目登录页
（二）实现数据显示页
（三）添加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("添加失败");
}
%>