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>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
