溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
