行业资讯

SSH系列：（9）用户管理-JSP页面

发布时间：2020-07-12 22:52:17 作者：lsieun
来源：网络 阅读：315


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()"/>&nbsp;
                        <input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/>&nbsp;
                        <input type="button" value="导出" class="s_button" onclick="doExportExcel()"/>&nbsp;
                    	<input name="userExcel" type="file"/>
                        <input type="button" value="导入" class="s_button" onclick="doImportExcel()"/>&nbsp;

                    </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 页 &nbsp;&nbsp;
                            <a href="#">上一页</a>&nbsp;&nbsp;<a href="#">下一页</a>
					到&nbsp;<input type="text"  onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"
					max="" value="1" /> &nbsp;&nbsp;
			    </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>&nbsp;-&nbsp;新增用户</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="保存" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <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>&nbsp;-&nbsp;编辑用户</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="保存" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <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>







附件：http://down.51cto.com/data/2368037
推荐阅读：
  1. SCCM 2016 配置管理系列（Part9）
  2. Docker系列9：Docker file指令详解(1)

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

ssh 用 j

上一篇：Oracle数据库的冷备

下一篇：分享一点关于Android屏幕适配的种种

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号