您的位置:首页 > 其它

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

2015-12-07 19:31 1021 查看
回顾一下我们的列表部分界面:



然后我们开始写新增方法,原来的列表界面的HTML如下:

[html] view
plaincopy

<%@ 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事件,让我们能够进入新增页面去添加新信息:

[javascript] view
plaincopy

//新增

function doAdd(){

document.forms[0].action="${basePath}tax/user_addUI.action";

document.forms[0].submit();

}

然后我们点击“新增”就会跳转到新增页面:

新增页面代码:

[html] view
plaincopy

<%@ 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列表的重定向信息:

[html] view
plaincopy

<result name="list" type="redirectAction">

<param name="actionName">user_listUI</param>

</result>

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

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



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



接下来我们将Action中的userList取出,在列表中循环:

[html] view
plaincopy

<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方法的:

[javascript] view
plaincopy

<td align="center">

<a href="javascript:doEdit('<s:property value='id'/>')">编辑</a>

<a href="#" onclick="return doDelete('<s:property value='id'/>')">删除</a>

</td>

所以我们的js方法写成:

[java] view
plaincopy

//删除

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();

}

然后我们的修改界面:

[html] view
plaincopy

<%@ 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的集合,之后修改批量删除方法:

[java] view
plaincopy

//批量删除

public String deleteSelected(){

if(selectedRow!=null){

for(String id:selectedRow){

userService.delete(id);

}

}

return "list";

}

然后我们在jsp页面中可以看到删除按钮:

[html] view
plaincopy

<input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/>

加入批量删除按钮的js方法:

[html] view
plaincopy

//批量删除:

function doDeleteAll(){

document.form[0].action="${basePath}tax/user_deleteSelected.action";

document.forms[0].submit();

}

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



结果:



批量删除成功!

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

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



然后修改一下我们的时间选择这一块代码,让它选择的时候出现时间选择工具:

添加界面:

[html] view
plaincopy

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

修改界面:

[html] view
plaincopy

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

效果



至此我们的用户需求管理的增删改查全部完成。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: