asp.net 樹形目錄
關鍵詞： TreeView
TreeView使用集錦 選擇自 hgknight 的 Blog
關鍵字 TreeView
出處
原來在論壇裡發過專題文章，隻是由于文章丢失原因，有些問題找不到了，同時這次也補充了一些，發到文檔區以友善查詢吧
原貼
http://expert.csdn.net/Expert/topic/1525/1525202.xml
1.下載下傳位址
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp
下載下傳後是字尾為bat的版本
(1)bulid.将bulid.bat的路徑指向csc.exe所在路徑,生成Microsoft.Web.UI.WebControls.dll。
(2)在wwwroot下建立空目錄webctrl_client/1_0。
(3)将build/Runtime下的檔案拷至webctrl_client/1_0下。
(4)選擇工具箱的自定義工具箱，添加Microsoft.Web.UI.WebControls.dll。
有些麻煩
但如果你能找到字尾是msi的自動安裝版本，直接下一步就行（我一直用這個版本，hoho）
安裝後，通過“自定義工具箱”->“.net架構元件”把TreeView添加到工具箱裡
2.運作時無法顯示
一般是TreeView的版本問題，最好下載下傳英文版自動安裝版本重新安裝，安裝前應該先到添加删除程式裡卸掉原版本
3.顯示格式出錯（非樹狀顯示）
TreeView要求用戶端浏覽器版本為IE5.5及以上，最好要求用戶端更新為IE6.0
4.架構裡使用TreeView
設定NavigateUrl、Target屬性，可更新另外的Frame
5.找不到TreeNode類
使用TreeView，最好添加namespace：using Microsoft.Web.UI.WebControls;
6.周遊TreeView節點(遞歸算法)
private void Page_Load( object sender, System.EventArgs e)
... {
GetAllNodeText(TreeView1.Nodes);
}
void GetAllNodeText(TreeNodeCollection tnc)
... {
foreach(TreeNode node in tnc)
...{
if(node.Nodes.Count!=0)
GetAllNodeText(node.Nodes);
Response.Write(node.Text + " ");
}
}
7.得到node結點的父節點
TreeNode pnode;
if (node.Parent is TreeNode)
pnode = (TreeNode)node.Parent;
else
// node is root node
8.修改TreeView樣式（示例）
< iewc:TreeView id ="TreeView1" runat ="server" HoverStyle ="color:blue;background:#00ffCC;" DefaultStyle ="background:red;color:yellow;" SelectedStyle ="color:red;background:#00ff00;" >
用代碼：
TreeView1.DefaultStyle["font-size"] = "20pt";
9.展開時不送出，改變選擇節點時才送出
将autopostback設定成false;
在body裡添加 <body οnlοad="initTree()">
然後在PageLoad裡寫：
string strTreeName = " TreeView1 " ;
string strRef = Page.GetPostBackEventReference(TreeView1);
string strScript = " <script language="JavaScript"> " + " <!-- " + " function initTree() { " + " " + strTreeName + " .onSelectedIndexChange = function() { " + " if (event.oldTreeNodeIndex !=
event .newTreeNodeIndex) " + " this .queueEvent( ' onselectedindexchange ' , event .oldTreeNodeIndex + ' , ' + event .newTreeNodeIndex); " + " window.setTimeout( ' " + strRef.Replace(" '" , " / ' ") + " ' , 0 , ' JavaScript ' ); " + " } " + " } " + " // --> " + "</script>";
Page.RegisterClientScriptBlock( " InitTree " ,strScript );
這樣就隻有你點選的節點更改的時候才送出！
10.TreeView結合XML
把XML檔案設定為如下格式，然後直接設定TreeNodeSrc為該XML檔案就行
<? xml version="1.0" encoding="GB2312" ?>
< TREENODES >
< TREENODE TEXT ="node0" EXPANDED ="true" >
< TREENODE TEXT ="node1" />
< TREENODE TEXT ="node2" />
</ TREENODE >
< TREENODE TEXT ="node3" NavigateURL ="3.aspx" />
</ TREENODES >
或者用代碼
TreeView1.TreeNodeSrc="a.xml";
TreeView1.DataBind();
用戶端控制TreeView
http://expert.csdn.net/Expert/topic/1382/1382892.xml
1 .設定所選節點，如選中第二個節點
function SetSelNode()
... {
TreeView1.selectedNodeIndex="1";
}
2 .得到所選節點的Text，ID或NodeData
function GetAttribute()
... {
alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"));
}
替換Text為ID或NodeData，可分别得到所選節點的ID或NodeData
3 .修改節點屬性，如修改第一個節點的Text
function ModifyNode()
... {
var node=TreeView1.getTreeNode("0");
node.setAttribute("Text","hgknight");
}
4 .得到點選節點
function TreeView1.onclick()
... {
alert(TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("Text"));
}
5 .添加節點
function AddNode()
... {
var node=TreeView1.createTreeNode();
node.setAttribute("Text","hgknight");
TreeView1.add(node);
}
6.js周遊所有節點
var AllRootNode = new Array();
AllRootNode = TreeView1.getChildren();
AlertNode(AllRootNode);
function AlertNode(NodeArray)
... {
if(parseInt(NodeArray.length)==0)
return;
else
...{
for(i=0;i<NodeArray.length;i++)
...{
var cNode;
cNode=NodeArray[i];
alert(cNode.getAttribute("Text"));
if(parseInt(cNode.getChildren().length)!=0)
AlertNode(cNode.getChildren());
}
}
}
--------------------------------------------------------------------------------
兩個用戶端操作TreeView節點CheckBox的小例子 選擇自 hgknight 的 Blog
關鍵字 TreeView CheckBox javascript
第一個例子是當取消或選中節點選中狀态時，子節點也做相應的取消或選中變化
需要注意的是如果要初始設定TreeNode為選中狀态，隻能在用戶端設定。如果在伺服器端設定TreeNode為選中狀态，則在用戶端使用getAttribute("Checked")，得到的值永遠是true。
<% ... @ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
< HTML >
< HEAD >
< script language ="C#" runat ="server" > ...
private void Page_Load(object sender, System.EventArgs e)
...{
TreeView1.Attributes.Add("oncheck","tree_oncheck(this)");
}
</ script >
< script language ="javascript" > ...
<!--
//初始化選中節點
function initchecknode()
...{
var node=TreeView1.getTreeNode("1");
node.setAttribute("Checked","true");
setcheck(node,"true");
FindCheckedFromNode(TreeView1);
}
//oncheck事件
function tree_oncheck(tree)
...{
var node=tree.getTreeNode(tree.clickedNodeIndex);
var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");
setcheck(node,Pchecked);
document.all.checked.value="";
document.all.unchecked.value="";
FindCheckedFromNode(TreeView1);
}
//設定子節點選中
function setcheck(node,Pc)
...{
var i;
var ChildNode=new Array();
ChildNode=node.getChildren();
if(parseInt(ChildNode.length)==0)
return;
else
...{
for(i=0;i<ChildNode.length;i++)
...{
var cNode;
cNode=ChildNode[i];
if(parseInt(cNode.getChildren().length)!=0)
setcheck(cNode,Pc);
cNode.setAttribute("Checked",Pc);
}
}
}
//擷取所有節點狀态
function FindCheckedFromNode(node) ...{
var i = 0;
var nodes = new Array();
nodes = node.getChildren();
for (i = 0; i < nodes.length; i++) ...{
var cNode;
cNode=nodes[i];
if (cNode.getAttribute("Checked"))
AddChecked(cNode);
else
AddUnChecked(cNode);
if (parseInt(cNode.getChildren().length) != 0 ) ...{
FindCheckedFromNode(cNode);
}
}
}
//添加選中節點
function AddChecked(node) ...{
document.all.checked.value += node.getAttribute("NodeData");
document.all.checked.value += ',';
}
//添加未選中節點
function AddUnChecked(node) ...{
document.all.unchecked.value += node.getAttribute("NodeData");
document.all.unchecked.value += ',';
}
//-->
</ script >
</ HEAD >
< body onload ="initchecknode()" >
< iewc:TreeView id ="TreeView1" runat ="server" ExpandLevel ="5" >
< iewc:TreeNode NodeData ="0" CheckBox ="True" Text ="Node0" Expanded ="True" >
< iewc:TreeNode NodeData ="1" CheckBox ="True" Text ="Node1" Expanded ="True" ></ iewc:TreeNode >
< iewc:TreeNode NodeData ="2" CheckBox ="True" Text ="Node2" Expanded ="True" >
< iewc:TreeNode NodeData ="3" CheckBox ="True" Text ="Node3" Expanded ="True" >
< iewc:TreeNode NodeData ="4" CheckBox ="True" Text ="Node4"
Expanded ="True" ></ iewc:TreeNode >
</ iewc:TreeNode >
</ iewc:TreeNode >
</ iewc:TreeNode >
< iewc:TreeNode NodeData ="5" CheckBox ="True" Text ="Node5" Expanded ="True" >
< iewc:TreeNode NodeData ="6" CheckBox ="True" Text ="Node6" Expanded ="True" ></ iewc:TreeNode >
</ iewc:TreeNode >
< iewc:TreeNode NodeData ="7" CheckBox ="True" Text ="Node7" Expanded ="True" >
< iewc:TreeNode NodeData ="8" CheckBox ="True" Text ="Node8" Expanded ="True" >
< iewc:TreeNode NodeData ="9" CheckBox ="True" Text ="Node9"
Expanded ="True" ></ iewc:TreeNode >
</ iewc:TreeNode >
</ iewc:TreeNode >
</ iewc:TreeView >< P >
< TABLE id ="Table1" cellSpacing ="1" cellPadding ="1" width ="300" border ="1" >
< TR >
< TD >
< asp:Label id ="Label1" runat ="server" > checked </ asp:Label ></ TD >
< TD >
< INPUT id ="checked" type ="text" size ="32" ></ TD >
</ TR >
< TR >
< TD >
< asp:Label id ="Label2" runat ="server" > unchecked </ asp:Label ></ TD >
< TD >< INPUT id ="unchecked" type ="text" size ="32" ></ TD >
</ TR >
</ TABLE >
< br >
</ P >
</ body >
</ HTML >
第二個例子是關于如何在伺服器端得到用戶端設定後的節點選中狀态
<% ... @ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls,
Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<HTML>
<HEAD>
<script language="C#" runat="server">
private void Button1_Click(object sender, System.EventArgs e)
{
Response.Write(TreeView1.Nodes[0].Checked);
}
</script>
<script language="javascript">
function set_check()
{
var nodeindex = "0";
var node=TreeView1.getTreeNode(nodeindex);
node.setAttribute("Checked","True");
TreeView1.queueEvent('oncheck', nodeindex);
}
</script>
</HEAD>
<body>
<form id="TestTree" method="post" runat="server">
<iewc:TreeView id="TreeView1" runat="server">
<iewc:TreeNode CheckBox="True" Text="Node0"></iewc:TreeNode>
</iewc:TreeView>
<br>
<input type="button" value="set check" onclick="set_check()">
<br>
<asp:Button id="Button1" runat="server" Text="submit" OnClick="Button1_Click"></asp:Button>
</form>
</body>
</HTML>