1. 程式人生 > >下拉表單項的二級聯動及回顯

下拉表單項的二級聯動及回顯

實體類:

//員工類
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;
	}
	...
}