小菜一碟——来，一起搞定MS的TREE！

[jpyc]

总结了一下用MS的TREE控件的心得，大家一起来分享，当然，也不乏有其他网友的一些好的见解被录入其中，另有遗漏处请大家不吝赐教！

相信只要你仔细阅读了这篇小菜文，并参考一下提供的例程，一定能够掌握TREE的基本用法！

1.工欲善其事，必先利其器。首先保证装好你的组件,这个包安装非常方便，只要运行一下即可在VS.NET的工具栏中找到并使用了：
http://218.56.11.178:8018/FileDown.aspx?FID=4
也可以关注一下官方站是否有新版发布：
http://msdn.microsoft.com/downloads/samples/internet/default.asp?url=/Downloads/samples/Internet/ASP_DOT_NET_ServerControls/WebControls/default.asp

2.常用的几个属性和方法
～Index 获取树节点在树节点集合中的位置。
～Nodes 获取分配给树视图控件的树节点集合。
～Parent 获取或设置控件的父容器。
～SelectedNode 获取或设置当前在树视图控件中选定的树节点。
～ExpandAll 展开所有树节点。
～Checked 获取或设置一个值，用以指示树节点是否处于选中状态。
～Text 获取或设置在树节点标签中显示的文本。
～Expand 展开树节点。
～Clear 清空树
～Remove 从树视图控件中移除当前树节点。
以上由其他网友总结，补充：
～Height 控件的高度
～Width 控件的宽度
～BackColor 背景颜色
～BorderColor 边框颜色
～BorderStyle 边框样式
～BorderWidth 边框宽度
～CssClass 应用于该控件的CSS类名
～ExpandedImageUrl 展开时显示的节点图标
～ImageUrl 未选择或展开是显示的节点图标
～SelectedImageUrl 选中状态下显示的节点图标
～Indent 缩进距离，只有在ShowLines设为TRUE时才生效。
～ShowLines 是否显示层级连接线
～ShowPlus 是否显示+/-符号按钮
～ShowToolTip 在有父节点上显示工具提示（+/-号的使用展开/关闭）。
～AccseeKey 控件使用的键盘快捷键
～AutoSelect 为TRUE时，当用键盘移动节点时，自动选择新节点
～AutoPostBack 当改变状态时，自动回存
～Enabled 控制控件的启用状态
～EnableViewState 控件是否自动保存其状态以用于往返行程
～ExpandLevel 初始化控件是展开节点的层数
～SelectExpands 当选中一个接点时，是否自动展开该节点
～TabIndex TAB键次序
～Visible 控件是否可见

3.实用技巧：
1）怎样点击文字（不是+/-号）即可展开(收缩)子节点
将TREE的ShowToolTip 属性设为false即可。

2）当鼠标指到某父接点时，如何不显示显示“节点名：user +/- to expand/collapse”
将TREE的SelectExpands 属性设为TRUE即可。

3）不显示树型的问题
首先：控件包没装好，使用上边介绍的控件包装一下试试。
其次：TreeView要求客户端浏览器版本为IE5.5及以上，最好要求客户端升级为IE6.0

4）关于闪烁
将AutoPostBack属性设置为真，SelectedIndexChange才能被执行。不过这样的话刷新的很厉害。不要刷新的话，将AutoPostBack属性设置为FALSE.

5）如何实现用键盘上下左右键移动焦点时，自动选择新节点并执行新节点
将TREE的AutoSelect 属性设为TRUE即可。

6）不想显示+/-符号按钮怎么做？
将TREE的ShowPlus 属性设为False即可。

7)不想显示层级连接线怎么做？
将TREE的ShowLines 属性设为False即可。

8）如何设置节点旁的图标
～ExpandedImageUrl、ImageUrl、SelectedImageUrl这3个属性是控制图标的，选择自己喜欢的就OK了。

4.看看这个例子，对你一定有启发,是一棵无级树，不过在实际使用中可能会有些麻烦：
http://218.56.11.178:8018/FileDown.aspx?FID=246

