程序博客网 > java transient 作用

【SSH项目实战】国税协同平台-4.用户管理需求分析&CRUD方法2

来源：互联网 发布：java transient 作用 编辑：程序博客网 时间：2024/05/08 23:08

回顾一下我们的列表部分界面:

然后我们开始写新增方法,原来的列表界面的HTML如下:
[html] view plaincopy
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  2. <html>  
  3. <head>  
  4.     <title>用户管理</title>  
  5.     <%@include file="/common/header.jsp" %>  
  6.     <script type="text/javascript">  
  7.         //全选、全反选  
  8.         function doSelectAll(){  
  9.             // jquery 1.6 前  
  10.             //$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked"));  
  11.             //prop jquery 1.6+建议使用  
  12.             $("input[name=selectedRow]").prop("checked", $("#selAll").is(":checked"));        
  13.         }  
  14.     </script>  
  15. </head>  
  16. <body class="rightBody">  
  17. <form name="form1" action="" method="post" enctype="multipart/form-data">  
  18.     <div class="p_d_1">  
  19.         <div class="p_d_1_1">  
  20.             <div class="content_info">  
  21.                 <div class="c_crumbs"><div><b></b><strong>用户管理</strong></div> </div>  
  22.                 <div class="search_art">  
  23.                     <li>  
  24.                         用户名：<s:textfield name="user.name" cssClass="s_text" id="userName"  cssStyle="width:160px;"/>  
  25.                     </li>  
  26.                     <li><input type="button" class="s_button" value="搜 索" onclick="doSearch()"/></li>  
  27.                     <li style="float:right;">  
  28.                         <input type="button" value="新增" class="s_button" onclick="doAdd()"/>   
  29.                         <input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/>   
  30.                         <input type="button" value="导出" class="s_button" onclick="doExportExcel()"/>   
  31.                         <input name="userExcel" type="file"/>  
  32.                         <input type="button" value="导入" class="s_button" onclick="doImportExcel()"/>   
  33.   
  34.   
  35.                     </li>  
  36.                 </div>  
  37.   
  38.   
  39.                 <div class="t_list" style="margin:0px; border:0px none;">  
  40.                     <table width="100%" border="0">  
  41.                         <tr class="t_tit">  
  42.                             <td width="30" align="center"><input type="checkbox" id="selAll" onclick="doSelectAll()" /></td>  
  43.                             <td width="140" align="center">用户名</td>  
  44.                             <td width="140" align="center">帐号</td>  
  45.                             <td width="160" align="center">所属部门</td>  
  46.                             <td width="80" align="center">性别</td>  
  47.                             <td align="center">电子邮箱</td>  
  48.                             <td width="100" align="center">操作</td>  
  49.                         </tr>  
  50.                           
  51.                             <tr bgcolor="f8f8f8">  
  52.                                 <td align="center"><input type="checkbox" name="selectedRow" value=""/></td>  
  53.                                 <td align="center">xxx</td>  
  54.                                 <td align="center"></td>  
  55.                                 <td align="center"></td>  
  56.                                 <td align="center"></td>  
  57.                                 <td align="center"></td>  
  58.                                 <td align="center">  
  59.                                     <a href="javascript:doEdit(id)">编辑</a>  
  60.                                     <a href="javascript:doDelete(id)">删除</a>  
  61.                                 </td>  
  62.                             </tr>  
  63.                           
  64.                     </table>  
  65.                 </div>  
  66.             </div>  
  67.         <div class="c_pate" style="margin-top: 5px;">  
  68.         <table width="100%" class="pageDown" border="0" cellspacing="0"  
  69.             cellpadding="0">  
  70.             <tr>  
  71.                 <td align="right">  
  72.                     总共1条记录，当前第 1 页，共 1 页     
  73.                             <a href="#">上一页</a>  <a href="#">下一页</a>  
  74.                     到 <input type="text" style="width: 30px;" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"  
  75.                     max="" value="1" />     
  76.                 </td>  
  77.             </tr>  
  78.         </table>    
  79.         </div>  
  80.         </div>  
  81.     </div>  
  82. </form>  
  83.   
  84.   
  85. </body>  
  86. </html>  

我们要在“新增”按钮上加js事件，让我们能够进入新增页面去添加新信息:
[javascript] view plaincopy
  1. //新增  
  2. function doAdd(){  
  3.     document.forms[0].action="${basePath}tax/user_addUI.action";  
  4.     document.forms[0].submit();  
  5. }  
然后我们点击“新增”就会跳转到新增页面:

