2.包括TreeView的asp.net程序的打包問(wèn)題:
http://ttyp.cnblogs.com/archive/2005/06/01/165621.html
http://community.csdn.net/Expert/topic/4300/4300558.xml?temp=.7716028
在web.config加入以下節(jié)







注意:configSections一定要放在第一個(gè)子節(jié)最前面.
剪切默認(rèn)網(wǎng)站的webctrl_client目錄到虛擬目錄web/treepath/下,運(yùn)行程序,
3.客戶端操作TreeView帶CheckBox的好例子(1)--選擇 /取消父節(jié)點(diǎn)后其所有子節(jié)點(diǎn)自動(dòng)選擇 /取消。不過(guò)里面有點(diǎn)小問(wèn)題要注意:
(1)就是如何初始化已經(jīng)選擇的節(jié)點(diǎn):注意要從客戶端初始化的(把選擇的節(jié)點(diǎn)放在客戶端一個(gè)隱藏域里通過(guò)JS初始化).如果你在服務(wù)器端初始化了將無(wú)法在客戶端修改它的狀態(tài).
(2)
如何獲得客戶端設(shè)置的節(jié)點(diǎn):在客戶端改變了選擇狀態(tài)(node.setAtrribute("check","ture"))后,通過(guò)服務(wù)器端是無(wú)法獲得
選擇的值的,也只能在客戶端獲得它(通過(guò)一個(gè)input type="hiiden" runat="server"來(lái)保存選擇的值).
上面兩個(gè)問(wèn)題都是參考了下面的代碼完成的.
兩個(gè)客戶端操作TreeView節(jié)點(diǎn)CheckBox的小例子 (轉(zhuǎn)江雨.net)(自動(dòng)選擇子節(jié)點(diǎn))
下面是修改后詳細(xì)代碼:




































































































































































主要后臺(tái)代碼:






































































































































































3.客戶端操作TreeView帶CheckBox的好例子(2)--選擇子節(jié)點(diǎn)后自動(dòng)選擇父節(jié)點(diǎn);取消子節(jié)點(diǎn)后根據(jù)情況的遞歸取消父節(jié)點(diǎn)。
把上面的tree_oncheck()修改一下,然后增加兩個(gè)方法setParent()和checkBrother(),代碼如下:















































































4.TreeView節(jié)點(diǎn)的精確定位問(wèn)題(通過(guò)NodeData來(lái)定位)

































