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

[@more@]

2. 组织管理的实现

组织可以增加、删除、编辑。同时当选择树结点时应该把组织显示出来供编辑，查看。为了实现这些功能，你只要按要求去改动就是了。

1) 全局变量的定义

许多地方我们要用到一些公共变量，我们在＜script＞与＜/script＞之间定义全局变量, 代码如下：

var OrgTree = null; //组织树Dom

var nextSeq = 0;//人员管理的顺序号（流水号）

var personDom;//人员Dom

var CurrNodeId;//当前结点Id

2) 初始化

当页面打开时我们要控件好那部分该显示，那部分要隐藏。且对全局变量的赋值等,组织类型装载。在页面的文档打开时装载自定义方法init（）, init方法实现初始化。

＜body onload="init();"＞

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;

}

ITPub博客

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

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

最新文章