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

  
   


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

   


   
< 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 = " 该频道下还没有TAG树,请点击这里创建TAG树。 " ;
          }
        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>

你可能感兴趣的:(YUI,yahoo,技术类,N级树)