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

1、首先你要去下面地址下载yahoo类库
http://developer.yahoo.com/yui/
2。5版本的 8。84M，你可以不全用，只用树的
2、然后需要把yui/build/treeview/文件夹下面的文件复制到你的工程

3、需要引用下面的js

页面html代码

<divclass="yui-skin-sam">

<divid="treeDiv1">

</div>

所有的js代码

tree.subscribe("collapse",function(node) {

               });//Trees with TextNodes will fire an event for when the label is clicked:tree.subscribe("labelClick",function(node) {varnodeId=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();

}functionbuildChildNodeTree( node )
    {varnodeId=node.data.id;//alert(nodeId);vards_Normal=AjaxForTree.GetChildNode(nodeId,treeId).value;if(ds_Normal!=null&&typeof(ds_Normal)=="object"&&ds_Normal.Tables!=null)
        {for(vari=0;i<ds_Normal.Tables[0].Rows.length;i++)
          {varTreeNodeId=ds_Normal.Tables[0].Rows[i].TreeNodeId;varTreeNodeName=ds_Normal.Tables[0].Rows[i].TreeNodeName;varmyobj="{label:'"+TreeNodeName+"',id:'"+TreeNodeId+"'}";
                 myobj=eval('('+myobj+')');vartmpNode=newYAHOO.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);functionloadDataForNode(node, onCompleteCallback) {

buildChildNodeTree(node,treeId);
     onCompleteCallback();
    }/*The YAHOO.widget.TextNode instance whose "contextmenu"
     DOM event triggered the display of the
     ContextMenu instance.*/varoCurrentTextNode=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.*/functionaddNode() {varsLabel=window.prompt("请为新建立的节点输入名称:","");varrtn=CheckIsValid(sLabel);if(!rtn)
    {
      alert('您输入的内容中含有非法字符，这里只允许输入字母或数字！');return;
    }if(sLabel&&sLabel.length>0) {varnodeId=oCurrentTextNode.data.id;varres=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.*/functioneditNodeLabel() {if(oCurrentTextNode.data.id==1)
    {
        alert('根节点不能编辑！');return;
    }varsLabel=window.prompt("请为当前的节点输入新的名称:", oCurrentTextNode.getLabelEl().innerHTML);varrtn=CheckIsValid(sLabel);if(!rtn)
    {
      alert('您输入的内容中含有非法字符，这里只允许输入字母或数字！');return;
    }if(sLabel&&sLabel.length>0) {varnodeId=oCurrentTextNode.data.id;varres=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.*/functiondeleteNode() {varisTrue=window.confirm("您确认删除这个节点吗？");if(isTrue)
        {if(oCurrentTextNode.data.id==1)
            {
                alert('根节点不能删除！');return;
            }varnodeId=oCurrentTextNode.data.id;varres=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.*/functiononTriggerContextMenu(p_oEvent) {functiongetTextNodeFromEventTarget(p_oTarget) {if(p_oTarget.tagName.toUpperCase()=="A"&&p_oTarget.className=="ygtvlabel") {returnoTextNodeMap[p_oTarget.id];

}else{if(p_oTarget.parentNode&&p_oTarget.parentNode.nodeType==1) {returngetTextNodeFromEventTarget(p_oTarget.parentNode);

            }

        }

    }varoTextNode=getTextNodeFromEventTarget(this.contextEventTarget);if(oTextNode) {

oCurrentTextNode=oTextNode;

}else{//Cancel the display of the ContextMenu instance.this.cancel();

}

}varoContextMenu=newYAHOO.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>

转载于:https://www.cnblogs.com/guodapeng/archive/2008/03/25/1121096.html

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

【原创】使用yahoo雅虎js库（YUI）建立无刷新的N级树（可添加删除节点）
1.首先你要去下面地址下载yahoo类库 http://developer.yahoo.com/yui/ 2.5版本的 8.84M,你可以不全用,只用树的 2.然后需要把yui/bui ...
利用js实现table的无刷新静态内容过滤
最近,一直在学习前端方面的知识,看到网上有一些页面的table能够实现静态内容筛选,觉得这个东西有点意思,由于初学js就想试试. 我看了一些网上有关的案例http://www.freejs.ne ...
js动态添加删除节点
转载于:https://www.cnblogs.com/jiaobaobao/p/6762692.html
js向html中指定位置追加文本,JavaScript中如何添加文本节点？
在javascript中提供了很多操作DOM文档的方法,当然也包括创建一个节点,下面我们来看一下JavaScript如何创建一个创建一个文本节点(text). JavaScript中添加文本节点的方法 ...
android 无刷新好友,Android viewPage notifyDataSetChanged无刷新
转载 http://www.67tgb.com/?p=624 最近项目结束,搞了一次代码分享.其中一位同学分享了一下自己在解决问题过程中的一些心得体会,感觉受益匪浅.整理出来,分享给大家. 建议使用自 ...
Yahoo javascript 开源界面库YUI 和EXT
清清月儿整理 [yui][译]Yahoo!User Interface Libray 介绍 Yahoo! User Interface Library(简称yui) 是一个使用JavaScript编写 ...
猿人学题库第一题——无混淆js加密
猿人学题库第一题--无混淆js加密 1. 首先进入浏览器的开发者工具, 进入后直接查看请求,可以找到一个 json?page=1&count=14 的网址,查看response 就是 ...
目前国外流行的几个JS库.
今天嫌着没事,总结了一下目前国外的一些JS库,.不知道对大家有用不? 因为都是国外的站点,可能访问速度比较慢,耐心点. Ext:http://extjs.com/download jQuery:htt ...
MV* 框架与 DOM操作为主 JS库的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库与 MV* 框架的对比案例(MV* 框架与 DOM操作 JS库实例对比) 购物车页面 ...
贡献一个连jquery都觉的大的时候可以用的 js库
在一些很小的项目里,连用jquery都还觉的大的时候,你就可以用我的这个库了. 一个库或者框架,是应需求而生的,当你的项目实际上只需要简单的一个好用的选择器一个ajax 封装一个兼容的事件封装的时 ...

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

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

最新文章

热门文章