新增页面代码:
[html] view plaincopy
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  2. <html>  
  3. <head>  
  4.     <%@include file="/common/header.jsp"%>  
  5.     <title>用户管理</title>  
  6.       
  7. </head>  
  8. <body class="rightBody">  
  9. <form id="form" name="form" action="${basePath}tax/user_add.action" method="post" enctype="multipart/form-data">  
  10.     <div class="p_d_1">  
  11.         <div class="p_d_1_1">  
  12.             <div class="content_info">  
  13.     <div class="c_crumbs"><div><b></b><strong>用户管理</strong> - 新增用户</div></div>  
  14.     <div class="tableH2">新增用户</div>  
  15.     <table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0"  >  
  16.         <tr>  
  17.             <td class="tdBg" width="200px">所属部门：</td>  
  18.             <td><s:select name="user.dept" list="#{'部门A':'部门A','部门B':'部门B'}"/></td>  
  19.         </tr>  
  20.         <tr>  
  21.             <td class="tdBg" width="200px">头像：</td>  
  22.             <td>  
  23.                 <input type="file" name="headImg"/>  
  24.             </td>  
  25.         </tr>  
  26.         <tr>  
  27.             <td class="tdBg" width="200px">用户名：</td>  
  28.             <td><s:textfield name="user.name"/> </td>  
  29.         </tr>  
  30.         <tr>  
  31.             <td class="tdBg" width="200px">帐号：</td>  
  32.             <td><s:textfield name="user.account"/></td>  
  33.         </tr>  
  34.         <tr>  
  35.             <td class="tdBg" width="200px">密码：</td>  
  36.             <td><s:textfield name="user.password"/></td>  
  37.         </tr>  
  38.         <tr>  
  39.             <td class="tdBg" width="200px">性别：</td>  
  40.             <td><s:radio list="#{'true':'男','false':'女'}" name="user.gender"/></td>  
  41.         </tr>  
  42.         <tr>  
  43.             <td class="tdBg" width="200px">角色：</td>  
  44.             <td></td>  
  45.         </tr>  
  46.         <tr>  
  47.             <td class="tdBg" width="200px">电子邮箱：</td>  
  48.             <td><s:textfield name="user.email"/></td>  
  49.         </tr>  
  50.         <tr>  
  51.             <td class="tdBg" width="200px">手机号：</td>  
  52.             <td><s:textfield name="user.mobile"/></td>  
  53.         </tr>  
  54.         <tr>  
  55.             <td class="tdBg" width="200px">生日：</td>  
  56.             <td><s:textfield id="birthday" name="user.birthday" /></td>  
  57.         </tr>  
  58.         <tr>  
  59.             <td class="tdBg" width="200px">状态：</td>  
  60.             <td><s:radio list="#{'1':'有效','0':'无效'}" name="user.state" value="1"/></td>  
  61.         </tr>  
  62.         <tr>  
  63.             <td class="tdBg" width="200px">备注：</td>  
  64.             <td><s:textarea name="user.memo" cols="75" rows="3"/></td>  
  65.         </tr>  
  66.     </table>  
  67.     <div class="tc mt20">  
  68.         <input type="submit" class="btnB2" value="保存" />  
  69.               
  70.         <input type="button"  onclick="javascript:history.go(-1)" class="btnB2" value="返回" />  
  71.     </div>  
  72.     </div></div></div>  
  73. </form>  
  74. </body>  
  75. </html>  

我们在user-struts.xml中添加list列表的重定向信息:
[html] view plaincopy
  1. <result name="list" type="redirectAction">  
  2.     <param name="actionName">user_listUI</param>  
  3. </result>  

然后把我们之前Action的所有reutrn listUI();改为 return "list";

然后我们来测试，输入一些信息之后，我们点击保存

发现成功跳转至列表系统(我们还没有取数据，所以列表还是空的)，但是我们进入数据库中查看，我们的信息已经存入:


接下来我们将Action中的userList取出，在列表中循环:
[html] view plaincopy
  1. <s:iterator value="userList" status="st">  
  2. <!-- 奇数行有背景色(odd是奇数行) -->  
  3.     <tr <s:if test="#st.odd">bgcolor="f8f8f8"</s:if>>  
  4.         <td align="center">  
  5.             <input type="checkbox" name="selectedRow" value="<s:property value='id'/>" />  
  6.         </td>  
  7.         <td align="center"><s:property value="name"/></td>  
  8.         <td align="center"><s:property value="account"/></td>  
  9.         <td align="center"><s:property value="dept"/></td>  
  10.         <td align="center"><s:property value="gender?'男':'女'"/></td>  
  11.         <td align="center"><s:property value="email"/></td>  
  12.         <td align="center">  
  13.                                     <a href="javascript:doEdit('<s:property value='id'/>')">编辑</a>  
  14.                                     <a href="#" onclick="return doDelete('<s:property value='id'/>')">删除</a>  
  15.         </td>  
  16.     </tr>  
  17. </s:iterator>  

