简单的jsTree运用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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>
效果图:
个人上传的文件夹里面有，可以下载
posted on 2015-06-25 13:39 带着我一起飞阅读(369) 评论(0) 收藏举报