使用yahoo雅虎js库（YUI）建立无刷新的N级树（可添加删除节点）

1、首先你要去下面地址下载yahoo类库     http://developer.yahoo.com/yui/     2。5版本的 8。84M，你可以不全用，只用树的 2、然后需要把yui/build/treeview/文件夹下面的文件复制到你的工程 3、需要引用下面的js 所有的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代码

  <div class="yui-skin-sam">                                         <div id="treeDiv1">                                         </div>                                     </div> <script type="text/javascript">    var channelId=0;    var treeId=0;    function LoadChannelTree(obj)    {       channelId=obj.value;       if (channelId!=0)       {           var ds_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;' onclick='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";    }        function LoadNodeContent(nodeId)    {          var param="NodeId=" + nodeId;          ShowContentA("/controls/Tag/TagListForTree.ashx",param,document.getElementById("NodeContent"),null);    }     function initChannelTree()     {          var res=AjaxForTree.CreateTree(channelId).value;          if(res!=-1)          {             treeId=res;             treeInit();          }          else          {             document.getElementById("treeDiv1").innerHTML="树创建失败！";          }     }          //global variable to allow console inspection of tree:     var tree;     var currentTreeNodeId;     var oTextNodeMap = {};       function treeInit() {                 tree = new YAHOO.widget.TreeView("treeDiv1");                         var myobj="{label:'所有',id:'1'}";                myobj=eval('('+myobj+')');             var rootNode = new YAHOO.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) {                  var nodeId=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();        }          function buildChildNodeTree( node )     {         var nodeId=node.data.id;          //alert(nodeId);         var ds_Normal=AjaxForTree.GetChildNode(nodeId,treeId).value;         if(ds_Normal != null && typeof(ds_Normal) == "object" && ds_Normal.Tables != null)         {                  for(var i=0;i<ds_Normal.Tables[0].Rows.length;i++)           {              var TreeNodeId=ds_Normal.Tables[0].Rows[i].TreeNodeId;              var TreeNodeName=ds_Normal.Tables[0].Rows[i].TreeNodeName;              var myobj="{label:'" + TreeNodeName + "',id:'" + TreeNodeId + "'}";                  myobj=eval('('+myobj+')');              var tmpNode = new YAHOO.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);     function loadDataForNode(node, onCompleteCallback) {         buildChildNodeTree(node,treeId);      onCompleteCallback();        }             /*      The YAHOO.widget.TextNode instance whose "contextmenu"       DOM event triggered the display of the       ContextMenu instance. */ var oCurrentTextNode = 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. */ function addNode() {       var sLabel = window.prompt("请为新建立的节点输入名称: ", "");     var rtn=CheckIsValid(sLabel);     if (!rtn)     {       alert('您输入的内容中含有非法字符，这里只允许输入字母或数字！');       return;     }     if (sLabel && sLabel.length > 0) {                      var nodeId=oCurrentTextNode.data.id;        var res=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. */ function editNodeLabel() {     if (oCurrentTextNode.data.id==1)     {         alert('根节点不能编辑！');         return;     }         var sLabel = window.prompt("请为当前的节点输入新的名称: ", oCurrentTextNode.getLabelEl().innerHTML);     var rtn=CheckIsValid(sLabel);     if (!rtn)     {       alert('您输入的内容中含有非法字符，这里只允许输入字母或数字！');       return;     }     if (sLabel && sLabel.length > 0) {                  var nodeId=oCurrentTextNode.data.id;         var res=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. */ function deleteNode() {         var isTrue=window.confirm("您确认删除这个节点吗？");         if (isTrue)         {             if (oCurrentTextNode.data.id==1)             {                 alert('根节点不能删除！');                 return;             }             var nodeId=oCurrentTextNode.data.id;             var res=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. */ function onTriggerContextMenu(p_oEvent) {          function getTextNodeFromEventTarget(p_oTarget) {         if (p_oTarget.tagName.toUpperCase() == "A" &&                  p_oTarget.className == "ygtvlabel") {             return oTextNodeMap[p_oTarget.id];         }         else {             if (p_oTarget.parentNode &&                      p_oTarget.parentNode.nodeType == 1) {                 return getTextNodeFromEventTarget(p_oTarget.parentNode);                          }                  }          }            var oTextNode = getTextNodeFromEventTarget(this.contextEventTarget);             if (oTextNode) {         oCurrentTextNode = oTextNode;     }     else {              // Cancel the display of the ContextMenu instance.              this.cancel();              } }     var oContextMenu = new YAHOO.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>

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/goody9807/archive/2008/07/02/2605133.aspx