三、 前端頁面的主要編碼
1. 樹的實(shí)現(xiàn)
在WEB上實(shí)現(xiàn)樹結(jié)構(gòu)，同樣我們是通過
Ajax來實(shí)現(xiàn)的。樹上可以顯示自定義的圖標(biāo)，可以插入、刪除、結(jié)點(diǎn)。并且結(jié)點(diǎn)可任意移動。這里我們不重點(diǎn)講樹的實(shí)現(xiàn)技術(shù)，我們已經(jīng)封裝好了，你只要按要求去改動就是了。
1) 鍵接樹型文件
在＜head＞與＜/head＞之間鍵接我們的與樹有關(guān)的文件, 代碼如下：
＜link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css"＞
＜script src="js/dhtmlXCommon.js"＞＜/script＞
＜script src="js/dhtmlXTree.js"＞＜/script＞ |
2) 裝載方法
在頁面的文檔打開時裝載自定義方法, preLoadImages方法實(shí)現(xiàn)樹控件的圖標(biāo)定義，doOnLoad實(shí)現(xiàn)樹控件的圖標(biāo)定義代碼如下：
| ＜body onload="preLoadImages();doOnLoad();"＞ |
3) 編寫方法
//doOnLoad實(shí)現(xiàn)裝載并顯示樹。設(shè)置樹屬性等。
function doOnLoad(){
OrgTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0);
//dhtmlXTreeObject是樹對象，通過新建對象，指定樹顯示的DIV可定義樹。
OrgTree.setImagePath("imgs/");//設(shè)置樹的圖片所在位置
OrgTree.setDragHandler();//設(shè)置樹結(jié)點(diǎn)拖動
OrgTree.enableDragAndDrop(true) //設(shè)置樹結(jié)點(diǎn)是否可拖動
OrgTree.setDragHandler(myDragHandler); //設(shè)置樹結(jié)點(diǎn)拖動時所執(zhí)行的方法
OrgTree.setOnClickHandler(mySelectHandler); //設(shè)置樹單擊時所執(zhí)行的方法
//OrgTree.setXMLAutoLoading("Org.jsp");//裝載樹結(jié)點(diǎn)數(shù)據(jù)。數(shù)據(jù)來源如Org.jsp所返回的XML格式的字符串，數(shù)據(jù)是動態(tài)裝載，且當(dāng)展開時才裝載。
OrgTree.loadXML("root.xml?0");//裝載樹結(jié)點(diǎn)數(shù)據(jù)。數(shù)據(jù)來源root.xml文件，并且從xml文件的ID號為0處讀取數(shù)據(jù)。
//OrgTree.loadXML("Org.jsp");//裝載樹結(jié)點(diǎn)數(shù)據(jù)。數(shù)據(jù)來源如Org.jsp所返回的XML格式的字符串,并且是一次性全部裝載數(shù)據(jù)。
}
//preLoadImages方法實(shí)現(xiàn)樹控件的圖標(biāo)定義
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. 組織管理的實(shí)現(xiàn)
組織可以增加、刪除、編輯。同時當(dāng)選擇樹結(jié)點(diǎn)時應(yīng)該把組織顯示出來供編輯，查看。為了實(shí)現(xiàn)這些功能，你只要按要求去改動就是了。
1) 全局變量的定義
許多地方我們要用到一些公共變量，我們在＜script＞與＜/script＞之間定義全局變量, 代碼如下：
var OrgTree = null; //組織樹Dom
var nextSeq = 0;//人員管理的順序號（流水號）
var personDom;//人員Dom
var CurrNodeId;//當(dāng)前結(jié)點(diǎn)Id |
2) 初始化
當(dāng)頁面打開時我們要控件好那部分該顯示，那部分要隱藏。且對全局變量的賦值等,組織類型裝載。在頁面的文檔打開時裝載自定義方法init（）, init方法實(shí)現(xiàn)初始化。
init方法實(shí)現(xiàn)如下：
function init(){
//定義personDom為一個XMLDOM'對象
personDom= new ActiveXObject('Microsoft.XMLDOM');
personDom.async = false;
//定義stylesheet為一個XMLDOM'對象，且stylesheet為personDom確定顯示風(fēng)格
stylesheet = new ActiveXObject('Microsoft.XMLDOM');
stylesheet.async = false;
stylesheet.load("addOrgPerson.xsl"); //裝載stylesheet的風(fēng)格定義文件
//裝載組織類型數(shù)據(jù)
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＜o(jì)NodeList.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) 編寫樹拖動及選擇結(jié)點(diǎn)的方法
// myDragHandler實(shí)現(xiàn)樹結(jié)點(diǎn)拖動時重新指定父子關(guān)系。
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實(shí)現(xiàn)選擇樹結(jié)點(diǎn)對系統(tǒng)的控制，同時顯示組織信息及該組織下的人員。
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("http://OrgCode").text;
txtName.value = OrgDoc.selectSingleNode("http://OrgName").text;
}
tbOrg.style.display = "block";
} |
4) 建立組織
組織建立主要是通過調(diào)用XMLHTTP對象來實(shí)現(xiàn)。我們主要學(xué)會如何調(diào)用XMLHTTP。組織建立應(yīng)該在后臺實(shí)現(xiàn)，把組織信息插入
數(shù)據(jù)庫中。這里我們通過JSP來實(shí)現(xiàn)。我們的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) 刪除組織
組織刪除同樣是調(diào)用Org.jsp 文件中的deleteOrg方法來實(shí)現(xiàn)，該方法傳遞所刪除的結(jié)點(diǎn)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) 編輯組織
組織修改是調(diào)用Org.jsp 文件中的modifyOrg方法來實(shí)現(xiàn)，該方法傳遞所修改的結(jié)點(diǎn)ID。同時修改的數(shù)據(jù)通過自定義的XML格式的字符串傳送,這時通過send字符串來實(shí)現(xiàn)。修改前數(shù)據(jù)一律要驗(yàn)證其合法性，并提示錯誤信息。
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);
} |