easyui table 屬性頁面 及增 刪 改查按鈕 close按鈕
阿新 • • 發佈：2019-02-13
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var url;
function searchUser(){
$("#dg").datagrid('load',{
"userName":$("#s_userName").val()
});
}
function openUserAddDialog(){
$("#dlg").dialog("open").dialog("setTitle","新增使用者");
url="${pageContext.request.contextPath}/userController/saveUser.do"
}
function openUserModifyDialog(){ //修改和查詢對應一個table
var selectedRows=$("#dg").datagrid("getSelections");//返回的是一個集合陣列
if(selectedRows.length!=1){
$.messager.alert("系統提示","請選擇一條要編輯的資料！");
return;
}
var row=selectedRows[0];//獲取一條資料修改
$("#dlg").dialog("open").dialog("setTitle","編輯使用者資訊");
$("#fm").form("load",row);//載入所有欄位資訊
url="${pageContext.request.contextPath}/userController/saveUser.do?id="+row.id;
}
function saveUser(){
$("#fm").form("submit",{
url:url,
onSubmit:function(){
if($("#roleName").combobox("getValue")==""){
$.messager.alert("系統提示","請選擇使用者角色！");
return false;
}
return $(this).form("validate");
},
success:function(result){
var result=eval('('+result+')');
if(result.success){
$.messager.alert("系統提示","儲存成功！");
resetValue();
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系統提示","儲存失敗！");
return;
}
}
});
}
function resetValue(){
$("#userName").val("");
$("#password").val("");
$("#trueName").val("");
$("#email").val("");
$("#phone").val("");
$("#roleName").combobox("setValue","");
}
function closeUserDialog(){
$("#dlg").dialog("close");
resetValue();
}
function deleteUser(){
var selectedRows=$("#dg").datagrid("getSelections");
if(selectedRows.length==0){
$.messager.alert("系統提示","請選擇要刪除的資料！");
return;
}
var strIds=[];
for(var i=0;i<selectedRows.length;i++){
strIds.push(selectedRows[i].id);
}
var ids=strIds.join(",");
$.messager.confirm("系統提示","您確定要刪除這<font color=red>"+selectedRows.length+"</font>條資料嗎？",function(r){
if(r){
$.post("${pageContext.request.contextPath}/userController/deleteUser.do",{ids:ids},function(result){
if(result.success){
$.messager.alert("系統提示","資料已成功刪除！");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系統提示","資料刪除失敗，請聯絡系統管理員！");
}
},"json");
}
});
}
</script>
<title>Insert title here</title>
</head>
<body style="margin: 1px">
<!-- pagination="true" rownumbers="true" 設定就是分頁 設定他即可 -->
<table id="dg" title="使用者管理" class="easyui-datagrid"
fitColumns="true" pagination="true" rownumbers="true"
url="${pageContext.request.contextPath}/userController/list.do" fit="true" toolbar="#tb">
<thead>
<tr>
<th field="cb" checkbox="true" align="center"></th>
<th field="id" width="50" align="center">編號</th>
<th field="userName" width="50" align="center">使用者名稱</th>
<th field="password" width="50" align="center">密碼</th>
<th field="trueName" width="50" align="center">真實姓名</th>
<th field="email" width="50" align="center">郵件</th>
<th field="phone" width="50" align="center">聯絡電話</th>
<th field="roleName" width="50" align="center">角色</th>
</tr>
</thead>
</table>
<div id="tb">
<div>
<a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
<a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">刪除</a>
</div>
<div><!-- event.keyCode==13 是按了enter鍵 -->
使用者名稱： <input type="text" id="s_userName" size="20" onkeydown="if(event.keyCode==13) searchUser()"/>
<a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜尋</a>
</div>
</div>
<div id="dlg" class="easyui-dialog" style="width:620px;height:250px;padding: 10px 20px;"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table cellspacing="8px">
<tr>
<td>使用者名稱：</td>
<td><input type="text" id="userName" name="userName" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
<td> </td>
<td>密碼</td>
<td><input type="text" id="password" name="password" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
</tr>
<tr>
<td>真實姓名：</td>
<td><input type="text" id="trueName" name="trueName" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
<td> </td>
<td>郵箱：</td>
<td><input type="text" id="email" name="email" class="easyui-validatebox" validType="email" required="true"/> <font color="red">*</font></td>
</tr>
<tr>
<td>聯絡電話：</td>
<td><input type="text" id="phone" name="phone" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
<td> </td>
<td>使用者角色</td>
<td>
<select class="easyui-combobox" id="roleName" name="roleName" style="width: 154px" editable="false" panelHeight="auto">
<option value="">請選擇角色...</option>
<option value="系統管理員">系統管理員</option>
<option value="銷售主管">銷售主管</option>
<option value="客戶經理">客戶經理</option>
<option value="高管">高管</option>
</select>
<font color="red">*</font>
</td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">儲存</a>
<a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">關閉</a>
</div>
</body>
</html>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var url;
function searchUser(){
$("#dg").datagrid('load',{
"userName":$("#s_userName").val()
});
}
function openUserAddDialog(){
$("#dlg").dialog("open").dialog("setTitle","新增使用者");
url="${pageContext.request.contextPath}/userController/saveUser.do"
}
function openUserModifyDialog(){ //修改和查詢對應一個table
var selectedRows=$("#dg").datagrid("getSelections");//返回的是一個集合陣列
if(selectedRows.length!=1){
$.messager.alert("系統提示","請選擇一條要編輯的資料！");
return;
}
var row=selectedRows[0];//獲取一條資料修改
$("#dlg").dialog("open").dialog("setTitle","編輯使用者資訊");
$("#fm").form("load",row);//載入所有欄位資訊
url="${pageContext.request.contextPath}/userController/saveUser.do?id="+row.id;
}
function saveUser(){
$("#fm").form("submit",{
url:url,
onSubmit:function(){
if($("#roleName").combobox("getValue")==""){
$.messager.alert("系統提示","請選擇使用者角色！");
return false;
}
return $(this).form("validate");
},
success:function(result){
var result=eval('('+result+')');
if(result.success){
$.messager.alert("系統提示","儲存成功！");
resetValue();
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系統提示","儲存失敗！");
return;
}
}
});
}
function resetValue(){
$("#userName").val("");
$("#password").val("");
$("#trueName").val("");
$("#email").val("");
$("#phone").val("");
$("#roleName").combobox("setValue","");
}
function closeUserDialog(){
$("#dlg").dialog("close");
resetValue();
}
function deleteUser(){
var selectedRows=$("#dg").datagrid("getSelections");
if(selectedRows.length==0){
$.messager.alert("系統提示","請選擇要刪除的資料！");
return;
}
var strIds=[];
for(var i=0;i<selectedRows.length;i++){
strIds.push(selectedRows[i].id);
}
var ids=strIds.join(",");
$.messager.confirm("系統提示","您確定要刪除這<font color=red>"+selectedRows.length+"</font>條資料嗎？",function(r){
if(r){
$.post("${pageContext.request.contextPath}/userController/deleteUser.do",{ids:ids},function(result){
if(result.success){
$.messager.alert("系統提示","資料已成功刪除！");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系統提示","資料刪除失敗，請聯絡系統管理員！");
}
},"json");
}
});
}
</script>
<title>Insert title here</title>
</head>
<body style="margin: 1px">
<!-- pagination="true" rownumbers="true" 設定就是分頁 設定他即可 -->
<table id="dg" title="使用者管理" class="easyui-datagrid"
fitColumns="true" pagination="true" rownumbers="true"
url="${pageContext.request.contextPath}/userController/list.do" fit="true" toolbar="#tb">
<thead>
<tr>
<th field="cb" checkbox="true" align="center"></th>
<th field="id" width="50" align="center">編號</th>
<th field="userName" width="50" align="center">使用者名稱</th>
<th field="password" width="50" align="center">密碼</th>
<th field="trueName" width="50" align="center">真實姓名</th>
<th field="email" width="50" align="center">郵件</th>
<th field="phone" width="50" align="center">聯絡電話</th>
<th field="roleName" width="50" align="center">角色</th>
</tr>
</thead>
</table>
<div id="tb">
<div>
<a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
<a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">刪除</a>
</div>
<div><!-- event.keyCode==13 是按了enter鍵 -->
使用者名稱： <input type="text" id="s_userName" size="20" onkeydown="if(event.keyCode==13) searchUser()"/>
<a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜尋</a>
</div>
</div>
<div id="dlg" class="easyui-dialog" style="width:620px;height:250px;padding: 10px 20px;"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table cellspacing="8px">
<tr>
<td>使用者名稱：</td>
<td><input type="text" id="userName" name="userName" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
<td> </td>
<td>密碼</td>
<td><input type="text" id="password" name="password" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
</tr>
<tr>
<td>真實姓名：</td>
<td><input type="text" id="trueName" name="trueName" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
<td> </td>
<td>郵箱：</td>
<td><input type="text" id="email" name="email" class="easyui-validatebox" validType="email" required="true"/> <font color="red">*</font></td>
</tr>
<tr>
<td>聯絡電話：</td>
<td><input type="text" id="phone" name="phone" class="easyui-validatebox" required="true"/> <font color="red">*</font></td>
<td> </td>
<td>使用者角色</td>
<td>
<select class="easyui-combobox" id="roleName" name="roleName" style="width: 154px" editable="false" panelHeight="auto">
<option value="">請選擇角色...</option>
<option value="系統管理員">系統管理員</option>
<option value="銷售主管">銷售主管</option>
<option value="客戶經理">客戶經理</option>
<option value="高管">高管</option>
</select>
<font color="red">*</font>
</td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">儲存</a>
<a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">關閉</a>
</div>
</body>
</html>