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>