使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
来源:互联网 发布:js 删除dom 编辑:程序博客网 时间:2024/04/29 03:44
【原创】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
1、首先你要去下面地址下载yahoo类库
http://developer.yahoo.com/yui/
2。5版本的 8。84M,你可以不全用,只用树的
2、然后需要把yui/build/treeview/文件夹下面的文件复制到你的工程
3、需要引用下面的js
页面html代码
所有的js代码
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>
<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代码
<divclass="yui-skin-sam">
<divid="treeDiv1">
</div>
</div>
<divid="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[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>
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>
- 【原创】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
- 【转载】使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
- 使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
- Yahoo(雅虎)宣布停止开发YUI
- Yahoo(雅虎)宣布停止开发YUI
- 使用Yahoo.Yui.Compressor实现自己的Css&JS压缩工具
- asp.net treeview控件无刷新选择和删除节点(使用jquery)
- asp.net treeview控件无刷新选择和删除节点(使用jquery)
- javascript实现treeview无刷新添加和删除节点
- js 节点的添加 删除
- YAHOO的YUI框架
- 双向链表的建立,添加节点和删除节点(注意插入和删除要分三种情况)
- 双向链表的初始化,建立,添加节点和删除节点(注意插入和删除要分三种情况)
- Yahoo UI库 YUI
- YAHOO YUI工具库
- YAHOO YUI工具库
- Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现
- Asp.Net使用Yahoo.Yui.Compressor.dll压缩Js|Css
- android 线程间的通信
- linux系统时间修改及同步
- HDS修改用户信息
- 我有啦:有趣的物品签到社交应用
- 类的动态加载
- 使用yahoo雅虎js库(YUI)建立无刷新的N级树(可添加删除节点)
- flash垃圾回收机制,内存泄漏的常见情况及内存
- 论文参考文献的添加
- 简单工厂(Simple Factory)模式
- Java多线程同步调度技术:实战经典案例
- 【转】ARM Linux系统的时钟机制【修改版】
- 第九周上机任务4
- 工厂方法(Factory Method)模式
- rmi服务