下拉表單項的二級聯動及回顯
阿新 • • 發佈:2018-11-10
實體類:
//員工類
public class CrmStaff {
private String staffId;
private String loginName;
private String loginPwd;
private String staffName;
private String gender;
private Date onDutyDate;
private CrmPost post;
...
..
.
//職務類 public class CrmPost { private String postId; private String postName; private CrmDepartment department; private Set<CrmStaff> staffSet = new HashSet<CrmStaff>(); ... .. .
//部門類
public class CrmDepartment {
private String depId;
private String depName;
private Set<CrmPost> postSet = new HashSet<CrmPost>();
...
..
.
Jsp
... <script type="text/javascript"> //根據不同的瀏覽器獲得xmlHttp引擎 function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch(e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert("哥們兒,你用的是什麼瀏覽器啊?"); throw e; } } } } //二級聯動 function showPost(obj){ var depId = obj.value; var xmlhttp = createXMLHttpRequest(); xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var textDate = xmlhttp.responseText; //將字串手動轉換成json陣列物件 var jsonData = eval("("+textDate+")"); var postSelectElement = document.getElementById("postSelectId"); postSelectElement.innerHTML="<option value=''>---請選擇---</option>"; //遍歷陣列 for ( var i = 0; i < jsonData.length; i++) { var postObj = jsonData[i]; var postId = postObj.postId; var postName = postObj.postName; postSelectElement.innerHTML += "<option value='"+postId+"'>"+postName+"</option>"; } } } var url="${pageContext.request.contextPath}/postAction_findAllwithDepartment?department.depId="+depId; xmlhttp.open("GET",url); xmlhttp.send(null); } </script> ... .. . <s:form> <table width="88%" border="0" class="emp_table" style="width:80%;"> <tr> <td>登入名:</td> <td><s:textfield name="loginName" ></s:textfield></td> <td>密碼:</td> <td><s:password name="loginPwd" showPassword="true"></s:password></td> </tr> <tr> <td>姓名:</td> <td><s:textfield name="staffName"></s:textfield></td> <td>性別:</td> <td> <s:radio list="{'男','女'}" name="gender"></s:radio> </td> </tr> <tr> <td width="10%">所屬部門:</td> <td width="20%"> <s:select list="AllDepartment" listKey="depId" listValue="depName" headerKey="" headerValue="---請選擇---" name="post.department.depId" onchange="showPost(this)"> </s:select> </td> <td width="8%">職務:</td> <td width="62%"> <s:select list="post!=null ? post.department.postSet : {}" name="post.postId" listKey="postId" listValue="postName" headerKey="" headerValue="---請選擇---" id="postSelectId"></s:select> </td> </tr> <tr> <td width="10%">入職時間:</td> <td width="20%"> <s:date name="onDutyDate" var="myDate" format="yyyy--MM--dd"/> <s:textfield name="onDutyDate" readonly="true" value="%{#myDate}" onfocus="c.showMoreDay=true;c.show(this);"></s:textfield> </td> <td width="8%"></td> <td width="62%"></td> </tr> </table> </s:form> ... .. .
Action類
//員工Action //負責通過員工Id查詢員工並把物件壓入值棧中用於基本表單項的回顯,呼叫部門Service查詢所有部分用於下拉表達項的回顯 public class StaffAction extends ActionSupport implements ModelDriven<CrmStaff>{ private StaffService staffService; private DepartmentService departmentService; ... public String editUI() throws Exception{ CrmStaff findStaff = staffService.findById(staff.getStaffId()); ActionContext.getContext().getValueStack().push(findStaff); List<CrmDepartment> AllDepartment = departmentService.findAll(); ActionContext.getContext().getValueStack().set("AllDepartment", AllDepartment); return "editUI"; } ... }
//職務Action
//負責部分與職務之間的二級聯動,通過部門物件來查詢職務,並將其轉換成json字串發給瀏覽器
public class PostAction extends ActionSupport implements ModelDriven<CrmPost>{
private PostService postService;
...
public String findAllwithDepartment() throws Exception{
List<CrmPost> allPost = this.postService.findAll(post.getDepartment());
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{"department","staffSet"});
String jsonDate = JSONArray.fromObject(allPost,jsonConfig).toString();
System.out.println(jsonDate);
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().getWriter().print(jsonDate);
return NONE;
}
...
}