【转载】使用yahoo雅虎js库(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
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点) <link rel="stylesheet" type="text/css" href="/yui/build/treeview/assets/skins/sam/treeview.css" />
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
    <link rel="stylesheet" type="text/css" href="/yui/build/menu/assets/skins/sam/menu.css">
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<script type="text/javascript" src="/yui/build/yahoo/yahoo.js"></script>
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)

【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<script type="text/javascript" src="/yui/build/event/event.js"></script>
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)

【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<script type="text/javascript" src="/yui/build/treeview/treeview.js"></script>
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)

【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)   
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<!-- Dependency source files -->
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<script type="text/javascript" src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)

【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<script type="text/javascript" src="/yui/build/container/container_core.js"></script>
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)

【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<!-- Menu source file -->
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)    
<script type="text/javascript" src="/yui/build/menu/menu.js"></script>

页面html代码

【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)  <div class="yui-skin-sam">
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)                                        
<div id="treeDiv1">
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)                                        
</div>
【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)                                    
</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>

 

QQ:498977166

http://szw.cnblogs.com/
研究、探讨.NET开发
转载请注明出处和作者,谢谢!

 

【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
Senparc官方教程《微信开发深度解析:微信公众号、小程序高效开发秘籍》,耗时2年精心打造的微信开发权威教程,点击这里,购买正版

 

上一篇:ASP.NET MVC Preview3 bug 及期望 [集]


下一篇:关于ASP.NET MVC P5中CheckBox的HtmlHelper方法的bug。