基于asp.net ajax 的异步加载无限级联树状菜单

　　最近一个项目用到这个功能，本来以为很容易，但写起来发现还是有点小难度的，现在写出来分享，如果不好不要拍砖~

　　效果图 1

　　代码var tree = function()
{
var _self=this;
BGMService.GetChildMenus("0",function(value){onGetTree(value,frame.treeMenus)},onFailure);//在asp.net Ajax的回调函数中传递自定义参数的方法
var nodeImgs=
{
nodeOpened:"images/treeImg/nodeOpened.gif",
nodeOpener:"images/treeImg/NodeOpener.gif",
nodeOpening:"images/treeImg/nodeOpening.gif",
nodeNoChd:"images/treeImg/ext.axd.gif",
fopen:"images/treeImg/fopen.gif",
fclose:"images/treeImg/fclose.gif",
file:"images/treeImg/l4.gif",
nodeTopOpen:"images/treeImg/node_top_1.gif",
nodeTopClose:"images/treeImg/node_top.gif",
nodeMidOpen:"images/treeImg/mnode.gif",
nodeMidClose:"images/treeImg/pnode.gif",
nodeBotOpen:"images/treeImg/plastnode_1.gif",
nodeBotClose:"images/treeImg/plastnode.gif",
nodeVertLine:'images/treeImg/vertline.gif',
nodeThreeLine:'images/treeImg/node.gif',
nodeBlank:'images/treeImg/blank.gif',
nodeLastLine:'images/treeImg/lastnode.gif',
nodeLoading:'images/treeImg/loading.gif'
};
var setTimeWaiting;
function onGetTree(value,Node)
{
if(Node.LoadingImg!=null)
{
//容错处理，因为setTimeWaiting有200ms的延迟，如果在延迟时间里双击图标，不致出错，虽然这种情况很少出现（追求完美）
Node.LoadingImg.src=nodeImgs.fopen;
Node.LoadingImg.src1=nodeImgs.fclose;
Node.nodeStateImg.src=nodeImgs.nodeOpened;
Node.nodeStateImg.src1=nodeImgs.nodeOpener;
Node.style.display="block";

}
for(var i=0;i<value.length;i++)
{
var ul = document.createElement("ul");
ul.className="Level_1";
var li2 = document.createElement("li");
li2.innerHTML=value[i].MenuName;
li2.className='li_txt';
var li1 = document.createElement('li');
for(var j=0;j<value[i].MenuLevel;j++)
{
var img = $c("img");
img.src=nodeImgs.nodeBlank;
li1.appendChild(img);
}
if(value[i].ChildCount!=0) //如果还有子节点
{
var img1 = document.createElement('img');
img1.src=nodeImgs.nodeOpener;
img1.src1=nodeImgs.nodeOpened;

var _id=value[i].MenuId;

var img2 = document.createElement('img');
img2.src=nodeImgs.fclose;
img2.src1=nodeImgs.fopen;

img1.onclick=(function(img1,img2,_id,ul){
return function(){
if(img2.src.indexOf(nodeImgs.nodeLoading)>0){return;}

var div = ul.nextSibling;
if(div==null||div.nodeName.toLowerCase() !="div")
{
var div=document.createElement("div");
div.style.display="block";
div.style.width="110%";
div.nodeStateImg=img1;
div.LoadingImg=img2;
div.setTimeWaiting=setTimeout(function(){img2.src=nodeImgs.nodeLoading;},200);
insertAfter(div,ul);
BGMService.GetChildMenus(_id,function(value){onGetTree(value,div);},onFailure);
}
else
{
switchAnttity(img1);
switchAnttity(img2);
if(div.style.display=="block")
{
div.style.display="none";
}
else
{
div.style.display="block";
}
}
}})(img1,img2,_id,ul);

li2.onclick=img1.onclick;

}
else
{
var img1 = document.createElement('img');
var img2 = document.createElement('img');
img2.src=nodeImgs.file;
img1.src=nodeImgs.nodeBlank;

var _src=value[i].Url;
li2.onclick=(function(text,_src){return function(){frame.addNewTab( text,text,_src);}})(value[i].MenuName,_src);
}

clearTimeout(Node.setTimeWaiting);

li1.appendChild(img1);
li1.appendChild(img2);

ul.appendChild(li1);
ul.appendChild(li2);

Node.appendChild(ul);
}
function switchAnttity(o)
{
var temp=o.src;
o.src=o.src1;
o.src1=temp;
}
}

function onFailure(value)
{
alert(value.get_message());
}
}

tree.prototype={

}

　　完整示例下载