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

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 style="float:right;">
                        <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" style="margin:0px; border:0px none;">
                    <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" style="margin-top: 5px;">
		<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" style="width: 30px;" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"
					max="" value="1" /> &nbsp;&nbsp;
			    </td>
			</tr>
		</table>
        </div>
        </div>
    </div>
</form>

</body>
</html>

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>

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>
时间： 2024-11-03 01:22:54

SSH系列：（9）用户管理-JSP页面的相关文章

用户管理的设计--8.批量用户信息删除

页面效果 勾选一个或多个用户,或点击全选框,然后单击[批量删除],弹出确认窗口.确定则删除,取消则不删除: 实现步骤 1.JSP页面的js函数 1.1添加按钮[批量删除]单击事件触发的js函数,有两种实现方式: 1.1 DOM对象实现 DOM对象实现批量删除js 1.2 jQuery对象实现 function deleteAll(){ var $selectuser = $("input[type=checkbox][name=userID]"); var flag = false;

SSH系列：（18）用户-角色管理

之前,在做用户管理的时候,并未处理"用户"与"角色"的关系,因为那个时候,还没有涉及到角色的实现.我们在做角色-权限管理的时候,也并没有处理 角色 和 用户 之间的关系.如今,再回过头来实现"用户"和 "角色"之间的联系. "用户"和"角色"之间的关系是多对多的关系,这个关系可以分成两个:(1)"用户"与"用户角色"的一对多的关系.(2)"

SSH系列：（12）用户管理-表单校验

在用户的新增(add).编辑(edit)中对用户名(username).密码(password)进行非空校验和帐号(account)的唯一性校验. 需要注意的是在编辑页面(editUI.jsp)中帐号(account)的唯一性校验要排除当前编辑的帐号,不然将出现无法保存的情况. 1.JSP页面 在jsp页面中,分别进行两个时机的校验,①是在编辑帐号(account)的表单域时需要到服务器中校验是否已经存在输入的帐号:②在提交(submit)表单时再次进行校验,避免在填写表单时帐号已被使用的情况:

SSH系列：（17）角色-权限管理(前台JSP)

1.listUI.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib uri="/struts-tags" prefix="s" %> <html> <head>     <%@include file="/common/header.jsp"%&

SSH系列：（10）用户管理-用户头像上传

用户头像上传是使用Struts的上传功能,因此需要遵循Struts上传文件的方式. 基本步骤: 1. 在JSP中使用 HTML 表单上传文件, 须把 HTML 表单的 enctype 属性设置为 multipart/form-data, method 属性设置为 post.HTML表单中包含<input type="file"> 使用户能选择上传文件. 2. Action 中添加三个文件上传相关的属性. 上传单个文件属性格式 属性一:类型为File,名字为页面file控件名

cas sso单点登录系列4_cas-server登录页面自定义修改过程（jsp页面修改）

转:http://blog.csdn.net/ae6623/article/details/8861065 SSO单点登录系列4:cas-server登录页面自定义修改过程,全新DIY. 目标: 下面是正文: 打开cas的默认首页,映入眼帘的是满眼的中文and英文混杂体,作为一名合格的用户,我表示很不开心. 于是,打开 Nodepad++,寻找C:\tomcat7\webapps\casServer\WEB-INF\view\jsp\default\ui \casLoginView.jsp这个页

Java SSH框架系列：用户登录模块的设计与实现思路

时间 2014-01-19 16:14:54  CSDN博客原文  http://blog.csdn.net/nupt123456789/article/details/18504615 1.简介 用户登录模块,指的是根据用户输入的用户名和密码,对用户的身份进行验证等.如果用户没有登录,用户就无法访问其他的一些jsp页面,甚至是action都不能访问. 二.简单设计及实现 本程序是基于Java的SSH框架进行的. 1.数据库设计 我们应该设计一个用户表,其Userinfo表,对应的SQL语句为(

【SSH项目实战】国税协同平台-4.用户管理需求分析&amp;CRUD方法1

上次我们完成了日志模块的配置和基础增删改查类,下面我们根据用户的需求来正式开发项目的业务模块. 下面我们主要来开发系统用户管理的模块 我们有用户的功能说明书,打开功能说明书来看看这个模块需要什么功能: 功能说明 用户管理:可以根据用户名查询系统用户:在页面中点击"新增"可以添加用户.点击删除可以批量删除选中的用户."导出"则导出所有的用户列表到excel文件中并弹出下载提示框给用户下载:"导入"将需要用户将本地的用户列表按照一定格式将excel中

【SSH】用户管理新的方法

实现增删该查的步骤: 一.做ACTION相关的准备:ACTION,jsp,配置. 创建MYaction extends BaseAction 定义出Action中的方法,要写出方法名,作用.返回值. 创建所用到的JSP页面 配置Action:1.在myAction上写注解@Controller与@Scope("prototype")  2.在strtus.xml中配置这个Action与所用的result. @Transactional // @Transactional注解可以被继承,