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

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

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;' ο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>