这样再次添加一个我们就可以看到列表取出的值:

之后我们来做我们的编辑和删除:
可以看到，在HTML中我们的删除和编辑点击之后是要执行js方法的:
[javascript] view plaincopy
  1. <td align="center">  
  2.     <a href="javascript:doEdit('<s:property value='id'/>')">编辑</a>  
  3.     <a href="#" onclick="return doDelete('<s:property value='id'/>')">删除</a>  
  4. </td>  

所以我们的js方法写成:
[java] view plaincopy
  1. //删除  
  2. function doDelete(id){  
  3.     if(window.confirm("确认要删除此信息？"))  
  4.     {  
  5.         document.forms[0].action="${basePath}tax/user_delete.action?user.id="+id;  
  6.         document.forms[0].submit();  
  7.         return true;  
  8.     }else{  
  9.         return false;  
  10.     }  
  11. }  
  12.   
  13. //修改  
  14. function doEdit(id){  
  15.     document.forms[0].action="${basePath}tax/user_editUI.action?user.id="+id;  
  16.     document.forms[0].submit();  
  17. }  

然后我们的修改界面:
[html] view plaincopy
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  2. <html>  
  3. <head>  
  4.     <%@include file="/common/header.jsp"%>  
  5.     <title>用户管理</title>  
  6.       
  7. </head>  
  8. <body class="rightBody">  
  9. <form id="form" name="form" action="${basePath}tax/user_edit.action" method="post" enctype="multipart/form-data">  
  10.     <div class="p_d_1">  
  11.         <div class="p_d_1_1">  
  12.             <div class="content_info">  
  13.     <div class="c_crumbs"><div><b></b><strong>用户管理</strong> - 编辑用户</div></div>  
  14.     <div class="tableH2">编辑用户</div>  
  15.     <table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0"  >  
  16.         <tr>  
  17.             <td class="tdBg" width="200px">所属部门：</td>  
  18.             <td><s:select name="user.dept" list="#{'部门A':'部门A','部门B':'部门B'}"/></td>  
  19.         </tr>  
  20.         <tr>  
  21.             <td class="tdBg" width="200px">头像：</td>  
  22.             <td>  
  23.                   
  24.                     <img src="" width="100" height="100"/>  
  25.                   
  26.                 <input type="file" name="headImg"/>  
  27.             </td>  
  28.         </tr>  
  29.         <tr>  
  30.             <td class="tdBg" width="200px">用户名：</td>  
  31.             <td><s:textfield name="user.name"/> </td>  
  32.         </tr>  
  33.         <tr>  
  34.             <td class="tdBg" width="200px">帐号：</td>  
  35.             <td><s:textfield name="user.account"/></td>  
  36.         </tr>  
  37.         <tr>  
  38.             <td class="tdBg" width="200px">密码：</td>  
  39.             <td><s:textfield name="user.password"/></td>  
  40.         </tr>  
  41.         <tr>  
  42.             <td class="tdBg" width="200px">性别：</td>  
  43.             <td><s:radio list="#{'true':'男','false':'女'}" name="user.gender"/></td>  
  44.         </tr>  
  45.         <tr>  
  46.             <td class="tdBg" width="200px">角色：</td>  
  47.             <td></td>  
  48.         </tr>  
  49.         <tr>  
  50.             <td class="tdBg" width="200px">电子邮箱：</td>  
  51.             <td><s:textfield name="user.email"/></td>  
  52.         </tr>  
  53.         <tr>  
  54.             <td class="tdBg" width="200px">手机号：</td>  
  55.             <td><s:textfield name="user.mobile"/></td>  
  56.         </tr>          
  57.         <tr>  
  58.             <td class="tdBg" width="200px">生日：</td>  
  59.             <td><s:textfield id="birthday" name="user.birthday" /></td>  
  60.         </tr>  
  61.         <tr>  
  62.             <td class="tdBg" width="200px">状态：</td>  
  63.             <td><s:radio list="#{'1':'有效','0':'无效'}" name="user.state"/></td>  
  64.         </tr>  
  65.         <tr>  
  66.             <td class="tdBg" width="200px">备注：</td>  
  67.             <td><s:textarea name="user.memo" cols="75" rows="3"/></td>  
  68.         </tr>  
  69.     </table>  
  70.     <s:hidden name="user.id"/>  
  71.     <div class="tc mt20">  
  72.         <input type="submit" class="btnB2" value="保存" />  
  73.               
  74.         <input type="button"  onclick="javascript:history.go(-1)" class="btnB2" value="返回" />  
  75.     </div>  
  76.     </div></div></div>  
  77. </form>  
  78. </body>  
  79. </html>  

