SSH系列：（9）用戶管理-JSP頁面
1、listUI.jsp
堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都輕質(zhì)隔墻板小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站建設(shè)營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
<%@ 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="導(dǎo)出" class="s_button" onclick="doExportExcel()"/>
<input name="userExcel" type="file"/>
<input type="button" value="導(dǎo)入" 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">帳號(hào)</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條記錄，當(dāng)前第 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>知識(shí)點(diǎn)（1）包含靜態(tài)文件
<%@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"/>知識(shí)點(diǎn)（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"));
}知識(shí)點(diǎn)（3）Javascript設(shè)置form的action 并 提交
//新增
function doAdd(){
document.forms[0].action = "${basePath}/tax/user_addUI.action";
document.forms[0].submit();
}知識(shí)點(diǎn)（4）<s:iterator>標(biāo)簽
<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>
知識(shí)點(diǎn)（5）<s:if>
table行的背景色
<s:if test="#st.odd">bgcolor="f8f8f8"</s:if>
性別的判斷
<s:if test="gender">男</s:if><s:else>女</s:else>
知識(shí)點(diǎn)（6）Javascript的函數(shù)接受字符串的時(shí)，要注意單引號(hào)
如下面的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">帳號(hào)：</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">手機(jī)號(hào)：</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">狀態(tài)：</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>知識(shí)點(diǎn)（1）<s:select>的填充
<s:select name="user.dept" list="#{'部門A':'部門A','部門B':'部門B' }"/>知識(shí)點(diǎn)（2）<s:radio>
男女
<s:radio list="#{'true':'男','false':'女'}" name="user.gender"/>有效、無效
<s:radio list="#{'1':'有效','0':'無效'}" name="user.state" value="1"/>知識(shí)點(diǎn)（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">帳號(hào)：</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">手機(jī)號(hào)：</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">狀態(tài)：</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>知識(shí)點(diǎn)：日期組件wdatepicker（見附件）
（1）導(dǎo)入WdataPicker文件夾到項(xiàng)目的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'})"/>回顯時(shí)，注意設(shè)置好顯示格式；可以如下設(shè)置：
<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> 附件：http://down.51cto.com/data/2368037
網(wǎng)站欄目：SSH系列：（9）用戶管理-JSP頁面
網(wǎng)頁網(wǎng)址：http://aaarwkj.com/article36/gjdjsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)、、域名注冊(cè)、手機(jī)網(wǎng)站建設(shè)、Google
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- APP定制開發(fā)并沒有想象的那么簡單 2020-11-16
- 雄安app定制開發(fā)需要多少錢？ 2023-03-26
- 合肥網(wǎng)站建設(shè)低價(jià)并不一定劣質(zhì)，但一定不是量身定制開發(fā) 2022-05-23
- 在無錫網(wǎng)站定制開發(fā)的優(yōu)勢(shì)都有哪些 2022-06-14
- 外貿(mào)網(wǎng)站建設(shè)為什么選擇定制開發(fā)？ 2016-03-24
- 成都西鄉(xiāng)網(wǎng)站定制開發(fā)貴在哪里？ 2022-12-24
- 網(wǎng)站定制開發(fā)時(shí)企業(yè)要提供這些信息 2021-11-06
- 成都APP定制開發(fā)前期怎樣合理規(guī)劃？ 2023-03-27
- 網(wǎng)站定制開發(fā)的網(wǎng)頁設(shè)計(jì)原則有哪些 2022-12-13
- 做網(wǎng)站為什么要找網(wǎng)站建設(shè)定制開發(fā)公司 2021-05-08
- 漳平APP定制開發(fā)需要注意哪些事項(xiàng) 2020-12-12
- 企業(yè)管理軟件，選擇通用型還是定制開發(fā)？ 2016-08-29