拼吾爱程序人生

首页 » 其他编程 » javascript » 使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
cobra - 2008-3-10 12:23:00
文/goody9807  出处/博客园

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.TreeNodeId;
            var TreeNodeName=ds_Normal.Tables[0].Rows.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>

 您可能对 [javascript] 的这些文章也感兴趣:

简易而又灵活的Javascript拖拽框架(四)
用javascrpt实现淘宝首页的间隔性滚动效果
在IE中使用JavaScript
JavaScript页面刷新与弹出窗口问题解决方法
javascript获得Request变量值
用百度实现站内搜索的Javascript代码
js用于树型结构级联选择
图片自动缩小的js代码,用以防止图片撑破页面
很酷的超链接提示文字效果
JavaScript语言概况
1
查看完整版本: 使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
Modify by pin5i DZNT_ExpandPackage 2.1.3237 2007-2008 pin5i.com
  Total Unique Visitors: