三、 前端页面的主要编码

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

上一页  [1] [2] [3] [4] [5] [6] [7] 下一页