DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 利用AJAX+J2EE開發組織機構管理系統2
利用AJAX+J2EE開發組織機構管理系統2
編輯:AJAX詳解     
AJax|J2EE|機構管理 <body >
  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文件的標號同名這些結點相當該行的列最後在表中插入一行,行上插入一列,並顯示之
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved