項目 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>