360docimg_503_
360docimg_504_ FindInTree2(tn,strNodeData);
360docimg_505_ }
360docimg_506_ else
360docimg_507_360docimg_508_ {
360docimg_510_ ExpandTree2(tn);
360docimg_511_ return;
360docimg_512_ }
360docimg_513_ }
360docimg_514_ }
360docimg_515_ //根據(jù)NodeDate展開(kāi)節(jié)點(diǎn)
360docimg_516_ private void ExpandTree2(TreeNode objTreeNode)
360docimg_517_360docimg_518_ {
360docimg_520_ string strIndex = "0";
360docimg_521_
360docimg_522_ objTreeNode.Expanded = true;
360docimg_523_
360docimg_524_ strIndex = objTreeNode.GetNodeIndex();
360docimg_525_
360docimg_526_ while (objTreeNode.Parent is TreeNode)
360docimg_527_360docimg_528_ {
360docimg_530_ objTreeNode = ((TreeNode)objTreeNode.Parent);
360docimg_531_ objTreeNode.Expanded = true;
360docimg_532_ }
360docimg_533_
360docimg_534_ TreeView1.SelectedNodeIndex = strIndex;
360docimg_535_ }
5.asp.net 2.0里TreeView已經(jīng)集成了,不需要單獨(dú)安裝了,但現(xiàn)在偶覺(jué)得,他只是換湯不換藥,特別是在節(jié)點(diǎn)定位,和客戶端操作上這兩個(gè)關(guān)鍵問(wèn)題上沒(méi)啥改進(jìn).(偶沒(méi)用過(guò)只是看了它的介紹.)
ASP.NET 2.0 的TreeView 控件介紹(轉(zhuǎn)載)
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.下面的為轉(zhuǎn)載:
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下創(chuàng)建空目錄webctrl_client\1_0。
(3)將build\Runtime下的文件拷至webctrl_client\1_0下。
(4)選擇工具箱的自定義工具箱,添加Microsoft.Web.UI.WebControls.dll。
有些麻煩
但如果你能找到后綴是msi的自動(dòng)安裝版本,直接下一步就行(我一直用這個(gè)版本,hoho)
安裝后,通過(guò)“自定義工具箱”->“.net框架組件”把TreeView添加到工具箱里
2.運(yùn)行時(shí)無(wú)法顯示
一般是TreeView的版本問(wèn)題,最好下載英文版自動(dòng)安裝版本重新安裝,安裝前應(yīng)該先到添加刪除程序里卸掉原版本
3.顯示格式出錯(cuò)(非樹(shù)狀顯示)
TreeView要求客戶端瀏覽器版本為IE5.5及以上,最好要求客戶端升級(jí)為IE6.0
4.框架里使用TreeView
設(shè)置NavigateUrl、Target屬性,可更新另外的Frame
5.找不到TreeNode類(lèi)
使用TreeView,最好添加namespace:using Microsoft.Web.UI.WebControls;
6.遍歷TreeView節(jié)點(diǎn)(遞歸算法)
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結(jié)點(diǎn)的父節(jié)點(diǎn)
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.展開(kāi)時(shí)不提交,改變選擇節(jié)點(diǎn)時(shí)才提交
將autopostback設(shè)置成false;
在body里添加 <body onload="initTree()">
然后在PageLoad里寫(xiě):
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 );
這樣就只有你點(diǎn)擊的節(jié)點(diǎn)更改的時(shí)候才提交!
10.TreeView結(jié)合XML
把XML文件設(shè)置為如下格式,然后直接設(shè)置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.請(qǐng)問(wèn),在頁(yè)面加載時(shí),如何選中Treeview某一節(jié)點(diǎn)?
index屬性,是一個(gè)如1.1.0的東西,解析這個(gè)字符串,然后定位
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
http://expert.csdn.net/Expert/topic/1382/1382892.xml
1.設(shè)置所選節(jié)點(diǎn),如選中第二個(gè)節(jié)點(diǎn)
function SetSelNode()
{
TreeView1.selectedNodeIndex="1";
}
2.得到所選節(jié)點(diǎn)的Text,ID或NodeData
function GetAttribute()
{
alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"));
}
替換Text為ID或NodeData,可分別得到所選節(jié)點(diǎn)的ID或NodeData
3.修改節(jié)點(diǎn)屬性,如修改第一個(gè)節(jié)點(diǎn)的Text
function ModifyNode()
{
var node=TreeView1.getTreeNode("0");
node.setAttribute("Text","hgknight");
}
4.得到點(diǎn)擊節(jié)點(diǎn)
function TreeView1.onclick()
{
alert(TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("Text"));
}
5.添加節(jié)點(diǎn)
function AddNode()
{
var node=TreeView1.createTreeNode();
node.setAttribute("Text","hgknight");
TreeView1.add(node);
}
6.js遍歷所有節(jié)點(diǎn)
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 的摘要說(shuō)明。
/// </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)
{
// 在此處放置用戶代碼以初始化頁(yè)面
if (!IsPostBack)
{
lblName.Text=Session["userName"]!=null ? Session["userName"].ToString():string.Empty;
try
{
//添加命令,從數(shù)據(jù)庫(kù)中得到數(shù)據(jù)
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();
}
//調(diào)用遞歸函數(shù),完成樹(shù)形結(jié)構(gòu)的生成
AddTree(0, (TreeNode)null);
}
}
#region Web 窗體設(shè)計(jì)器生成的代碼
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 該調(diào)用是 ASP.NET Web 窗體設(shè)計(jì)器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 設(shè)計(jì)器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內(nèi)容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
/// <summary>
/// 遞歸添加樹(shù)的節(jié)點(diǎn)
/// </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]);
//過(guò)濾ParentID,得到當(dāng)前的所有子節(jié)點(diǎn)
dvTree.RowFilter = "[parentId] = " + ParentID;
foreach(DataRowView Row in dvTree)
{
TreeNode Node=new TreeNode() ;
if(pNode == null)
{ //添加根節(jié)點(diǎn)
Node.Text = Row["name"].ToString();
TreeView1.Nodes.Add(Node);
//Node.Expanded=false;//是否展開(kāi)若設(shè)置為true 則ExpandLevel="1"無(wú)效
AddTree(Int32.Parse(Row["ID"].ToString()), Node); //再次遞歸
}
else
{
if(4>3)
{
//添加當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)
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右鍵菜單實(shí)例 選擇自 hgknight 的 Blog
一個(gè)IEWebControl TreeView右鍵菜單的例子,實(shí)現(xiàn)了添加、修改和刪除功能,復(fù)制即可運(yùn)行
更多TreeView的客戶端操作參見(jiàn)
http://www.csdn.net/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 onclick="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>
-----------------------------------------------------------------------------
服務(wù)器端選擇一節(jié)點(diǎn)下所有子節(jié)點(diǎn)(先選擇再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
-
被選擇的節(jié)點(diǎn)的索引:
tree.selectedNodeIndex -
被單擊的節(jié)點(diǎn)的索引:
tree.clickedNodeIndex -
獲取一個(gè)節(jié)點(diǎn):
tree.getTreeNode(nodeIndex) -
在根節(jié)點(diǎn)下增加一個(gè)子節(jié)點(diǎn):
var tree = document.all[‘TreeView1‘];
var node = tree.createTreeNode() ;
tree.add(node);
node.setAttribute( "text", "aaaa"); -
在當(dāng)前節(jié)點(diǎn)下增加一個(gè)子節(jié)點(diǎn):
var tree = document.all[‘TreeView1‘];
var node = tree.createTreeNode() ;
var parentNode = tree.getTreeNode( tree.clickedNodeIndex);
parentNode.add(node);
node.setAttribute( "text", "aaaa"); - 通過(guò)XML文件來(lái)增加子節(jié)點(diǎn):
node.setAttribute("NavigateUrl","xxx");
node.databind(); - 動(dòng)態(tài)增加子節(jié)點(diǎn)后自動(dòng)展開(kāi):
node.setAttribute(‘expanded‘, ‘true‘);//MS提供的HTC中需要修改一個(gè)地方,否則就會(huì)產(chǎn)生一個(gè)異常 - 獲取節(jié)點(diǎn)的屬性:
node.getAttribute("xxx") - 設(shè)置節(jié)點(diǎn)的屬性 :
node.setAttribute(‘xxx‘, ‘xxxx‘);
- 常用屬性列表:
|
值 | 含義 |
CheckBox | True False | 是否有選擇框 |
checked | True False | 選擇框是否被選中 |
Expanded | True False | 是否展開(kāi) |
ImageURL | 正常狀態(tài)下左邊的圖標(biāo) | |
SelectedImageUrl | 當(dāng)節(jié)點(diǎn)被選擇時(shí)左邊的圖標(biāo) | |
ExpandedImageUrl | 當(dāng)節(jié)點(diǎn)被展開(kāi)后左邊的圖標(biāo) | |
Target | 目標(biāo)框架 | |
navigateurl | 目標(biāo)URL | |
type | 節(jié)點(diǎn)的類(lèi)型 | |
childtype | 子節(jié)點(diǎn)的類(lèi)型 | |
Text | 節(jié)點(diǎn)顯示的文本 | |
innerText | ||
innerHTML | ||
defaultstyle | 默認(rèn)的風(fēng)格 | |
hoverstyle | 當(dāng)鼠標(biāo)移到節(jié)點(diǎn)的上面時(shí)的風(fēng)格 | |
selectedstyle | 當(dāng)節(jié)點(diǎn)被選擇時(shí)的風(fēng)格 | |
treenodesrc |
- 獲取父節(jié)點(diǎn):
node.getParent() - 獲取子節(jié)點(diǎn):
node.getChildren() - 判斷節(jié)點(diǎn)是否有子節(jié)點(diǎn)
node.getChildren().length > 0 - 響應(yīng)onselectedindexchange事件:
var tree = document.all["tvMain"];
tree.attachEvent("onselectedindexchange", SelectedIndexChange);