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