项目 https://gitee.com/night_lack/easyui_servlet_javabean.git
Easyui创建用户显示界面
<!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() {
var row = $('#dg').datagrid(
"getSelections");//获取用户选择的数据行
if (row) {
if (row.length >= 1) {//判断用户是否选择了要删除的数据行
var strid = "";//用于保存用户选择数据行的
//下面是遍历用户所选择的数据行
$(row).each(function(index,item) {
if (strid != "") {
strid += ",";
}
strid += item["id"];//把用户选择的数据行的id保
});
$.messager.confirm(
'确认',
'您确认想要删除记录吗？',
function(r) {
if (r) {
$.ajax({//采用异步通讯方式进请求
type : "post",//采用post方式向后台程序请求
url : "dellogin.jsp",//请求的后台处理程序
data : {//在向后台程序请求的同时，给后台程序传递参数，邓
strid : strid
},
success : function(data) {//若请示成功时，则返回data
$('#dg').datagrid("reload");//删除成功后要对datarid的表格中的数据进行更新操作
}
});
}
});
} else {
$.messager.alert("提示","你没有选择数据行，所以不能进行删除操作");
return false;
}}}
} ] ,
pagination : true,//显示分页工具
pageNumber : 1,//表示显示第几页，第一页
pageSize : 10,//表示每页显示的记录个数
pageList : [ 10, 20, 30, 40, 50 ],//第一页显示记录个数列表
});
})
</script>
</head>
<body>
<div id="dg"></div>
</body>
</html>