利用AJAX+J2EE开发组织机构管理系统(2)

80酷酷网    80kuku.com

  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文件的标号同名这些结点相当该行的列最后在表中插入一行,行上插入一列,并显示之



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: