1、首先你要去下面地址下载yahoo类库
    http://developer.yahoo.com/yui/
    2。5版本的 8。84M，你可以不全用，只用树的
2、然后需要把yui/build/treeview/文件夹下面的文件复制到你的工程

3、需要引用下面的js

<link rel="stylesheet"type="text/css"href="/yui/build/treeview/assets/skins/sam/treeview.css"/><link rel="stylesheet"type="text/css"href="/yui/build/menu/assets/skins/sam/menu.css">
<script type="text/javascript"src="/yui/build/yahoo/yahoo.js"></script><script type="text/javascript"src="/yui/build/event/event.js"></script><script type="text/javascript"src="/yui/build/treeview/treeview.js"></script>   
<!--Dependency source files-->
<script type="text/javascript"src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script><script type="text/javascript"src="/yui/build/container/container_core.js"></script><!--Menu source file-->
<script type="text/javascript"src="/yui/build/menu/menu.js"></script>

页面html代码

<divclass="yui-skin-sam"><divid="treeDiv1"></div></div>

所有的js代码

<script type="text/javascript">varchannelId=0;vartreeId=0;functionLoadChannelTree(obj)
   {
      channelId=obj.value;if(channelId!=0)
      {vards_Normal=AjaxForTree.GetTree(channelId).value;if(ds_Normal!=null&&typeof(ds_Normal)=="object"&&ds_Normal.Tables.length!=0&&ds_Normal.Tables[0].Rows.length!=0)
          {
             treeId=ds_Normal.Tables[0].Rows[0].TreeId;
             treeInit();//alert(treeId);}else{
            treeId=0;
            document.getElementById("treeDiv1").innerHTML="<a href='#' style='text-decoration:underline;' οnclick='initChannelTree();'>该频道下还没有TAG树，请点击这里创建TAG树。</a>";
          }
        document.getElementById("releaseTreeSpan").style.display="block"; 
      
     }else{
        document.getElementById("releaseTreeSpan").style.display="none";
        document.getElementById("treeDiv1").innerText="";
     }
     document.getElementById("releaseTree").href="/Tag/TagTreePosition.aspx?TreeId="+treeId+"&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=500&width=770";
   }functionLoadNodeContent(nodeId)
   {varparam="NodeId="+nodeId;
         ShowContentA("/controls/Tag/TagListForTree.ashx",param,document.getElementById("NodeContent"),null);
   }functioninitChannelTree()
    {varres=AjaxForTree.CreateTree(channelId).value;if(res!=-1)
         {
            treeId=res;
            treeInit();
         }else{
            document.getElementById("treeDiv1").innerHTML="树创建失败！";
         }
    }//global variable to allow console inspection of tree:vartree;varcurrentTreeNodeId;varoTextNodeMap={};functiontreeInit() {
    
           tree=newYAHOO.widget.TreeView("treeDiv1");varmyobj="{label:'所有',id:'1'}";
               myobj=eval('('+myobj+')');varrootNode=newYAHOO.widget.TextNode(myobj, tree.getRoot(),true);
            oTextNodeMap[rootNode.labelElId]=rootNode;
            
            buildChildNodeTree(rootNode,treeId);
           tree.subscribe("expand",function(node) {
           
               });

tree.subscribe("collapse",function(node) {
        
               });//Trees with TextNodes will fire an event for when the label is clicked:tree.subscribe("labelClick",function(node) {varnodeId=node.data.id;
                  document.getElementById('TagBtnList').style.display='';
                  document.getElementById('addTags').href='/Tag/SelectTreeTag.aspx?TreeNodeId='+nodeId+'&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=500&width=770';//document.getElementById('addTags').href='/PositionMore.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=500&width=770';LoadNodeContent(nodeId);
                 currentTreeNodeId=nodeId;
               });//alert(tree.getRoot());//The tree is not created in the DOM until this method is called:tree.draw();

}functionbuildChildNodeTree( node )
    {varnodeId=node.data.id;//alert(nodeId);vards_Normal=AjaxForTree.GetChildNode(nodeId,treeId).value;if(ds_Normal!=null&&typeof(ds_Normal)=="object"&&ds_Normal.Tables!=null)
        {for(vari=0;i<ds_Normal.Tables[0].Rows.length;i++)
          {varTreeNodeId=ds_Normal.Tables[0].Rows[i].TreeNodeId;varTreeNodeName=ds_Normal.Tables[0].Rows[i].TreeNodeName;varmyobj="{label:'"+TreeNodeName+"',id:'"+TreeNodeId+"'}";
                 myobj=eval('('+myobj+')');vartmpNode=newYAHOO.widget.TextNode(myobj, node,true);
             oTextNodeMap[tmpNode.labelElId]=tmpNode;
             ds_child=AjaxForTree.GetChildNode(TreeNodeId,treeId).value;if(ds_child!=null&&ds_child.Tables!=null&&ds_child.Tables[0].Rows.length!=0)
             {//alert(ds_child.Tables[0].Rows.length);tmpNode.setDynamicLoad(loadDataForNode);
             }  
          }
          
        }
       
        
     
        
    }//Add an onDOMReady handler to build the tree when the document is ready//YAHOO.util.Event.onDOMReady(treeInit);functionloadDataForNode(node, onCompleteCallback) {

buildChildNodeTree(node,treeId);
     onCompleteCallback();   
    }/*The YAHOO.widget.TextNode instance whose "contextmenu" 
     DOM event triggered the display of the 
     ContextMenu instance.*/varoCurrentTextNode=null;/*Adds a new TextNode as a child of the TextNode instance 
     that was the target of the "contextmenu" event that 
     triggered the display of the ContextMenu instance.*/functionaddNode() {varsLabel=window.prompt("请为新建立的节点输入名称:","");varrtn=CheckIsValid(sLabel);if(!rtn)
    {
      alert('您输入的内容中含有非法字符，这里只允许输入字母或数字！');return;
    }if(sLabel&&sLabel.length>0) {varnodeId=oCurrentTextNode.data.id;varres=AjaxForTree.AddTreeNode(nodeId,sLabel,treeId).value;//alert(res);treeInit();
       
    }

}/*Edits the label of the TextNode that was the target of the
     "contextmenu" event that triggered the display of the 
     ContextMenu instance.*/functioneditNodeLabel() {if(oCurrentTextNode.data.id==1)
    {
        alert('根节点不能编辑！');return;
    }varsLabel=window.prompt("请为当前的节点输入新的名称:", oCurrentTextNode.getLabelEl().innerHTML);varrtn=CheckIsValid(sLabel);if(!rtn)
    {
      alert('您输入的内容中含有非法字符，这里只允许输入字母或数字！');return;
    }if(sLabel&&sLabel.length>0) {varnodeId=oCurrentTextNode.data.id;varres=AjaxForTree.EditTreeNode(nodeId,sLabel).value;
        treeInit();
    }

}/*Deletes the TextNode that was the target of the "contextmenu"
    event that triggered the display of the ContextMenu instance.*/functiondeleteNode() {varisTrue=window.confirm("您确认删除这个节点吗？");if(isTrue)
        {if(oCurrentTextNode.data.id==1)
            {
                alert('根节点不能删除！');return;
            }varnodeId=oCurrentTextNode.data.id;varres=AjaxForTree.DelTreeNode(nodeId).value;
            treeInit();
        }
        
}/*"contextmenu" event handler for the element(s) that 
    triggered the display of the ContextMenu instance - used
    to set a reference to the TextNode instance that triggered
    the display of the ContextMenu instance.*/functiononTriggerContextMenu(p_oEvent) {functiongetTextNodeFromEventTarget(p_oTarget) {if(p_oTarget.tagName.toUpperCase()=="A"&&p_oTarget.className=="ygtvlabel") {returnoTextNodeMap[p_oTarget.id];

}else{if(p_oTarget.parentNode&&p_oTarget.parentNode.nodeType==1) {returngetTextNodeFromEventTarget(p_oTarget.parentNode);
            
            }
        
        }
    
    }varoTextNode=getTextNodeFromEventTarget(this.contextEventTarget);if(oTextNode) {

oCurrentTextNode=oTextNode;

}else{//Cancel the display of the ContextMenu instance.this.cancel();
        
    }

}varoContextMenu=newYAHOO.widget.ContextMenu("mytreecontextmenu", {
                                                    trigger:"treeDiv1",
                                                    lazyload:true, 
                                                    itemdata: [
                                                        { text:"增加子节点", onclick: { fn: addNode } },
                                                        { text:"编辑当前节点", onclick: { fn: editNodeLabel } },
                                                        { text:"删除当前节点", onclick: { fn: deleteNode } }
                                                    ] });

oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);</script>