tree.js
上传用户:shjgzm
上传日期:2017-08-31
资源大小:2757k
文件大小:6k
源码类别:

Ajax

开发平台:

Java

  1. var Tree = new function() {
  2.     this._url = "tree.jsp";             //用于请求数据的服务器页面地址
  3.     this._openMark = "-";              //目录节点处于展开状态时的标识
  4.     this._closeMark = "+";             //目录节点处于关闭状态时的标识
  5.     this._itemMark = "·";              //非目录节点标识
  6.     this._initId = "treeInit";          //树形目录初始div标识
  7.     this._rootData = "根目录";          //根节点文字信息
  8.     this._boxSuffix = "_childrenBox";   //子节点容器后缀
  9.     this._folderType = "folder";        //目录节点类型变量
  10.     this._itemType = "item";            //非目录节点类型变量
  11.     //初始化根节点
  12.     this.init = function() {
  13.         var initNode = document.getElementById(this._initId);   //获取初始div
  14.         var _node = document.createElement("div");              //创建新div作为根节点
  15.         _node.id = "0";                                         //根节点id为0
  16.         _node.innerHTML = this.createItemHTML(_node.id, this._folderType, this._rootData);
  17.         initNode.appendChild(_node);                            //将根节点加入初始div
  18.     }
  19.     //获取给定节点的子节点
  20.     this.getChildren = function(_parentId) {
  21.         //获取页面子节点容器box
  22.         var childBox = document.getElementById(_parentId + this._boxSuffix);
  23.         //如果子节点容器已存在则直接设置显示状态,否则从服务器获取子节点信息
  24.         if (childBox) {
  25.             var isHidden = (childBox.style.display == "none");      //判断当前状态是否隐藏
  26.             childBox.style.display = isHidden?"":"none";            //隐藏则显示,如果显示则变为隐藏
  27.             //根据子节点的显示状态修改父节点标识
  28.             var _parentNode = document.getElementById(_parentId);
  29.             _parentNode.firstChild.innerHTML = isHidden?this._openMark:this._closeMark;
  30.         } else {
  31.             var xmlHttp=this.createXmlHttp();                       //创建XmlHttpRequest对象
  32.             xmlHttp.onreadystatechange = function() {
  33.                 if (xmlHttp.readyState == 4) {
  34.                     //调用addChildren函数生成子节点
  35.                     Tree.addChildren(_parentId, xmlHttp.responseXML);
  36.                 }
  37.             }
  38.             xmlHttp.open("GET", this._url + "?parentId=" + _parentId, true);
  39.             xmlHttp.send(null);
  40.         }
  41.     }
  42.     //根据获取的xmlTree信息,设置指定节点的子节点
  43.     this.addChildren = function(_parentId, _data) {
  44.         var _parentNode = document.getElementById(_parentId);   //获取父节点
  45.         _parentNode.firstChild.innerHTML = this._openMark;      //设置节点前标记为目录展开形式
  46.         var _nodeBox = document.createElement("div");           //创建一个容器,称为box,用于存放所有子节点
  47.         _nodeBox.id = _parentId + this._boxSuffix;              //容器的id规则为:在父节点id后加固定后缀
  48.         _nodeBox.className = "box";                             //样式名称为box,div.box样式会对此节点生效
  49.         _parentNode.appendChild(_nodeBox);                      //将子节点box放入父节点中
  50.         var _children = _data.getElementsByTagName("tree")[0].childNodes;   //获取所有item节点
  51.         var _child = null;                                      //声明_child变量用于保存每个子节点
  52.         var _childType = null;                                  //声明_childType变量用于保存每个子节点类型
  53.         for(var i=0; i<_children.length; i++) {                 //循环创建每个子节点
  54.             _child = _children[i];
  55.             _node = document.createElement("div");              //每个节点对应一个新div
  56.             _node.id = _child.getAttribute("id");               //节点的id值就是获取数据中的id属性值
  57.             _childType = _child.getAttribute("isFolder")=="true"?this._folderType:this._itemType;   //设置子节点类型
  58.             //根据节点类型不同,调用createItemHTML创建节点内容
  59.             if (_childType == this._itemType) {
  60.                 //非目录节点在最后多传一个link数据,用于点击后链接到新页面
  61.                 _node.innerHTML = this.createItemHTML(_node.id, _childType, _child.firstChild.data, _child.getAttribute("link"));
  62.             } else {
  63.                 //目录节点只需传递id,节点类型,节点数据
  64.                 _node.innerHTML = this.createItemHTML(_node.id, _childType, _child.firstChild.data);
  65.             }
  66.             _nodeBox.appendChild(_node);                        //将创建好的节点加入子节点box中
  67.         }
  68.     }
  69.     //创建节点的页面片断
  70.     this.createItemHTML = function(itemId, itemType, itemData, itemLink) {
  71.         //根据节点类型不同,返回不同的HTML片断
  72.         if (itemType == this._itemType) {
  73.             //非目录节点的class属性以item开头,并且onclick事件调用Tree.clickItem函数
  74.             return '<span class="itemMark">'+this._itemMark+'</span>' +
  75.                    '<span class="item" onclick="Tree.clickItem('' + itemLink + '');">'+itemData+'</span>';
  76.         } else if (itemType == this._folderType) {
  77.             //目录节点的class属性以folder开头,并且onclick事件调用Tree.getChildren函数
  78.             return '<span class="folderMark" onclick="Tree.getChildren('' + itemId + '')">' + this._closeMark + '</span>' +
  79.                    '<span class="folder" onclick="Tree.getChildren('' + itemId + '')">' + itemData + '</span>'
  80.         }
  81.     }
  82.     //点击叶子节点后的动作,目前只是弹出对话框,可修改为链接到具体的页面
  83.     this.clickItem = function(_link) {
  84.         alert("当前节点可以链接到页面 " + _link + " 。");
  85.     }
  86.     //用于创建XMLHttpRequest对象
  87.     this.createXmlHttp=function() {
  88.         var xmlHttp = null;
  89.         //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
  90.         if (window.XMLHttpRequest) {
  91.            xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
  92.         } else {
  93.            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
  94.         }
  95.         return xmlHttp;
  96.     }
  97. }