5.这个论坛也使用了树（asp.net+C#+MSSQL 2000），并且代码开放，，如果觉得有参考价值，不妨装起来看看，其中还包含了其他一些常用的asp.net编程技巧,演示了TREE控件如何和数据库结合，动态显示库中的数据，这棵树只有两层，不过比较实用：
http://218.56.11.178:8018/FileDown.aspx?FID=212
其中：tree.aspx、tree.aspx.cs是TREE控件使用的主要部分。

论坛的实际应用演示地址，在这里：
http://expert.kaer.cn/

[jjstar]

mark

[famousun]

好贴
谢谢楼主

[lingyunfeipu]

THANKS!

[ldz112]

mark

[say1no2]

mark

[chuanzai]

关注……

[Bmonkey]

mark

[匆匆岁月]

mark一下：）

[webdiyer]

加精！

[delphizd]

顶，好东西！·

[asp_love]

鄙人也贡献一点。

treeview中的客户端脚本与服务端结合。没时间具体写说明。


private void ControlCheckBox(TreeView corTreeview,string strTvKey,System.Web.UI.Control control)
{
StringBuilder strBuilder = new StringBuilder();
strBuilder.Append("<SCRIPT FOR = " + corTreeview.ClientID + " EVENT = oncheck>");
strBuilder.Append("var oTreeNode = " + corTreeview.ClientID + ".getTreeNode(" + corTreeview.ClientID + ".clickedNodeIndex);");
strBuilder.Append("CheckControl(oTreeNode,'theFirstChecked','" + control.ClientID + "')");
strBuilder.Append("</script>");
Page.RegisterStartupScript(strTvKey, strBuilder.ToString());
}
/// <summary>
///
/// </summary>
/// <param name="corTreeview"></param>
/// <param name="strTvKey"></param>
private void Tree_Click(TreeView corTreeview, string strTvKey,System.Web.UI.Control control)
{
StringBuilder strBuilder = new StringBuilder();
strBuilder.Append("<SCRIPT FOR = " + corTreeview.ClientID + " EVENT = onselectedindexchange>");
strBuilder.Append("var oTreeNode = " + corTreeview.ClientID + ".getTreeNode(" + corTreeview.ClientID + ".clickedNodeIndex);");
strBuilder.Append("DisplayMsg1(oTreeNode,'" + control.ClientID + "','');");
strBuilder.Append("</script>");
Page.RegisterStartupScript(strTvKey, strBuilder.ToString());
}
/// <summary>
///
/// </summary>
/// <param name="corTreeview"></param>
/// <param name="strTvKey"></param>
private void Tree_Hover(TreeView corTreeview, string strTvKey)
{
StringBuilder strBuilder = new StringBuilder();
strBuilder.Append("<SCRIPT FOR = " + corTreeview.ClientID + " EVENT = onhover>");
strBuilder.Append("var oTreeNode = " + corTreeview.ClientID + ".getTreeNode(window.event.treeNodeIndex);");
strBuilder.Append("TreeHover(oTreeNode);");
strBuilder.Append("</script>");
Page.RegisterStartupScript(strTvKey, strBuilder.ToString());
}

private void InitTree(ParmArrayWithOP sqlOPParm)
{
columnClassDataGrid = new BitSoft.shishiGov.Data.columnClass();
BitSoft.shishiGov.BussinessRule.columnClassRule myColumnClassRule=new columnClassRule();
myColumnClassRule.selectByArray(columnClassDataGrid,sqlOPParm);
TreeView1.Nodes.Clear();
createTree(TreeView1.Nodes,"0");
}







<script language="javascript">
<!--


