【SSH專案實戰】國稅協同平臺-4.使用者管理需求分析&CRUD方法2
回顧一下我們的列表部分介面:
然後我們開始寫新增方法,原來的列表介面的HTML如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>使用者管理</title> <%@include file="/common/header.jsp" %> <script type="text/javascript"> //全選、全反選 function doSelectAll(){ // jquery 1.6 前 //$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked")); //prop jquery 1.6+建議使用 $("input[name=selectedRow]").prop("checked", $("#selAll").is(":checked")); } </script> </head> <body class="rightBody"> <form name="form1" action="" method="post" enctype="multipart/form-data"> <div class="p_d_1"> <div class="p_d_1_1"> <div class="content_info"> <div class="c_crumbs"><div><b></b><strong>使用者管理</strong></div> </div> <div class="search_art"> <li> 使用者名稱：<s:textfield name="user.name" cssClass="s_text" id="userName" cssStyle="width:160px;"/> </li> <li><input type="button" class="s_button" value="搜 索" onclick="doSearch()"/></li> <li style="float:right;"> <input type="button" value="新增" class="s_button" onclick="doAdd()"/> <input type="button" value="刪除" class="s_button" onclick="doDeleteAll()"/> <input type="button" value="匯出" class="s_button" onclick="doExportExcel()"/> <input name="userExcel" type="file"/> <input type="button" value="匯入" class="s_button" onclick="doImportExcel()"/> </li> </div> <div class="t_list" style="margin:0px; border:0px none;"> <table width="100%" border="0"> <tr class="t_tit"> <td width="30" align="center"><input type="checkbox" id="selAll" onclick="doSelectAll()" /></td> <td width="140" align="center">使用者名稱</td> <td width="140" align="center">帳號</td> <td width="160" align="center">所屬部門</td> <td width="80" align="center">性別</td> <td align="center">電子郵箱</td> <td width="100" align="center">操作</td> </tr> <tr bgcolor="f8f8f8"> <td align="center"><input type="checkbox" name="selectedRow" value=""/></td> <td align="center">xxx</td> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"> <a href="javascript:doEdit(id)">編輯</a> <a href="javascript:doDelete(id)">刪除</a> </td> </tr> </table> </div> </div> <div class="c_pate" style="margin-top: 5px;"> <table width="100%" class="pageDown" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="right"> 總共1條記錄，當前第 1 頁，共 1 頁 <a href="#">上一頁</a> <a href="#">下一頁</a> 到 <input type="text" style="width: 30px;" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1" max="" value="1" /> </td> </tr> </table> </div> </div> </div> </form> </body> </html>
我們要在“新增”按鈕上加js事件，讓我們能夠進入新增頁面去新增新資訊:
//新增
function doAdd(){
document.forms[0].action="${basePath}tax/user_addUI.action";
document.forms[0].submit();
}新增頁面程式碼:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <%@include file="/common/header.jsp"%> <title>使用者管理</title> </head> <body class="rightBody"> <form id="form" name="form" action="${basePath}tax/user_add.action" method="post" enctype="multipart/form-data"> <div class="p_d_1"> <div class="p_d_1_1"> <div class="content_info"> <div class="c_crumbs"><div><b></b><strong>使用者管理</strong> - 新增使用者</div></div> <div class="tableH2">新增使用者</div> <table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0" > <tr> <td class="tdBg" width="200px">所屬部門：</td> <td><s:select name="user.dept" list="#{'部門A':'部門A','部門B':'部門B'}"/></td> </tr> <tr> <td class="tdBg" width="200px">頭像：</td> <td> <input type="file" name="headImg"/> </td> </tr> <tr> <td class="tdBg" width="200px">使用者名稱：</td> <td><s:textfield name="user.name"/> </td> </tr> <tr> <td class="tdBg" width="200px">帳號：</td> <td><s:textfield name="user.account"/></td> </tr> <tr> <td class="tdBg" width="200px">密碼：</td> <td><s:textfield name="user.password"/></td> </tr> <tr> <td class="tdBg" width="200px">性別：</td> <td><s:radio list="#{'true':'男','false':'女'}" name="user.gender"/></td> </tr> <tr> <td class="tdBg" width="200px">角色：</td> <td></td> </tr> <tr> <td class="tdBg" width="200px">電子郵箱：</td> <td><s:textfield name="user.email"/></td> </tr> <tr> <td class="tdBg" width="200px">手機號：</td> <td><s:textfield name="user.mobile"/></td> </tr> <tr> <td class="tdBg" width="200px">生日：</td> <td><s:textfield id="birthday" name="user.birthday" /></td> </tr> <tr> <td class="tdBg" width="200px">狀態：</td> <td><s:radio list="#{'1':'有效','0':'無效'}" name="user.state" value="1"/></td> </tr> <tr> <td class="tdBg" width="200px">備註：</td> <td><s:textarea name="user.memo" cols="75" rows="3"/></td> </tr> </table> <div class="tc mt20"> <input type="submit" class="btnB2" value="儲存" /> <input type="button" onclick="javascript:history.go(-1)" class="btnB2" value="返回" /> </div> </div></div></div> </form> </body> </html>
我們在user-struts.xml中新增list列表的重定向資訊:
<result name="list" type="redirectAction">
<param name="actionName">user_listUI</param>
</result>然後把我們之前Action的所有reutrn listUI();改為 return "list";
然後我們來測試，輸入一些資訊之後，我們點選儲存
發現成功跳轉至列表系統(我們還沒有取資料，所以列表還是空的)，但是我們進入資料庫中檢視，我們的資訊已經存入:
接下來我們將Action中的userList取出，在列表中迴圈:
<s:iterator value="userList" status="st"> <!-- 奇數行有背景色(odd是奇數行) --> <tr <s:if test="#st.odd">bgcolor="f8f8f8"</s:if>> <td align="center"> <input type="checkbox" name="selectedRow" value="<s:property value='id'/>" /> </td> <td align="center"><s:property value="name"/></td> <td align="center"><s:property value="account"/></td> <td align="center"><s:property value="dept"/></td> <td align="center"><s:property value="gender?'男':'女'"/></td> <td align="center"><s:property value="email"/></td> <td align="center"> <a href="javascript:doEdit('<s:property value='id'/>')">編輯</a> <a href="#" onclick="return doDelete('<s:property value='id'/>')">刪除</a> </td> </tr> </s:iterator>
這樣再次新增一個我們就可以看到列表取出的值:
之後我們來做我們的編輯和刪除:
可以看到，在HTML中我們的刪除和編輯點選之後是要執行js方法的:
<td align="center">
<a href="javascript:doEdit('<s:property value='id'/>')">編輯</a>
<a href="#" onclick="return doDelete('<s:property value='id'/>')">刪除</a>
</td>所以我們的js方法寫成:
//刪除
function doDelete(id){
if(window.confirm("確認要刪除此資訊？"))
{
document.forms[0].action="${basePath}tax/user_delete.action?user.id="+id;
document.forms[0].submit();
return true;
}else{
return false;
}
}
//修改
function doEdit(id){
document.forms[0].action="${basePath}tax/user_editUI.action?user.id="+id;
document.forms[0].submit();
}
然後我們的修改介面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%@include file="/common/header.jsp"%>
<title>使用者管理</title>
</head>
<body class="rightBody">
<form id="form" name="form" action="${basePath}tax/user_edit.action" method="post" enctype="multipart/form-data">
<div class="p_d_1">
<div class="p_d_1_1">
<div class="content_info">
<div class="c_crumbs"><div><b></b><strong>使用者管理</strong> - 編輯使用者</div></div>
<div class="tableH2">編輯使用者</div>
<table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="tdBg" width="200px">所屬部門：</td>
<td><s:select name="user.dept" list="#{'部門A':'部門A','部門B':'部門B'}"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">頭像：</td>
<td>
<img src="" width="100" height="100"/>
<input type="file" name="headImg"/>
</td>
</tr>
<tr>
<td class="tdBg" width="200px">使用者名稱：</td>
<td><s:textfield name="user.name"/> </td>
</tr>
<tr>
<td class="tdBg" width="200px">帳號：</td>
<td><s:textfield name="user.account"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">密碼：</td>
<td><s:textfield name="user.password"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">性別：</td>
<td><s:radio list="#{'true':'男','false':'女'}" name="user.gender"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">角色：</td>
<td></td>
</tr>
<tr>
<td class="tdBg" width="200px">電子郵箱：</td>
<td><s:textfield name="user.email"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">手機號：</td>
<td><s:textfield name="user.mobile"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">生日：</td>
<td><s:textfield id="birthday" name="user.birthday" /></td>
</tr>
<tr>
<td class="tdBg" width="200px">狀態：</td>
<td><s:radio list="#{'1':'有效','0':'無效'}" name="user.state"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">備註：</td>
<td><s:textarea name="user.memo" cols="75" rows="3"/></td>
</tr>
</table>
<s:hidden name="user.id"/>
<div class="tc mt20">
<input type="submit" class="btnB2" value="儲存" />
<input type="button" onclick="javascript:history.go(-1)" class="btnB2" value="返回" />
</div>
</div></div></div>
</form>
</body>
</html>
點選修改之後，彈出相應使用者的資訊，這裡我們把李四改為李佳:
點選修改回到介面之後發現資訊修改成功！
點選刪除，將其中一個使用者刪除:
回頭看列表，發現刪除成功，李佳的資訊已經不存在！
接下來我們完成批量刪除的操作
我們在UserAction中加入“private String[] selectedRow; ”引數和get與set方法，用來接收從介面上選定的需要刪除的資訊的id的集合，之後修改批量刪除方法:
//批量刪除
public String deleteSelected(){
if(selectedRow!=null){
for(String id:selectedRow){
userService.delete(id);
}
}
return "list";
}
然後我們在jsp頁面中可以看到刪除按鈕:
<input type="button" value="刪除" class="s_button" onclick="doDeleteAll()"/> 加入批量刪除按鈕的js方法:
//批量刪除:
function doDeleteAll(){
document.form[0].action="${basePath}tax/user_deleteSelected.action";
document.forms[0].submit();
}
我們加一些測試資料來刪除試試:
結果:
批量刪除成功！
我們的增刪改查方法基本全部完成。接下來解決一個小細節，就是當用戶輸入其日期的時候不能直接輸入，要引入時間外掛,下面我們就來引入它。
我們這裡使用的是datepicker時間元件，我們把其相應的資料夾加入到工程的js資料夾下，在網頁中引入它即可:
然後修改一下我們的時間選擇這一塊程式碼，讓它選擇的時候出現時間選擇工具:
新增介面:
<tr>
<td class="tdBg" width="200px">生日：</td>
<td><s:textfield id="birthday" name="user.birthday" onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'});"/></td>
</tr>修改介面:
<tr>
<td class="tdBg" width="200px">生日：</td>
<td>
<s:textfield id="birthday" name="user.birthday" readonly="true"
onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'});" >
<s:param name="value"><s:date name="user.birthday" format="yyyy-MM-dd"/></s:param>
</s:textfield>
</td>
</tr>效果
至此我們的使用者需求管理的增刪改查全部完成。
相關推薦
【SSH專案實戰】國稅協同平臺-4.使用者管理需求分析&CRUD方法2
下面我們繼續來完成我們的使用者管理模組 回顧一下我們的列表部分介面: 然後我們開始寫新增方法,原來的列表介面的HTML如下:<%@ page contentType="text/html;charset=UTF-8" language="java" %> <
【SSH專案實戰】國稅協同平臺-34.quartz&CronTrigger
我們上次使用quartz任務排程框架建立了一個在後臺按照時間間隔不停執行的任務，我們使用的是simpleTrigger簡單觸發器，為了實現我們的月末自動回覆的功能，我們要設定觸發器能夠在某個精確時間去自動執行任務，那麼使用simpleTrigger簡單觸發器就遠遠不夠了，我
【java專案實戰】Servlet詳解以及Servlet編寫登陸頁面（二）
Servlet是Sun公司提供的一門用於開發動態web網頁的技術。Sun公司在API中提供了一個servlet介面，我們如果想使用java程式開發一個動態的web網頁，只需要實現servelet介面，並把類部署到web伺服器上就可以運行了。 到底什麼是Ser
【java專案實戰】一步步教你使用MyEclipse搭建java Web專案開發環境（一）
首先，在開始搭建MyEclipse的開發環境之前，還有三步工具的安裝需要完成，只要在安裝配置成功之後才可以進入下面的java Web專案開發環境的搭建。 1、安裝工具 第一步，下載並
【C#專案實戰】學生社團資訊管理系統（MVC三層架構）
程式碼很多，就不再此貼出。 本來打算寫教程的，無奈沒有時間。 參考帖子:【C#】簡單三層架構(MVC)實現學生資訊管理 有視訊教程，完整程式碼，建議初學者先看這篇。 學生社團資訊管理系統功能介紹: 1.實現了對資料庫的增刪查改 2.影象資訊儲存在資料庫，支援修改。 3
【Java專案實戰】Oracle之口令管理
Oracle在安裝時沒有進入“口令管理”而直接按確定關閉了，怎麼辦？這篇文章我們就來解決一下這個問題。 首先啟動sqlplus 在開啟的對話方塊中輸入使用者名稱sqlplus/as
【Java專案實戰】MyEclipse10破解方法
MyEclipse要過期了，上網搜了一些方法，有的方法根本不行，現在整理一下，把整個破解過程梳理一下。 這是我們下載的破解軟體目錄，有人說執行run.bat會出現閃退。錯了不是要執行
【java專案實戰】ThreadLocal封裝Connection，實現同一執行緒共享資源
執行緒安全一直是程式猿們關注的焦點，多執行緒也一直是比較讓人頭疼的話題，想必大家曾經也遇到過各種各種的問題，我就不再累述了。當然，解決方式也有很多，這篇博文給大家提供一種很好的解決執行緒
【容災實戰】多雲平臺混合部署的雙活容災網站系統
摘要 隨著雲端計算和網際網路技術的發展，越來越多的企業接受將自身的IT系統放在公有云上，以節省企業的成本和提升運維效率。目前主流的雲端計算提供商有亞馬遜雲、微軟雲、阿里雲、騰訊雲、華為雲、金山雲等等。對於中大型企業，考慮到成本、資料安全、雲產品質量和售後服務等多因素考慮，通
【C++併發實戰】（二）執行緒管理
前一篇沒用markdown編輯器感覺不好看，刪了重新發 本篇主要講述執行緒的管理，主要包括建立和使用執行緒 啟動執行緒 執行緒出現是為了執行任務，執行緒建立時會給一個入口函式，當這個函式返回時，該執行緒就會退出，最常見的main()函式就是主執行緒的入口函式，在main()函式返回時主執行緒就結束了。 如
【struts2+hibernate+spring專案實戰】Jfreechart工具使用（ssh專案實戰）
一、圖形報表jfreechart 將解壓的資源包拷貝出來，放置到無中文的目錄中，使用下列指令執行 java -jar jfreechart-1.0.13-demo.jar 注意：不能只拷貝該檔案，必須將相關的資源全部拷貝出去 開啟演示程式，檢視內容
【struts2+hibernate+spring專案實戰】實現使用者登入功能（ssh）
一、概述 從今天才開始有時間來總結總結以前自己練習的一些東西，希望總結出來對以後可以更加便捷的來學習，也希望可以幫助到正需要這些東西的同行人，一起學習，共同進步。 二、 登入功能總結 2.1、登入功能概述 這個技術主要是運用Struts2+hib
【推薦系統實戰】：C++實現基於用戶的協同過濾（UserCollaborativeFilter）
color style popu ted std 相似度 abi ear result 好早的時候就打算寫這篇文章，可是還是參加阿裏大數據競賽的第一季三月份的時候實驗就完畢了。硬生生是拖到了十一假期。自己也是醉了。。。找工作不是非常順利，希望寫點東西回想一下知識。然後再
【專案實戰】 使用者模組 驗證碼程式
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
【專案實戰】：python：MongoDB資料庫的操作及練習
python：MongoDB資料庫的操作及練習 import pymongo class MongodbConn(object): def __init__(self): self.CONN = pymongo.MongoClient("mongodb:/
[嵌入式Linux專案實戰開發]基於QT4.7.4的音樂播放器實現與設計【2018年給力專案】
[嵌入式Linux專案實戰開發]基於QT4.7.4的音樂播放器實現與設計【2018年給力專案】是【創科之龍】團隊aiku嵌入式視訊教程系列製作的現有的音樂播放器。 主要功能實現： 1.新建工程，基類選擇Qwidget。雙擊開啟介面檔案，在介面檔案中建立label顯示時間、若干個tool
【專案實戰】：python：寫檔案個性化設定模組Python_Xlwt練習
python：寫檔案個性化設定模組Python_Xlwt練習 # -*- coding: utf-8 -*- """ Created on Sun Aug 5 22:52:22 2018 @author: A3 """ # ================
【專案實戰】：Python ：視訊網站資料清洗整理和結論研究
視訊網站資料清洗整理和結論研究 要求： 1、資料清洗 - 去除空值 要求：建立函式 提示：fillna方法填充缺失資料，注意inplace引數 2、資料清洗 - 時間標籤轉化 要求： ① 將時間欄
【專案實戰】 使用者模組 驗證碼程式
伴著元旦的腳步，小編的專案跟隨著冬的腳步，馬不停蹄，小夥伴們都有這樣的經驗，在註冊某個頁面的時候，或者輸入了好幾次密碼，但是都沒有輸對的時候，這個時候，需要輸入驗證碼，那時年少，覺得，註冊個網頁為什麼還要輸入驗證碼呢，不是多此一舉嘛，然後隨著學習和專案實戰的深入，逐漸認識到，驗證碼有著不可估量的作用。首先，小
【專案實戰】---使用ajax完成使用者名稱是否存在非同步校驗
package cn.itcast.shop.user.action;import java.io.IOException;import javax.servlet.http.HttpServletResponse;import org.apache.struts2.ServletActionContext;