SSH系列：（9）用户管理-JSP页面
1、listUI.jsp
<%@pagecontentType="text/html;charset=UTF-8"language="java"%><%@taglibprefix="s"uri="/struts-tags"%><html><head><title>用户管理</title><%@includefile="/common/header.jsp"%><scripttype="text/javascript">//全选、全反选functiondoSelectAll(){//jquery1.6前//$("input[name=selectedRow]").attr("checked",$("#selAll").is(":checked"));//propjquery1.6+建议使用$("input[name=selectedRow]").prop("checked",$("#selAll").is(":checked"));}//新增functiondoAdd(){/*##*/document.forms[0].action="${basePath}/tax/user_addUI.action";document.forms[0].submit();}//编辑functiondoEdit(id){document.forms[0].action="${basePath}/tax/user_editUI.action?user.id="+id;document.forms[0].submit();}//删除functiondoDelete(id){document.forms[0].action="${basePath}/tax/user_delete.action?user.id="+id;document.forms[0].submit();}//批量删除functiondoDeleteAll(){document.forms[0].action="${basePath}/tax/user_deleteSelected.action";document.forms[0].submit();}</script></head><bodyclass="rightBody"><formname="form1"action=""method="post"enctype="multipart/form-data"><divclass="p_d_1"><divclass="p_d_1_1"><divclass="content_info"><divclass="c_crumbs"><div><b></b><strong>用户管理</strong></div></div><divclass="search_art"><li>用户名：<s:textfieldname="user.name"cssClass="s_text"id="userName"cssStyle="width:160px;"/></li><li><inputtype="button"class="s_button"value="搜索"onclick="doSearch()"/></li><li><inputtype="button"value="新增"class="s_button"onclick="doAdd()"/> <inputtype="button"value="删除"class="s_button"onclick="doDeleteAll()"/> <inputtype="button"value="导出"class="s_button"onclick="doExportExcel()"/> <inputname="userExcel"type="file"/><inputtype="button"value="导入"class="s_button"onclick="doImportExcel()"/> </li></div><divclass="t_list"><tablewidth="100%"border="0"><trclass="t_tit"><tdwidth="30"align="center"><inputtype="checkbox"id="selAll"onclick="doSelectAll()"/></td><tdwidth="140"align="center">用户名</td><tdwidth="140"align="center">帐号</td><tdwidth="160"align="center">所属部门</td><tdwidth="80"align="center">性别</td><tdalign="center">电子邮箱</td><tdwidth="100"align="center">操作</td></tr><s:iteratorvalue="userList"status="st"><!--##--><tr<s:iftest="#st.odd">bgcolor="f8f8f8"</s:if>><tdalign="center"><inputtype="checkbox"name="selectedRow"value='<s:propertyvalue="id"/>'/></td><tdalign="center"><s:propertyvalue="name"/></td><tdalign="center"><s:propertyvalue="account"/></td><tdalign="center"><s:propertyvalue="dept"/></td><tdalign="center"><s:iftest="gender">男</s:if><s:else>女</s:else></td><tdalign="center"><s:propertyvalue="email"/></td><tdalign="center"><ahref="javascript:doEdit('<s:propertyvalue="id"/>')">编辑</a><ahref="javascript:doDelete('<s:propertyvalue="id"/>')">删除</a></td></tr></s:iterator></table></div></div><divclass="c_pate"><tablewidth="100%"class="pageDown"border="0"cellspacing="0"cellpadding="0"><tr><tdalign="right">总共1条记录，当前第1页，共1页 <ahref="#">上一页</a> <ahref="#">下一页</a>到 <inputtype="text"onkeypress="if(event.keyCode==13){doGoPage(this.value);}"min="1"max=""value="1"/> </td></tr></table></div></div></div></form></body></html>
知识点（1）包含静态文件
<%@includefile="/common/header.jsp"%>
WebRoot/commons/header.jsp
<%@pagelanguage="java"pageEncoding="UTF-8"%><%@tagliburi="/struts-tags"prefix="s"%><%pageContext.setAttribute("basePath",request.getContextPath());%><scripttype="text/javascript"src="${basePath}/js/jquery/jquery-1.12.3.js"></script><linkhref="${basePath}/css/skin1.css"rel="stylesheet"type="text/css"/>
知识点（2）选中同名的所有checkbox 或者 全不选
//全选、全反选functiondoSelectAll(){//jquery1.6前//$("input[name=selectedRow]").attr("checked",$("#selAll").is(":checked"));//propjquery1.6+建议使用$("input[name=selectedRow]").prop("checked",$("#selAll").is(":checked"));}
知识点（3）Javascript设置form的action 并 提交
//新增functiondoAdd(){document.forms[0].action="${basePath}/tax/user_addUI.action";document.forms[0].submit();}
知识点（4）<s:iterator>标签
<s:iteratorvalue="userList"status="st"><tr<s:iftest="#st.odd">bgcolor="f8f8f8"</s:if>><tdalign="center"><inputtype="checkbox"name="selectedRow"value='<s:propertyvalue="id"/>'/></td><tdalign="center"><s:propertyvalue="name"/></td></tr></s:iterator>
知识点（5）<s:if>
table行的背景色
<s:iftest="#st.odd">bgcolor="f8f8f8"</s:if>
性别的判断
<s:iftest="gender">男</s:if><s:else>女</s:else>
知识点（6）Javascript的函数接受字符串的时，要注意单引号
如下面的doEdit和doDelete
<ahref="javascript:doEdit('<s:propertyvalue="id"/>')">编辑</a><ahref="javascript:doDelete('<s:propertyvalue="id"/>')">删除</a>
2、addUI.jsp
<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><%@includefile="/common/header.jsp"%><title>用户管理</title><scripttype="text/javascript"src="${basePath}/js/datepicker/WdatePicker.js"></script></head><bodyclass="rightBody"><formid="form"name="form"action="${basePath}/tax/user_add.action"method="post"enctype="multipart/form-data"><!--##--><divclass="p_d_1"><divclass="p_d_1_1"><divclass="content_info"><divclass="c_crumbs"><div><b></b><strong>用户管理</strong> - 新增用户</div></div><divclass="tableH2">新增用户</div><tableid="baseInfo"width="100%"align="center"class="list"border="0"cellpadding="0"cellspacing="0"><tr><tdclass="tdBg"width="200px">所属部门：</td><td><s:selectname="user.dept"list="#{'部门A':'部门A','部门B':'部门B'}"/></td><!--##--></tr><tr><tdclass="tdBg"width="200px">头像：</td><td><inputtype="file"name="headImg"/></td></tr><tr><tdclass="tdBg"width="200px">用户名：</td><td><s:textfieldname="user.name"/></td></tr><tr><tdclass="tdBg"width="200px">帐号：</td><td><s:textfieldname="user.account"/></td></tr><tr><tdclass="tdBg"width="200px">密码：</td><td><s:textfieldname="user.password"/></td></tr><tr><tdclass="tdBg"width="200px">性别：</td><td><s:radiolist="#{'true':'男','false':'女'}"name="user.gender"/></td></tr><tr><tdclass="tdBg"width="200px">角色：</td><td></td></tr><tr><tdclass="tdBg"width="200px">电子邮箱：</td><td><s:textfieldname="user.email"/></td></tr><tr><tdclass="tdBg"width="200px">手机号：</td><td><s:textfieldname="user.mobile"/></td></tr><tr><tdclass="tdBg"width="200px">生日：</td><td><s:textfieldid="birthday"name="user.birthday"readonly="true"onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'})"/></td></tr><tr><tdclass="tdBg"width="200px">状态：</td><td><s:radiolist="#{'1':'有效','0':'无效'}"name="user.state"value="1"/></td></tr><tr><tdclass="tdBg"width="200px">备注：</td><td><s:textareaname="user.memo"cols="75"rows="3"/></td></tr></table><divclass="tcmt20"><inputtype="submit"class="btnB2"value="保存"/> <inputtype="button"onclick="javascript:history.go(-1)"class="btnB2"value="返回"/><!--##--></div></div></div></div></form></body></html>
知识点（1）<s:select>的填充
<s:selectname="user.dept"list="#{'部门A':'部门A','部门B':'部门B'}"/>
知识点（2）<s:radio>
男女
<s:radiolist="#{'true':'男','false':'女'}"name="user.gender"/>
有效、无效
<s:radiolist="#{'1':'有效','0':'无效'}"name="user.state"value="1"/>
知识点（3） 返回按钮
<inputtype="button"onclick="javascript:history.go(-1)"class="btnB2"value="返回"/>
3、editUI.jsp
<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><%@includefile="/common/header.jsp"%><title>用户管理</title><scripttype="text/javascript"src="${basePath}/js/datepicker/WdatePicker.js"></script></head><bodyclass="rightBody"><formid="form"name="form"action="${basePath}/tax/user_edit.action"method="post"enctype="multipart/form-data"><!--##--><divclass="p_d_1"><divclass="p_d_1_1"><divclass="content_info"><divclass="c_crumbs"><div><b></b><strong>用户管理</strong> - 编辑用户</div></div><divclass="tableH2">编辑用户</div><tableid="baseInfo"width="100%"align="center"class="list"border="0"cellpadding="0"cellspacing="0"><tr><tdclass="tdBg"width="200px">所属部门：</td><td><s:selectname="user.dept"list="#{'部门A':'部门A','部门B':'部门B'}"/></td><!--##--></tr><tr><tdclass="tdBg"width="200px">头像：</td><td><imgsrc=""width="100"height="100"/><inputtype="file"name="headImg"/></td></tr><tr><tdclass="tdBg"width="200px">用户名：</td><td><s:textfieldname="user.name"/></td></tr><tr><tdclass="tdBg"width="200px">帐号：</td><td><s:textfieldname="user.account"/></td></tr><tr><tdclass="tdBg"width="200px">密码：</td><td><s:textfieldname="user.password"/></td></tr><tr><tdclass="tdBg"width="200px">性别：</td><td><s:radiolist="#{'true':'男','false':'女'}"name="user.gender"/></td></tr><tr><tdclass="tdBg"width="200px">角色：</td><td></td></tr><tr><tdclass="tdBg"width="200px">电子邮箱：</td><td><s:textfieldname="user.email"/></td></tr><tr><tdclass="tdBg"width="200px">手机号：</td><td><s:textfieldname="user.mobile"/></td></tr><tr><tdclass="tdBg"width="200px">生日：</td><td><s:textfieldid="birthday"name="user.birthday"readonly="true"onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'})"><s:paramname="value"><s:datename="user.birthday"format="yyyy-MM-dd"/></s:param></s:textfield></td></tr><tr><tdclass="tdBg"width="200px">状态：</td><td><s:radiolist="#{'1':'有效','0':'无效'}"name="user.state"/></td></tr><tr><tdclass="tdBg"width="200px">备注：</td><td><s:textareaname="user.memo"cols="75"rows="3"/></td></tr></table><s:hiddenname="user.id"/><!--##--><divclass="tcmt20"><inputtype="submit"class="btnB2"value="保存"/> <inputtype="button"onclick="javascript:history.go(-1)"class="btnB2"value="返回"/></div></div></div></div></form></body></html>
知识点：日期组件wdatepicker（见附件）
（1）导入WdataPicker文件夹到项目的js文件夹下；
（2）在JSP页面引入日期组件：
<scripttype="text/javascript"src="${basePath}/js/datepicker/WdatePicker.js"></script>
（3）用法
<s:textfieldid="birthday"name="user.birthday"readonly="true"onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'})"/>
回显时，注意设置好显示格式；可以如下设置：
<s:textfieldid="birthday"name="user.birthday"readonly="true"onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'})"><s:paramname="value"><s:datename="user.birthday"format="yyyy-MM-dd"/></s:param></s:textfield>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
