`
chq_love_hate
  • 浏览: 6843 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

tree控件经验

    博客分类:
  • .net
阅读更多

引自:http://blog.csdn.net/szg3827/archive/2008/04/07/2256366.aspx

 

总结了一下用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/








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;
alert(cNode.getAttribute("Text"));
if(parseInt(cNode.getChildren().length)!=0)
AlertNode(cNode.getChildren());
}
}
}


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics