http://ttyp.cnblogs.com/archive/2005/06/01/165621.html
http://community.youkuaiyun.com/Expert/topic/4300/4300558.xml?temp=.7716028
在web.config加入以下节







注意:configSections一定要放在第一个子节最前面.
剪切默认网站的webctrl_client目录到虚拟目录web/treepath/下,运行程序,树型界面出现了,只是前面的加减号出现问题,再右键查看WEB代码,发现SystemImagesPath属性还是指到webctrl_client目录下,看了SystemImagesPath的代码,把treeview控件的SystemImagesPath设置为空,再次运行程序,OK!全部通过,treeview的图片目录再也不需要依赖默认网站的图片目录了,打包也变的方便了





















































































































































































主要后台代码:





















































































































































































3.客户端操作TreeView带CheckBox的好例子(2)--选择子节点后自动选择父节点;取消子节点后根据情况的递归取消父节点。
把上面的tree_oncheck()修改一下,然后增加两个方法setParent()和checkBrother(),代码如下:




























































































4.TreeView节点的精确定位问题(通过NodeData来定位)










































































5.asp.net 2.0里TreeView已经集成了,不需要单独安装了,但现在偶觉得,他只是换汤不换药,特别是在节点定位,和客户端操作上这两个关键问题上没啥改进.(偶没用过只是看了它的介绍.)
ASP.NET 2.0 的TreeView 控件介绍(转载)
TreeView客户端操作在这里啊~~~~~~~~~~~~
http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/behaviors/library/TreeView/TreeView.asp
http://www.microsoft.com/china/msdn/archives/library/workshop/webcontrols/overview/treeview.asp
1.下面的为转载:
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/"> /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("'","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();
11.请问,在页面加载时,如何选中Treeview某一节点?
index属性,是一个如1.1.0的东西,解析这个字符串,然后定位
private void ExpandNode(string selID)//selID like 1.1.0
{
char[] mySplit = new char[]{'.'};
string [] nodeArray = selID.Split(mySplit);
TreeNode myNode = null;
for(int i=0;i<nodeArray.Length;i++)
{
if(i==0)
myNode = tree.Nodes[Convert.ToInt32(nodeArray[i])];
else
myNode = myNode.Nodes[Convert.ToInt32(nodeArray[i])];
myNode.Expanded = true;
tree.SelectedNodeIndex = myNode.GetNodeIndex();
}
}
客户端控制TreeView
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());
}
}
}
--------------------------------------------------------------------------------------------------------------------------------------------------------
<iewc:treeview id="TreeView1" runat="server" wilth="100%" AutoSelect="True" BorderWidth="2px" Target="main"
ExpandedImageUrl="images/fopen.gif" SelectedImageUrl="images/bookmark.gif" ImageUrl="images/fclose.gif"
BorderColor="AliceBlue" BackColor="#ffffcc" SystemImagesPath="../webctrl_client/1_0/treeimages/"
SelectExpands="True" ExpandLevel="1"></iewc:treeview>
-----------------
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
namespace aspnetc.admin
{
/// <summary>
/// left 的摘要说明。
/// </summary>
public class left : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label lblName;
protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
protected System.Web.UI.WebControls.HyperLink hlkLogOut;
protected System.Web.UI.WebControls.Label Label2;
ClassConn connE = new ClassConn();
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if (!IsPostBack)
{
lblName.Text=Session["userName"]!=null ? Session["userName"].ToString():string.Empty;
try
{
//添加命令,从数据库中得到数据
SqlDataAdapter ada = new SqlDataAdapter("select * from menues where state=1 order by sortIndex",connE.GetConn());
DataSet ds=new DataSet();
ada.Fill(ds);
this.ViewState["ds"]=ds;
}
catch (Exception ex)
{
throw (ex);
}
finally
{
connE.Close();
}
//调用递归函数,完成树形结构的生成
AddTree(0, (TreeNode)null);
}
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
/// <summary>
/// 递归添加树的节点
/// </summary>
/// <param name="ParentID"></param>
/// <param name="pNode"></param>
public void AddTree(int ParentID,TreeNode pNode)
{
DataSet ds=(DataSet) this.ViewState["ds"];
DataView dvTree = new DataView(ds.Tables[0]);
//过滤ParentID,得到当前的所有子节点
dvTree.RowFilter = "[parentId] = " + ParentID;
foreach(DataRowView Row in dvTree)
{
TreeNode Node=new TreeNode() ;
if(pNode == null)
{ //添加根节点
Node.Text = Row["name"].ToString();
TreeView1.Nodes.Add(Node);
//Node.Expanded=false;//是否展开若设置为true 则ExpandLevel="1"无效
AddTree(Int32.Parse(Row["ID"].ToString()), Node); //再次递归
}
else
{
if(4>3)
{
//添加当前节点的子节点
Node.Text = Row["name"].ToString();
//Node.Target = mainFrame;
Node.NavigateUrl = Row["url"].ToString();
pNode.Nodes.Add(Node);
//Node.Expanded = false;
AddTree(Int32.Parse(Row["ID"].ToString()),Node); //再次递归
}
}
}
}
}
}
----------------------------------------------------------------------------------------------------------------------------------------
http://www.microsoft.com/china/MSDN/library/archives/library/DNAspp/html/aspnet-usingtreeviewieWebcontrol.asp
IEWebControl TreeView右键菜单实例 选择自 hgknight 的 Blog
一个IEWebControl TreeView右键菜单的例子,实现了添加、修改和删除功能,复制即可运行
更多TreeView的客户端操作参见
http://www.youkuaiyun.com/Develop/read_article.asp?id=22100
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<HTML>
<HEAD>
<title>TreeView控件右键菜单</title>
<style>
<!--
.skin
{
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems
{
padding-left:15px;
padding-right:10px;
}
-->
</style>
</HEAD>
<body οnclick="hideMenu()">
<form id="TreeView" method="post" runat="server">
<iewc:TreeView id="TreeView1" runat="server" ExpandLevel="3" HoverStyle="color:blue;background:#ffff00;">
<iewc:TreeNode Text="Node0" Expanded="True">
<iewc:TreeNode Text="Node3">
<iewc:TreeNode Text="Node5"></iewc:TreeNode>
<iewc:TreeNode Text="Node6"></iewc:TreeNode>
</iewc:TreeNode>
<iewc:TreeNode Text="Node4"></iewc:TreeNode>
</iewc:TreeNode>
<iewc:TreeNode Text="Node1" Expanded="True">
<iewc:TreeNode Text="Node7">
<iewc:TreeNode Text="Node8"></iewc:TreeNode>
</iewc:TreeNode>
</iewc:TreeNode>
<iewc:TreeNode Text="Node2" Expanded="True">
<iewc:TreeNode Text="Node9"></iewc:TreeNode>
<iewc:TreeNode Text="Node10">
<iewc:TreeNode Text="Node11"></iewc:TreeNode>
<iewc:TreeNode Text="Node12"></iewc:TreeNode>
</iewc:TreeNode>
</iewc:TreeNode>
</iewc:TreeView>
<div id="popupMenu" class="skin" onMouseover="highlighItem()" onMouseout="lowlightItem()" onClick="clickItem()">
<div class="menuitems" func="add">添加</div>
<hr>
<div class="menuitems" func="delete">删除</div>
<div class="menuitems" func="modify">修改</div>
</div>
</form>
<script language="javascript">
var menuskin = "skin";
var node = null;
function hideMenu()
{
popupMenu.style.visibility = "hidden";
}
function highlighItem()
{
if (event.srcElement.className == "menuitems")
{
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
}
}
function lowlightItem()
{
if (event.srcElement.className == "menuitems")
{
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
function clickItem()
{
if (event.srcElement.className == "menuitems")
{
if(event.srcElement.getAttribute("func") == "add" && node != null)
{
var newNode=TreeView1.createTreeNode();
newNode.setAttribute("Text","new Node");
node.add(newNode);
}
else if (event.srcElement.getAttribute("func") == "delete" && node != null)
{
node.remove();
}
else if (event.srcElement.getAttribute("func") == "modify" && node != null)
{
node.setAttribute("Text","hgknight");
}
}
}
function TreeView1.oncontextmenu()
{
var nodeindex = event.treeNodeIndex;
if (typeof(nodeindex) == "undefined")
{
node = null;
return;
}
node = TreeView1.getTreeNode(nodeindex);
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge <popupMenu.offsetWidth)
{
popupMenu.style.left = document.body.scrollLeft + event.clientX - popupMenu.offsetWidth;
}
else
{
popupMenu.style.left = document.body.scrollLeft + event.clientX;
}
if (bottomedge <popupMenu.offsetHeight)
{
popupMenu.style.top = document.body.scrollTop + event.clientY - popupMenu.offsetHeight;
}
else
{
popupMenu.style.top = document.body.scrollTop + event.clientY;
}
popupMenu.style.visibility = "visible";
return false;
}
</script>
</body>
</HTML>
-----------------------------------------------------------------------------
服务器端选择一节点下所有子节点(先选择再CHECK,麻烦)
private void TreeView1_Check(object sender, Microsoft.Web.UI.WebControls.TreeViewClickEventArgs e)
{
Microsoft.Web.UI.WebControls.TreeNode node=TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex.ToString());
//connE.Alert(node.NodeData.ToString(),Page);
SetAllNodeData(node.Nodes);
}
{
foreach(TreeNode node in tnc)
{
if(node.Nodes.Count!=0)
{
SetAllNodeData(node.Nodes);
}
if (node.Checked)
{
node.Checked = false;
}
else
{
node.Checked = true;
}
}
}
Microsfot.Web.UI.WebControls.TreeView JavaScript控制方法研究
http://caidaoli.cnblogs.com/archive/2005/02/23/108317.html?Pending=true#Post
-
被选择的节点的索引:
tree.selectedNodeIndex -
被单击的节点的索引:
tree.clickedNodeIndex -
获取一个节点:
tree.getTreeNode(nodeIndex) -
在根节点下增加一个子节点:
var tree = document.all['TreeView1'];
var node = tree.createTreeNode() ;
tree.add(node);
node.setAttribute( "text", "aaaa"); -
在当前节点下增加一个子节点:
var tree = document.all['TreeView1'];
var node = tree.createTreeNode() ;
var parentNode = tree.getTreeNode( tree.clickedNodeIndex);
parentNode.add(node);
node.setAttribute( "text", "aaaa"); - 通过XML文件来增加子节点:
node.setAttribute("NavigateUrl","xxx");
node.databind(); - 动态增加子节点后自动展开:
node.setAttribute('expanded', 'true');//MS提供的HTC中需要修改一个地方,否则就会产生一个异常 - 获取节点的属性:
node.getAttribute("xxx") - 设置节点的属性 :
node.setAttribute('xxx', 'xxxx');
-
- 常用属性列表:
- 属性
值 含义 CheckBox True False 是否有选择框 checked True False 选择框是否被选中 Expanded True False 是否展开 ImageURL 正常状态下左边的图标 SelectedImageUrl 当节点被选择时左边的图标 ExpandedImageUrl 当节点被展开后左边的图标 Target 目标框架 navigateurl 目标URL type 节点的类型 childtype 子节点的类型 Text 节点显示的文本 innerText innerHTML defaultstyle 默认的风格 hoverstyle 当鼠标移到节点的上面时的风格 selectedstyle 当节点被选择时的风格 treenodesrc - 获取父节点:
node.getParent() - 获取子节点:
node.getChildren() - 判断节点是否有子节点
node.getChildren().length > 0 - 响应onselectedindexchange事件:
var tree = document.all["tvMain"];
tree.attachEvent("onselectedindexchange", SelectedIndexChange);
3.客户端操作TreeView带CheckBox的好例子(1)--选择 /取消父节点后其所有子节点自动选择 /取消。不过里面有点小问题要注意:
(1)就是如何初始化已经选择的节点:注意要从客户端初始化的(把选择的节点放在客户端一个隐藏域里通过JS初始化).如果你在服务器端初始化了将无法在客户端修改它的状态.
(2)如何获得客户端设置的节点:在客户端改变了选择状态(node.setAtrribute("check","ture"))后,通过服务器端是无法获得选择的值的,也只能在客户端获得它(通过一个input type="hiiden" runat="server"来保存选择的值).
上面两个问题都是参考了下面的代码完成的.
两个客户端操作TreeView节点CheckBox的小例子 (转江雨.net)(自动选择子节点)
下面是修改后详细代码: