你的位置:首页 > Java教程

[Java教程]简单的jsTree运用


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html "http://www.w3.org/1999/xhtml" ><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>树状</title>  <style type="text/css">    ul.__tree__, ul.__tree__ ul {      background: url(vline.png) repeat-y;      margin: 0 0 0 10px;                  padding: 0;    }    ul.__tree__ li {                background: url(node.png) no-repeat;        list-style: none;                  padding: 0 12px;                }    ul.__tree__ li.__last_child__ {              background: #fff url(lastnode.png) no-repeat;    }    ul.__tree__ span.__selected__ {        background: blue !important;      color: white;          }  </style></head><body><ul id="t">  <li>二级    <ul>      <li>二级1</li>      <li><a onclick="alert('look mom, I\'m here!');">二级2</a>        <ul>          <li>二级2.1</li>            <li>三级</li>          <li>一级</li>        </ul>      </li>      <li>二级.3</li>      <li>三级</li>      <li>一级</li>    </ul>  </li>  <li>二级    <ul>      <li>二级1</li>      <li><a onclick="alert('look mom, I\'m here!');">二级2</a>        <ul>          <li>二级2.1</li>            <li>三级</li>          <li>一级</li>          <li>三级</li>        </ul>      </li>      <li>二级.3</li>      <li>三级</li>      <li>一级</li>    </ul>  </li>   <!--<li>三级</li>  <li>一级</li>--></ul><script type="text/javascript">/*function Tree11(id,name,nianlin,shengao,tizhong){    var i=1;    var j=5;    for(i;i<j;i++){      document.getElementById("t").insertBefore(i);      alert(0);    }  }  window.onload(tree11);*/  function Tree(elId, opt) {  this.elem = document.getElementById(elId);        this.elem.className += " __tree__ ";            this.selected = null;                      this.defOpts = {                        icons : [ "list.gif", "fold.gif", "open.gif" ],    getIcon : function(li, tree) {                  if (opt && opt.getIcon)                      return opt.getIcon(li, tree);              var uls = li.getElementsByTagName("ul");          var icons = (opt && opt.icons) ? opt.icons : this.icons;      if (uls.length == 0)                      return icons[0]                  return icons[uls[0].style.display == "none" ? 1 : 2];    },    onClickImage : function(li, tree) {                if (opt && opt.onClickImage)                return opt.onClickImage(li, tree);            var uls = li.getElementsByTagName("ul");          if (uls.length == 0)        return;                          uls[0].style.display = (uls[0].style.display != "none") ? "none" : "block";      var imgs = li.getElementsByTagName("img");          imgs[0].src = this.getIcon(li);    }  };    this.initItem = function(li) {                li.tree = this;                    if (li.initDone)                        return;    li.initDone = true;    var img = document.createElement("img");        img.src = this.defOpts.getIcon(li, this);          img.onclick = function(e) {                    e = e || window.event;       var t = e.target || e.srcElement;              t.parentNode.tree.defOpts.onClickImage(t.parentNode, this);        }    var span = document.createElement("span");        for (var i = li.childNodes.length - 1; i >= 0; i--)       if (li.childNodes[i].nodeName == "UL")              this.initChildren(li.childNodes[i])      else                              span.insertBefore(li.removeChild(li.childNodes[i]), span.firstChild);        li.insertBefore(span, li.firstChild);                li.insertBefore(img, li.firstChild);                span.onclick = function(e) {                  e = e || window.event;       var li = e.target || e.srcElement;              while (li && li.nodeName != "LI")        li = li.parentNode;      if (!li)        return;      if (li.tree.selected)                      li.tree.selected.className = li.tree.selected.className.replace(", __selected__ ,", "");      var span = li.firstChild.nextSibling;            span.className += ", __selected__ ,";            li.tree.selected = span;    }  };    this.initChildren = function(ul) {      var last = true;    for (var li = ul.lastChild; li; li = li.previousSibling)      if (li.nodeName == "LI") {        this.initItem(li);        if (last) {          li.className += ", __last_child__ ,";            last = false;        }      }  }    this.initChildren(this.elem);  return this;}new Tree("t");        </script></body></html>

 效果图:

个人上传的文件夹里面有,可以下载