【原创】使用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;' ο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 " ;    }         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>