利用AJAX+J2EE開發組織機構管理系統 2

三、 前端頁面的主要編碼

　　1. 樹的實現

　　在WEB上實現樹結構，同樣我們是通過Ajax來實現的。樹上可以顯示自訂的表徵圖，可以插入、刪除、結點。並且結點可任意移動。這裡我們不重點講樹的實現技術，我們已經封裝好了，你只要按要求去改動就是了。

　　1) 鍵接樹型檔案

在＜head＞與＜/head＞之間鍵接我們的與樹有關的檔案, 代碼如下：

＜link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css"＞
＜script src="js/dhtmlXCommon.js"＞＜/script＞
＜script src="js/dhtmlXTree.js"＞＜/script＞

 　　2) 裝載方法

　　在頁面的文檔開啟時裝載自訂方法, preLoadImages方法實現樹控制項的表徵圖定義，doOnLoad實現樹控制項的表徵圖定義代碼如下:

＜body onload="preLoadImages();doOnLoad();"＞

　　3) 編寫方法

//doOnLoad實現裝載並顯示樹。設定樹屬性等。
function doOnLoad(){
　OrgTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0);
　//dhtmlXTreeObject是樹對象，通過建立對象，指定樹顯示的DIV可定義樹。
　OrgTree.setImagePath("imgs/");//設定樹的圖片所在位置
　OrgTree.setDragHandler();//設定樹結點拖動
　OrgTree.enableDragAndDrop(true) //設定樹結點是否可拖動
　OrgTree.setDragHandler(myDragHandler); //設定樹結點拖動時所執行的方法
　OrgTree.setOnClickHandler(mySelectHandler); //設定樹單擊時所執行的方法
　//OrgTree.setXMLAutoLoading("Org.jsp");//裝載樹結點資料。資料來源如Org.jsp所返回的XML格式的字串，資料是動態裝載，且當展開時才裝載。
　OrgTree.loadXML("root.xml?0");//裝載樹結點資料。資料來源root.xml檔案，並且從xml檔案的ID號為0處讀取資料。
　//OrgTree.loadXML("Org.jsp");//裝載樹結點資料。資料來源如Org.jsp所返回的XML格式的字串,並且是一次性全部裝載資料。
}
//preLoadImages方法實現樹控制項的表徵圖定義
function preLoadImages(){
　var imSrcAr = new Array("line1.gif","line2.gif","line3.gif","line4.gif","minus2.gif","minus3.gif",
　　"minus4.gif","plus2.gif","plus3.gif","plus4.gif","book.gif","books_open.gif","books_close.gif",
　　"magazine_open.gif","magazine_close.gif","tombs.gif","tombs_mag.gif","book_titel.gif")
　var imAr = new Array(0);
　for(var i=0;i＜imSrcAr.length;i++){
　　imAr[imAr.length] = new Image();
　　imAr[imAr.length-1].src = "imgs/"+imSrcAr[i]
　}
}

　　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].
　}
}