ajax|j2ee|機構管理
init方法實現如下:
function init(){ //定義personDom為一個XMLDOM'對象 personDom= new ActiveXObject('Microsoft.XMLDOM'); personDom.async = false; //定義stylesheet為一個XMLDOM'對象,且stylesheet為personDom確定顯示風格 stylesheet = new ActiveXObject('Microsoft.XMLDOM'); stylesheet.async = false; stylesheet.load("addOrgPerson.xsl"); //裝載stylesheet的風格定義檔案
//裝載組織類型資料 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST","Org.jsp?mode=GetOrgType", false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(); retXml=xmlhttp.responseText; // alert(retXml); //把組織類型插入下拉式清單控制項中 var OrgDoc = new ActiveXObject('Microsoft.XMLDOM'); OrgDoc.async = false; OrgDoc.loadXML(retXml); var root = OrgDoc.documentElement; oNodeList = root.childNodes; txtType.options.length =oNodeList.length; for (var i=0; i<oNodeList.length; i++) { Item = oNodeList.item(i); var OrgTypeId=Item.childNodes(0).text; var OrgTypeName=Item.childNodes(1).text; txtType.options[i].value=OrgTypeId; txtType.options[i].text=OrgTypeName; // txtType.options[0]. } } |
3) 編寫樹拖動及選擇結點的方法
// myDragHandler實現樹結點拖動時重新指定父子關係。 function myDragHandler(idFrom,idTo){ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST","Org.jsp?mode=moveOrg&orgId=" + idFrom + "&newparentOrgId=" + idTo, false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(); retXml=xmlhttp.OrgponseText;
return true; } // mySelectHandler實現選擇樹結點對系統的控制,同時顯示組織資訊及該組織下的人員。 function mySelectHandler(id){ tbOrg.style.display="block"; divOrgMemo.style.display="none"; divOrgInfo.style.display="none";
if(id==1) { divOrgMemo.style.display="block"; div1.style.display="none"; div2.style.display="none"; div3.style.display="none"; divContent.style.display="none"; div5.style.display="none"; } else { divOrgInfo.style.display="block"; div1.style.display="block"; div2.style.display="block"; div3.style.display="block"; divContent.style.display="block"; div5.style.display="block"; } CurrNodeId=id; //裝載組織資訊並顯示在編碼和名稱的文本控制項上。 loadOrg(id); //裝載某組織下人員資訊 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST","Org.jsp?mode=GetPerson&orgId=" + id, false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send();
retXml=xmlhttp.responseText; personDom.loadXML (retXml); //給人員資訊的每行加上序號 for(var i=0; i<personDom.documentElement.childNodes.length; i++){ personDom.documentElement.childNodes[i].setAttribute("seqNo", nextSeq); nextSeq++; } //人員資訊顯示在divContent上面 divContent.innerHTML = personDom.transformNode(stylesheet); }; //裝載組織資訊並顯示在編碼和名稱的文本控制項上。 function loadOrg(OrgId){ if(OrgId == null){ OrgId = OrgTree.getSelectedItemId(); } if(OrgId == ""){ tbOrg.style.display = "none"; return; } var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST","Org.jsp?mode=loadOrg&OrgId=" + OrgId, false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(); retXml=xmlhttp.responseText; var OrgDoc = new ActiveXObject('Microsoft.XMLDOM'); OrgDoc.async = false; OrgDoc.loadXML(retXml); if(OrgId != 1){ txtCode.value = OrgDoc.selectSingleNode("//OrgCode").text; txtName.value = OrgDoc.selectSingleNode("//OrgName").text; } tbOrg.style.display = "block"; } |
4) 建立組織
組織建立主要是通過調用XMLHTTP對象來實現。我們主要學會如何調用XMLHTTP。組織建立應該在後台實現,把組織資訊插入資料庫中。這裡我們通過JSP來實現。我們的Org.jsp 檔案中有個createOrg方法,該方法傳遞一個父ID。
function createOrg(parentOrgId){ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST","Org.jsp?mode=createOrg&parentOrgId=" + parentOrgId, false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(); retXml=xmlhttp.responseText; var orgId = (new Number(retXml)).toString(); return orgId; } |
5) 刪除群組織
組織刪除同樣是調用Org.jsp 檔案中的deleteOrg方法來實現,該方法傳遞所刪除的結點ID。
function deleteOrg(){ var OrgId = OrgTree.getSelectedItemId(); var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST","Org.jsp?mode=deleteOrg&OrgId=" + OrgId, false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(); } |
6) 編輯組織
組織修改是調用Org.jsp 檔案中的modifyOrg方法來實現,該方法傳遞所修改的結點ID。同時修改的資料通過自訂的XML格式的字串傳送,這時通過send字串來實現。修改前資料一律要驗證其合法性,並提示錯誤資訊。
function modifyOrg(){ if(OrgTree.getSelectedItemId() == ""){ return "N"; } if(txtCode.value == ""){ alert("請輸入編碼!"); return "N"; } if(txtName.value == ""){ alert("請輸入名稱!"); return"N"; } var OrgId = OrgTree.getSelectedItemId(); var OrgKind; //alert(txtType.options[txtType.selectedIndex].value) var strModify = "<?xml version='1.0' encoding='gb2312'?>" + "<data>" + "<OrgCode><![CDATA[" + txtCode.value + "]]></OrgCode>" + "<OrgName><![CDATA[" + txtName.value + "]]></OrgName>" + "<OrgKind><![CDATA[" + txtType.options[txtType.selectedIndex].value+ "]]></OrgKind>" + "</data>"; var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST","Org.jsp?mode=modifyOrg&OrgId=" + OrgId, false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(strModify); OrgTree.setItemText(OrgTree.getSelectedItemId(),txtName.value); } |
3. 人員管理的實現
人員可以增加、刪除、編輯。同時當選擇樹結點時應該把人員顯示出來供編輯、查看......
1) 增加人員
人員增加實現的原理是在personDom中加入結點peorsone,該結點相當於表的一行,設定屬性。同時在peorsone中不繼地加入其它結點,代表資料庫的欄位,且必須與XLT檔案的標號同名。這些結點相當該行的列。最後在表中插入一行,行上插入一列,並顯示之。