function CheckControl(oTreeNode,x,tbIDBox1,tbIDBox2)
{
if(x=="theFirstChecked")
document.getElementById(tbIDBox1).value = oTreeNode.getAttribute("ID") + "*" + oTreeNode.getNodeIndex();

var oChildNodes = new Array();
oChildNodes = oTreeNode.getChildren();

if (oChildNodes.length != 0 && oTreeNode.getAttribute("checked"))
{
for(var i=0; i<oChildNodes.length; i++)
{
oChildNodes[i].setAttribute("checked","true");
CheckControl(oChildNodes[i],"");
}
}
else if (oChildNodes.length != 0 && !oTreeNode.getAttribute("checked"))
{
for(var i=0; i<oChildNodes.length; i++)
{
oChildNodes[i].setAttribute("checked","false");
CheckControl(oChildNodes[i],"");
}
}


}




function DisplayMsg(oTreeNode)
{
//document.getElementById("tbTreeNodeMsg").value = oTreeNode.getAttribute("Text");
}
function TreeHover(oTreeNode)
{
DisplayMsg(oTreeNode);
}

function DisplayMsg1(oTreeNode, tbIDBox, tbNodeTextBox)
{
if (oTreeNode.getAttribute("ID").substring(0,2) != "DC")
{
document.getElementById(tbIDBox).value = oTreeNode.getAttribute("ID") + "*" + oTreeNode.getNodeIndex();
document.getElementById("czfalg").value ="Tree";
document.Form1.submit();
}
}
function selectAll(allcheck)
{
if (allcheck.checked)
{
document.getElementById("add").checked = true;
document.getElementById("modify").checked = true;
document.getElementById("delete").checked = true;
document.getElementById("browse").checked = true;
document.getElementById("deptpublic").checked = true;
document.getElementById("govpublic").checked = true;
document.getElementById("buildItem").checked = true;
}
}
function cancel(checkPower)
{
if (!checkPower.checked)
{
document.getElementById("allcheck").checked = false;
}
}




function choice(oTreeNode,tbIDBox)
{
document.getElementById("TextBox4").value="";
getIdByCheckTree(oTreeNode,tbIDBox); //取得选中的id，赋值给textbox4;
if (document.getElementById("TextBox4").value=="")
{
alert("请在页面上方的树形图中选择要调整的栏目!");
return false;
}

}



function getIdByCheckTree(oTreeNode,tbIDBox) //取得选中的id
{

//alert('ds;ksd;a');

if(oTreeNode.getAttribute("checked"))
{
document.getElementById("TextBox4").value+=oTreeNode.getAttribute("ID");
}
var oChildNodes=new Array();
oChildNodes = oTreeNode.getChildren();

if (oChildNodes.length != 0 && !oTreeNode.getAttribute("checked"))
{
for(var i=0; i<oChildNodes.length; i++)
{
if (oChildNodes[i].getAttribute("checked"))
{
document.getElementById("TextBox4").value+=oChildNodes[i].getAttribute("ID")+"*"+oChildNodes[i].getAttribute("Text")+"@";
continue;
}
getIdByCheckTree(oChildNodes[i],"");
}
}

}

[webdiyer]

怎么加不到精华区里去？？？

[emeibat]

mark 一下.

[xschenhao]

ding

[jpyc]

TreeView使用集锦 hgknight（原作）

原来在论坛里发过专题帖子，只是由于帖子丢失原因，有些问题找不到了，同时这次也补充了一些，发到文档区以方便查询吧
原贴
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 onload="initTree()">
然后在PageLoad里写：
string strTreeName = "TreeView1";
string strRef = Page.GetPostBackEventReference(TreeView1);
string strScript = "<script language=\"JavaScript\"> \n" + "<!-- \n" + " function initTree() { \n" +" " + strTreeName + ".onSelectedIndexChange = function() { \n" + "if (event.oldTreeNodeIndex !=
event.newTreeNodeIndex) \n" + "this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex); \n" + "window.setTimeout('" + strRef.Replace("'","\\'") + "', 0, 'JavaScript'); \n" + " } \n" + " } \n" + "// --> \n" + "</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());
}
}
}

[Azmore]

应该贴到文档里

[jpyc]

等讨论完毕，再整理归档。

[linyoung]

up

[xuyo]

good

[googoo5100]

en

bucuo