点击修改之后，弹出相应用户的信息，这里我们把李四改为李佳:



点击修改回到界面之后发现信息修改成功！

点击删除，将其中一个用户删除:

回头看列表，发现删除成功，李佳的信息已经不存在！


接下来我们完成批量删除的操作
我们在UserAction中加入“private String[] selectedRow; ”参数和get与set方法，用来接收从界面上选定的需要删除的信息的id的集合，之后修改批量删除方法:
[java] view plaincopy
  1. //批量删除  
  2. public String deleteSelected(){  
  3.     if(selectedRow!=null){  
  4.         for(String id:selectedRow){  
  5.             userService.delete(id);  
  6.         }  
  7.     }  
  8.     return "list";  
  9. }  

然后我们在jsp页面中可以看到删除按钮:
[html] view plaincopy
  1. <input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/>   

加入批量删除按钮的js方法:
[html] view plaincopy
  1. //批量删除:  
  2. function doDeleteAll(){  
  3.     document.form[0].action="${basePath}tax/user_deleteSelected.action";  
  4.     document.forms[0].submit();  
  5. }  

我们加一些测试数据来删除试试:

结果:

批量删除成功！

我们的增删改查方法基本全部完成。接下来解决一个小细节，就是当用户输入其日期的时候不能直接输入，要引入时间插件,下面我们就来引入它。

我们这里使用的是datepicker时间组件，我们把其相应的文件夹加入到工程的js文件夹下，在网页中引入它即可:


然后修改一下我们的时间选择这一块代码，让它选择的时候出现时间选择工具:
添加界面:
[html] view plaincopy
  1. <tr>  
  2.     <td class="tdBg" width="200px">生日：</td>  
  3.     <td><s:textfield id="birthday" name="user.birthday" onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'});"/></td>  
  4. </tr>  

修改界面:
[html] view plaincopy
  1. <tr>  
  2.     <td class="tdBg" width="200px">生日：</td>  
  3.     <td>  
  4.     <s:textfield id="birthday" name="user.birthday" readonly="true"   
  5.     onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'});" >  
  6.         <s:param name="value"><s:date name="user.birthday" format="yyyy-MM-dd"/></s:param>  
  7.     </s:textfield>  
  8.     </td>  
  9. </tr>  

效果

至此我们的用户需求管理的增删改查全部完成。

1 0
java transient 作用 java transient 作用
原创粉丝点击
热门IT博客
淘宝店铺怎么用专业版淘宝店铺怎么用专业版
淘宝远望数码淘宝远望数码
c语言中函数中参数
战地4数据不好看
巨人网络什么时候上市
易语言怎么编程
静态代理模式java
2.5次元测量仪编程步骤
学淘宝运营要多少钱
电脑小说阅读软件
淘宝售前客服话术
网络正在识别无法上网
双声道音乐软件
自动成语接龙软件
重庆网络教育学历报名
工资待遇好 软件开发
hive get json object
python.pdf
淘宝5元红包坑坏卖家
mobi格式软件ios
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 早安 英语 问早安 早安早安 如何说早安 早安语录正能量语句 早安寄语一句话 早安简短问候语 早安语录温馨短句 早安心语正能量图片 早安问候短信 早安的句子唯美句子吧 早安的英文单词 早安语正能量 早安心语正能量微商 问早安的句子 关于早安的句子 早安的问候语 周末早安问候语 一句话早安心语 早安经典语录 早安问候语大全 早安软文正能量 说早安的句子 问候早安的句子 美好的一天从清晨开始 早上的问候语 早晨心语 早晨问候语励志 zaoan 清晨问候语 狂妻来袭九爷早安免费阅读 每天说暖心的早安句子 早市 荷花镇的早市 小武基红木早市手串 早市图片 早市摆摊卖什么好 北京早市 易迅网早市 早市买菜 什么是早市

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里