简单的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>

 效果图:

简单的jsTree运用个人上传的文件夹里面有,可以下载

你可能感兴趣的:(jstree)