用戶管理的設計--2.新增用戶信息實現
阿新 • • 發佈:2017-07-13
jsp span 聯系電話 isp gif eset mob light ron
頁面效果
1.點擊【添加用戶】
2.彈出新界面,用於添加新的用戶信息
實現步驟
1.Action類設計
(1)添加add()方法,用於加載數據字典,完成下拉選項的初始化,並跳轉到新增頁面
/** * @Name: add * @Description: 彈出添加用戶窗口 * @Parameters: 無 * @Return: String:跳轉到system/userAdd.jsp */ public String add(){ //加載數據字典,遍歷性別,職位,所屬單位,是否在職 this.initSystemDDL(); return "add"; } /**加載數據字典,用來遍歷性別,職位,所屬單位,是否在職*/ private void initSystemDDL() { List<ElecSystemDDL> sexList = elecSystemDDLService.findSystemDDLListByKeyword("性別"); request.setAttribute("sexList", sexList); List<ElecSystemDDL> postList = elecSystemDDLService.findSystemDDLListByKeyword("職位"); request.setAttribute("postList", postList); List<ElecSystemDDL> isDutyList = elecSystemDDLService.findSystemDDLListByKeyword("是否在職"); request.setAttribute("isDutyList", isDutyList); List<ElecSystemDDL> jctList = elecSystemDDLService.findSystemDDLListByKeyword("所屬單位"); request.setAttribute("jctList", jctList); }
(2).在struts.xml中添加映射
<result name="add">/WEB-INF/page/system/userAdd.jsp</result>
2.JSP頁面設計
添加userAdd.jsp,註意將request集合對象遍歷到下拉選項中
<%@ page language="java" pageEncoding="UTF-8"%> <[email protected] uri="/struts-tags" prefix="s" %> <html> <head> <title>添加用戶</title> <LINK href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet"> <script language="javascript" src="${pageContext.request.contextPath }/script/function.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/My97DatePicker/WdatePicker.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/script/validate.js"></script> <script language="javascript" src="${pageContext.request.contextPath }/script/showText.js"></script> <script language="javascript" src="${pageContext.request.contextPath }/script/limitedTextarea.js"></script> <Script language="javascript"> function fileTr(){ var value = $("#BT_File").val(); if(value == "打開附件"){ $("#trFile").css("display",""); $("#BT_File").val("隱藏附件"); $("#item").css("display",""); } else{ $("#trFile").css("display","none"); $("#BT_File").val("打開附件"); $("#item").css("display","none"); } } function insertRows(){ //獲取表格對象 var tb1 = $("#filesTbl"); var tempRow = $("#filesTbl tr").size();//獲取表格的行數,+1的目的去掉添加選項的按鈕 var $tdNum = $("<td align=‘center‘></td>"); $tdNum.html(tempRow); var $tdName = $("<td align=‘center‘></td>"); $tdName.html("<input name=\"uploads\" type=\"file\" size=\"25\" id=\""+tempRow+"\">"); var $tdDel = $("<td align=‘center‘></td>"); $tdDel.html("<a href=‘javascript:delTableRow(\""+tempRow+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>"); // 創建tr,將3個td放置到tr中 var $tr = $("<tr></tr>"); $tr.append($tdNum); $tr.append($tdName); $tr.append($tdDel); //在表格的最後追加新增的tr tb1.append($tr); } function delTableRow(rowNum){ //改變行號和刪除的行號 var tb1 = $("#filesTbl"); var tempRow = $("#filesTbl tr").size();//獲取表格的行數 if (tempRow >rowNum){ //獲取刪除行的id指定的對象,例如:<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25> $("#"+rowNum).parent().parent().remove(); //加1表示尋找下一個id,目的是將後面tr的格式向上移動 for (i=(parseInt(rowNum)+1);i<tempRow;i++){ //將i-1的值賦值給編號 $("#"+i).parent().prev().html(i-1); //將i-1的值賦值給超鏈接的刪除 $("#"+i).parent().next().html("<a href=‘javascript:delTableRow(\""+(i-1)+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>");// //將i-1的值賦值給文本框的id,用於刪除 $("#"+i).attr("id",(i-1));//將id設置成i-1 } } } </script> </head> <body> <form name="Form1" id="Form1" method="post" enctype="multipart/form-data"> <br> <table cellSpacing="1" cellPadding="5" width="680" align="center" bgColor="#eeeeee" style="border:1px solid #8ba7e3" border="0"> <tr> <td class="ta_01" align="center" colSpan="4" background="${pageContext.request.contextPath }/images/b-info.gif"> <font face="宋體" size="2"><strong>添加用戶</strong></font> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">登 錄 名:<font color="#FF0000">*</font></td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="logonName" maxlength="25" id="logonName" size="20" onblur="checkUser(this);"></s:textfield> <div id="check"></div> </td> <td width="18%" align="center" bgColor="#f5fafe" class="ta_01">用戶姓名:<font color="#FF0000">*</font></td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="userName" maxlength="25" id="userName" size="20"></s:textfield> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">性別:<font color="#FF0000">*</font></td> <td class="ta_01" bgColor="#ffffff"> <s:select list="#request.sexList" name="sexID" id="sexID" listKey="ddlCode" listValue="ddlName" headerKey="" headerValue="請選擇" cssStyle="width:155px"></s:select> </td> <td align="center" bgColor="#f5fafe" class="ta_01">職位:<font color="#FF0000">*</font></td> <td class="ta_01" bgColor="#ffffff"> <s:select list="#request.postList" name="postID" id="postID" listKey="ddlCode" listValue="ddlName" headerKey="" headerValue="請選擇" cssStyle="width:155px"></s:select> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">所屬單位:<font color="#FF0000">*</font></td> <td class="ta_01" bgColor="#ffffff"> <s:select list="#request.jctList" name="jctID" id="jctID" listKey="ddlCode" listValue="ddlName" headerKey="" headerValue="請選擇" cssStyle="width:155px" onchange="findJctUnit(this)"></s:select> </td> <td align="center" bgColor="#f5fafe" class="ta_01">單位名稱:<font color="#FF0000">*</font></td> <td class="ta_01" bgColor="#ffffff"> <select id="jctUnitID" name="jctUnitID" style="width:155px"></select> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">密碼:</td> <td class="ta_01" bgColor="#ffffff"> <s:password name="logonPwd" id="logonPwd" maxlength="25" size="22"></s:password> </td> <td align="center" bgColor="#f5fafe" class="ta_01">確認密碼:</td> <td class="ta_01" bgColor="#ffffff"> <s:password name="passwordconfirm" id="passwordconfirm" maxlength="25" size="22"></s:password> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">出生日期:</td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="birthday" id="birthday" maxlength="50" size="20" onClick="WdatePicker()"></s:textfield> </td> <td align="center" bgColor="#f5fafe" class="ta_01">聯系地址:</td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="address" maxlength="50" size="20"></s:textfield> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">聯系電話:</td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="contactTel" maxlength="25" size="20"></s:textfield> </td> <td align="center" bgColor="#f5fafe" class="ta_01">手機:</td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="mobile" maxlength="25" size="20"></s:textfield> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">電子郵箱:</td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="email" maxlength="50" size="20"></s:textfield> </td> <td align="center" bgColor="#f5fafe" class="ta_01">是否在職:</td> <td class="ta_01" bgColor="#ffffff"> <s:select list="#request.isDutyList" name="isDuty" id="isDuty" listKey="ddlCode" listValue="ddlName" value="1" cssStyle="width:155px"></s:select> </td> </tr> <tr> <td align="center" bgColor="#f5fafe" class="ta_01">入職日期:<font color="#FF0000">*</font></td> <td class="ta_01" bgColor="#ffffff"> <s:textfield name="onDutyDate" id="onDutyDate" maxlength="50" size="20" onClick="WdatePicker()"></s:textfield> </td> <td align="center" bgColor="#ffffff" class="ta_01"></td> <td class="ta_01" bgColor="#ffffff"> </td> </tr> <TR> <TD class="ta_01" align="center" bgColor="#f5fafe">備註:</TD> <TD class="ta_01" bgColor="#ffffff" colSpan="3"> <s:textarea name="remark" cssStyle="WIDTH:95%" rows="4" cols="52"></s:textarea> </TD> </TR> <TR> <td align="center" colSpan="4" class="ta_01" style="WIDTH: 100%" align="left" bgColor="#f5fafe"> <input type="button" id="BT_File" name="BT_File" value="打開附件" style="font-size:12px; color:black; height=22;width=55" onClick="fileTr()"> <input type="button" id="item" name="item" value="添加選項" style="difont-size:12px; color:black; display: none;height=20;width=80 " onClick="insertRows()"> </td> </TR> <TR id="trFile" style="display: none"> <td align="center" colSpan="4" class="ta_01" style="WIDTH: 100%" align="center" bgColor="#f5fafe"> <table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="filesTbl" style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word"> <tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3"> <td class="ta_01" align="center" width="10%" background="${pageContext.request.contextPath }/images/tablehead.jpg" height=20> 編號 </td> <td class="ta_01" align="center" width="40%" background="${pageContext.request.contextPath }/images/tablehead.jpg" height=20> 選擇待上傳文件 </td> <td class="ta_01" align="center" width="10%" background="${pageContext.request.contextPath }/images/tablehead.jpg" height=20> 刪除 </td> </tr> </table> </td> </TR> <TR> <td align="center" colSpan="4" class="sep1"></td> </TR> <tr> <td class="ta_01" style="WIDTH: 100%" align="center" bgColor="#f5fafe" colSpan="4"> <input type="button" id="BT_Submit" name="BT_Submit" value="保存" style="font-size:12px; color:black; height=22;width=55" onClick="check_null()"> <FONT face="宋體"> </FONT> <input style="font-size:12px; color:black; height=22;width=55" type="button" value="關閉" name="Reset1" onClick="window.close()"> </td> </tr> </table> </form> </body> </html>
用戶管理的設計--2.新增用戶信息實現