YUI 建立无刷新的N级树

转自:http://www.cnblogs.com/goody9807/archive/2008/03/10/1086475.html

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代码

   < div  class ="yui-skin-sam" >
                                         < div  id ="treeDiv1" >
                                         </ div >
                                     </ div >

所有的js代码

  < 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>