tree

<script src="<%=request.getContextPath()%>/resources/scripts/json2.js" type="text/javascript" ></script>
------------------------------------------------------
    <style type="text/css">
        b
        {
            cursor: pointer;
        }
        b:hover
        {
            border-bottom:2px #ee8800 solid;
        }
        button{
        border:none;
        }
        #atree ul>li{
        border-left:1px #999 dotted;
        margin-left: 10px;
        padding:3px;
        }
        #atree{
        margin-left:0px;
        border:none;
        }
        .b-space{
        width:30px;
        }
        #treeDiv{
        width:965px;
        float:left;
        margin-top:0px;
        background-color:#FFF;
        height:300px;
        overflow-y:auto;
        }
/*         #level-indicator
        {
        position:absolute;
        margin-top:20px;
        margin-left:-140px;
        } */
       
        .level
        {
            margin-top:5px;
            font-size:16px;
            font-weight:bold;
            color:#999;
            margin-left:5px;
            background-color:#fff;
         }
    </style>
-----------------------------
<div id="treeDiv">
    <ul id="atree">
        <li id="${rootNode.deptId}" data-level="${rootNode.hrLevel}">
            <button data-fold="1">+</button><b id="${rootNode.deptId}_b">${rootNode.descr}</b>
        </li>
    </ul>
</div>
---------------------------
    <script type="text/javascript">
    // added on 2013/01/18. start
   
    var fromPageId="<c:out value='${fromPageId}'/>";
    // var nodePath="0000014000,CB00012321,CB00018267,CB00018263";
    var nodePath="<c:out value='${nodePath}'/>";
   
    var pathLength=null;
    var nodePathArray=null;
    var targetNodeDeptId=null;
    var curIndex=0;
        $(document).ready(function () {
        if( fromPageId=="newHrPage" ){
        //alert("111"+fromPageId);
                pathLength=nodePath.split(",").length;
                //alert("222"+pathLength);
                nodePathArray=nodePath.split(",").reverse();
                //alert("333"+nodePathArray);
                targetNodeDeptId=nodePathArray[pathLength-1];
                //alert("444"+targetNodeDeptId);
               
                //console.info("nodePathArray = " + nodePathArray);
        }

       
       
        // added on 2013/01/18. end
       
            $('#atree li button').live("click", function () {
            //debugger;
                var button = $(this);
                var li = $(this).parent();
                var ul = li.children('ul');
                if (button.attr("data-fold") == 1) {

                    if (ul.length == 0) {
                        ObtainNodes(li);
                    }
                    button.attr("data-fold", 0);
                    button.html("-");
                    ul.show();
                }
                else if (button.attr("data-fold") == 0) {
                    button.attr("data-fold", 1);
                    button.html("+");
                    ul.hide();
                }
            });

                       
            $('#atree li b').live("click",function () {
            var b = $(this);
            $('#atree li b').css('background-color', 'transparent');
            b.css('background-color', '#66CCFF');
                var li = $(this).parent();
                var deptId = li.attr("id");
                var hrListViewUrl = "<%=request.getContextPath()%>/hr/getIframeContent_SonNodeDetailByNode.do?deptId="+deptId;
                // $('#hr-frame').attr('src', hrListViewUrl);
                // window.frames["hr-frame"].location.reload();
               
               
                var iframe = document.getElementById("hr-frame");
                iframe.setAttribute("src",hrListViewUrl);
            });
           
/*             $('#atree li').live({
            mouseenter:
                       function()
                       {
            var li = $(this);
                         $('#level-indicator').html('Level: '+li.attr('data-level'));
                       },
                    mouseleave:
                       function()
                       {
                    $('#level-indicator').html('');
                       }
            }); */
            // added on 2013/01/18.start. jump to on node.
           
            if(fromPageId=="newHrPage"){
            // expand root.
                $('#atree li button').trigger("click");
            }
           
           
            // added on 2013/01/18.end
        });
       
       
        // added by Wangbing on 2013/01/18. start
        var curPathNodeDeptId=null;
        // added by Wangbing on 2013/01/18. end
       
        function ObtainNodes(li) {
            //li.append('<ul><li' + ' id="' + 1 + '"><button data-fold="1">+</button><b>' + 2 + '</b></li></ul>');
            //alert("a");
            $.post("<%=request.getContextPath()%>/hr/getSonNodesByNode.do", { deptId: li.attr("id"),hrLevel: li.attr("data-level") }, function (data, status) {

                if (status == "success") {
                    if (data != null) {
                    //alert("data= "+data);
                   
                    var r  = JSON.parse(data);
                    //alert(r.length);
                        li.append('<ul></ul>');
                        var ul = li.children('ul');
                        var level = parseInt(li.attr('data-level')) + 1;
                        ul.append('<span class="level">' + level + '</span>');
                        for(var i =0;i<r.length;i++)
                        {
                            //alert("hr No."+i+": " + r[i].deptId +", "+r[i].hrLevel +", "+r[i].descr);
                            var sonLi = $('<li id="' + r[i].deptId + '" data-level="' + r[i].hrLevel + '" data-sonNum="'+r[i].sonNodeNumber+'"></li>');
                            //alert("sonNodeNumber= "+r[i].sonNodeNumber);
                            if (r[i].sonNodeNumber != 0) {
                                sonLi.append($('<button data-fold="1">+</button>'));
                            }
                            else 
                            {
                            sonLi.css('padding-left','32px');
                            }
                            sonLi.append($('<b id="' + r[i].deptId + '_b'+'">' + r[i].descr + '</b>'));
                            ul.append(sonLi);
                        }
                       
                       /* $(r).each(function (index) {
                            var item = $(this);
                            // alert(item.toString());
                            var sonLi = $('<li id="' + item.deptId + '" data-level="' + item.hrLevel + '"></li>');
                            if (item.hasnode) {
                                sonLi.append('<button>+</button>');
                            }
                            sonLi.append('<b>' + item.descr + '</b>');
                            // sonLi.append('^{' + item.hrlevel + '}');
                        })*/

                       
                        // added on 2013/01/18. jump to certain node. start
                        if(fromPageId=="newHrPage"){
                           
                            if( li.attr("id")=="TopNode" ){
                            $('#atree li[id="'+nodePathArray[0]+'"] button').trigger("click");
                            }else{
                                //console.info("li.attr('id') : " + li.attr("id"));
                            //console.info("targetNodeDeptId : " + targetNodeDeptId);
                            if( li.attr("id")!=targetNodeDeptId ){
                                    curIndex=curIndex+1;
                                    //console.info("curIndex = " + curIndex + ", nodePathArray[curIndex]" + nodePathArray[curIndex]);
                                    //console.info("data-sonNum = " + li.attr("data-sonNum"));
                                   
                                    //console.info("length= "+$('#atree li[id="'+nodePathArray[curIndex]+'"] button').length);
                                   
                                    if($('#atree li[id="'+nodePathArray[curIndex]+'"] button').length > 0){// not leaf node
                                    $('#atree li[id="'+nodePathArray[curIndex]+'"] button').trigger("click");
                                    }else{// a leaf node.
                                    $('#atree li[id="'+targetNodeDeptId+'"] b[id="'+targetNodeDeptId+'_b"]').trigger("click");
                                    }
                            }else{
                            // alert("found");
                            $('#atree li[id="'+targetNodeDeptId+'"] b[id="'+targetNodeDeptId+'_b"]').trigger("click");
                            fromPageId="";
                            }

                            }

                        }
                     // added on 2013/01/18. jump to certain node. end
                       
                       
                    }// end data.
                }// end succuess
            });// end $post()
        }
    </script>