【原创】使用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>

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