【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>

效果