1、listUI.jsp
计算
安全
数据库
网络和加速
企业服务
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<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"));
}
//新增
function doAdd(){ /* ## */
document.forms[0].action = "${basePath}/tax/user_addUI.action";
document.forms[0].submit();
}
//编辑
function doEdit(id){
document.forms[0].action = "${basePath}/tax/user_editUI.action?user.id="+id;
document.forms[0].submit();
}
//删除
function doDelete(id){
document.forms[0].action = "${basePath}/tax/user_delete.action?user.id="+id;
document.forms[0].submit();
}
//批量删除
function doDeleteAll(){
document.forms[0].action = "${basePath}/tax/user_deleteSelected.action";
document.forms[0].submit();
}
</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 >
<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" >
<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>
<s:iterator value="userList" status="st"><!-- ## -->
<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:if test="gender">男</s:if><s:else>女</s:else> </td>
<td align="center"> <s:property value="email"/> </td>
<td align="center">
<a href="javascript:doEdit('<s:property value="id"/>')">编辑</a>
<a href="javascript:doDelete('<s:property value="id"/>')">删除</a>
</td>
</tr>
</s:iterator>
</table>
</div>
</div>
<div class="c_pate" >
<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" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"
max="" value="1" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>知识点（1）包含静态文件
<%@include file="/common/header.jsp" %>WebRoot/commons/header.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
pageContext.setAttribute("basePath", request.getContextPath());
%>
<script type="text/javascript" src="${basePath}/js/jquery/jquery-1.12.3.js"></script>
<link href="${basePath}/css/skin1.css" rel="stylesheet" type="text/css"/>知识点（2）选中同名的所有checkbox 或者 全不选
//全选、全反选
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"));
}知识点（3）Javascript设置form的action 并 提交
//新增
function doAdd(){
document.forms[0].action = "${basePath}/tax/user_addUI.action";
document.forms[0].submit();
}知识点（4）<s:iterator>标签
<s:iterator value="userList" status="st">
<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>
</tr>
</s:iterator>知识点（5）<s:if>
table行的背景色
<s:if test="#st.odd">bgcolor="f8f8f8"</s:if>性别的判断
<s:if test="gender">男</s:if><s:else>女</s:else>知识点（6）Javascript的函数接受字符串的时，要注意单引号
如下面的doEdit和doDelete
<a href="javascript:doEdit('<s:property value="id"/>')">编辑</a>
<a href="javascript:doDelete('<s:property value="id"/>')">删除</a>2、addUI.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%@include file="/common/header.jsp"%>
<title>用户管理</title>
<script type="text/javascript" src="${basePath}/js/datepicker/WdatePicker.js"></script>
</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" readonly="true"
onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'})"/>
</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>知识点（1）<s:select>的填充
<s:select name="user.dept" list="#{'部门A':'部门A','部门B':'部门B' }"/>知识点（2）<s:radio>
男女
<s:radio list="#{'true':'男','false':'女'}" name="user.gender"/>有效、无效
<s:radio list="#{'1':'有效','0':'无效'}" name="user.state" value="1"/>知识点（3） 返回按钮
<input type="button" onclick="javascript:history.go(-1)" class="btnB2" value="返回" />3、editUI.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%@include file="/common/header.jsp"%>
<title>用户管理</title>
<script type="text/javascript" src="${basePath}/js/datepicker/WdatePicker.js"></script>
</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" 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>
<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>知识点：日期组件wdatepicker（见附件）
（1）导入WdataPicker文件夹到项目的js文件夹下；
（2）在JSP页面引入日期组件：
<script type="text/javascript" src="${basePath}/js/datepicker/WdatePicker.js"></script>（3）用法
<s:textfield id="birthday" name="user.birthday" readonly="true"
onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'})"/>回显时，注意设置好显示格式；可以如下设置：
<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>亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
