回顾一下我们的列表部分界面:
然后我们开始写新增方法,原来的列表界面的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="#" οnclick="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>
效果
至此我们的用户需求管理的增删改查全部完成。