SSH系列:(9)用户管理-JSP页面

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


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屏幕适配的种种

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》