asp.net 树形目录

最新推荐文章于 2017-01-01 15:45:09 发布

supernym

最新推荐文章于 2017-01-01 15:45:09 发布

阅读量1.8k

点赞数

文章标签： asp.net function javascript server assembly button

asp.net 树形目录

关键词： TreeView

TreeView使用集锦     选择自 hgknight 的 Blog
关键字   TreeView
出处

原来在论坛里发过专题帖子，只是由于帖子丢失原因，有些问题找不到了，同时这次也补充了一些，发到文档区以方便查询吧
原贴
http://expert.youkuaiyun.com/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.youkuaiyun.com/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 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: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>

private void Button1_Click(object sender, System.EventArgs e)

{

Response.Write(TreeView1.Nodes[0].Checked);

}

</script>

function set_check()

{

var nodeindex = "0";

var node=TreeView1.getTreeNode(nodeindex);

node.setAttribute("Checked","True");

TreeView1.queueEvent('oncheck', nodeindex);

}

</script>

</HEAD>

<body>

<iewc:TreeView id="TreeView1" runat="server">

<iewc:TreeNode CheckBox="True" Text="Node0"></iewc:TreeNode>

</iewc:TreeView>

<br>

<br>

<asp:Button id="Button1" runat="server" Text="submit" OnClick="Button1_Click"></asp:Button>

</form>

</body>

</HTML>