2.包括TreeView的asp.net程序的打包問題:
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一定要放在第一個子節(jié)最前面.
剪切默認網(wǎng)站的webctrl_client目錄到虛擬目錄web/treepath/下,運行程序,樹
型界面出現(xiàn)了,只是前面的加減號出現(xiàn)問題,再右鍵查看WEB代碼,發(fā)現(xiàn)SystemImagesPath屬性還是指到webctrl_client目錄
下,看了SystemImagesPath的代碼,把treeview控件的SystemImagesPath設(shè)置為空,再次運行程序,OK!全部通過,
treeview的圖片目錄再也不需要依賴默認網(wǎng)站的圖片目錄了,打包也變的方便了
3.客戶端操作TreeView帶CheckBox的好例子(1)--選擇 /取消父節(jié)點后其所有子節(jié)點自動選擇 /取消。不過里面有點小問題要注意:
(1)就是如何初始化已經(jīng)選擇的節(jié)點:注意要從客戶端初始化的(把選擇的節(jié)點放在客戶端一個隱藏域里通過JS初始化).如果你在服務(wù)器端初始化了將無法在客戶端修改它的狀態(tài).
(2)
如何獲得客戶端設(shè)置的節(jié)點:在客戶端改變了選擇狀態(tài)(node.setAtrribute("check","ture"))后,通過服務(wù)器端是無法獲得
選擇的值的,也只能在客戶端獲得它(通過一個input type="hiiden" runat="server"來保存選擇的值).
上面兩個問題都是參考了下面的代碼完成的.
兩個客戶端操作TreeView節(jié)點CheckBox的小例子 (轉(zhuǎn)江雨.net)(自動選擇子節(jié)點)
下面是修改后詳細代碼:



















































































































































主要后臺代碼:


















































































































































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


































































4.TreeView節(jié)點的精確定位問題(通過NodeData來定位)






















































5.asp.net 2.0里TreeView已經(jīng)集成了,不需要單獨安裝了,但現(xiàn)在偶覺得,他只是換湯不換藥,特別是在節(jié)點定位,和客戶端操作上這兩個關(guān)鍵問題上沒啥改進.(偶沒用過只是看了它的介紹.)
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的自動安裝版本,直接下一步就行(我一直用這個版本,hoho)
安裝后,通過“自定義工具箱”->“.net框架組件”把TreeView添加到工具箱里
2.運行時無法顯示
一般是TreeView的版本問題,最好下載英文版自動安裝版本重新安裝,安裝前應(yīng)該先到添加刪除程序里卸掉原版本
3.顯示格式出錯(非樹狀顯示)
TreeView要求客戶端瀏覽器版本為IE5.5及以上,最好要求客戶端升級為IE6.0
4.框架里使用TreeView
設(shè)置NavigateUrl、Target屬性,可更新另外的Frame
5.找不到TreeNode類
使用TreeView,最好添加namespace:using Microsoft.Web.UI.WebControls;
6.遍歷TreeView節(jié)點(遞歸算法)
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é)點的父節(jié)點
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.展開時不提交,改變選擇節(jié)點時才提交
將autopostback設(shè)置成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" + "http:// --> \n" +
"</script>";
Page.RegisterClientScriptBlock("InitTree",strScript );
這樣就只有你點擊的節(jié)點更改的時候才提交!
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.請問,在頁面加載時,如何選中Treeview某一節(jié)點?
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
http://expert.csdn.net/Expert/topic/1382/1382892.xml
1.設(shè)置所選節(jié)點,如選中第二個節(jié)點
function SetSelNode()
{
TreeView1.selectedNodeIndex="1";
}
2.得到所選節(jié)點的Text,ID或NodeData
function GetAttribute()
{
alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"));
}
替換Text為ID或NodeData,可分別得到所選節(jié)點的ID或NodeData
3.修改節(jié)點屬性,如修改第一個節(jié)點的Text
function ModifyNode()
{
var node=TreeView1.getTreeNode("0");
node.setAttribute("Text","hgknight");
}
4.得到點擊節(jié)點
function TreeView1.onclick()
{
alert(TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("Text"));
}
5.添加節(jié)點
function AddNode()
{
var node=TreeView1.createTreeNode();
node.setAttribute("Text","hgknight");
TreeView1.add(node);
}
6.js遍歷所有節(jié)點
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
{
//添加命令,從數(shù)據(jù)庫中得到數(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ù),完成樹形結(jié)構(gòu)的生成
AddTree(0, (TreeNode)null);
}
}
#region Web 窗體設(shè)計器生成的代碼
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 該調(diào)用是 ASP.NET Web 窗體設(shè)計器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 設(shè)計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內(nèi)容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
/// <summary>
/// 遞歸添加樹的節(jié)點
/// </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,得到當前的所有子節(jié)點
dvTree.RowFilter = "[parentId] = " + ParentID;
foreach(DataRowView Row in dvTree)
{
TreeNode Node=new TreeNode() ;
if(pNode == null)
{ //添加根節(jié)點
Node.Text = Row["name"].ToString();
TreeView1.Nodes.Add(Node);
//Node.Expanded=false;//是否展開若設(shè)置為true 則ExpandLevel="1"無效
AddTree(Int32.Parse(Row["ID"].ToString()), Node); //再次遞歸
}
else
{
if(4>3)
{
//添加當前節(jié)點的子節(jié)點
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右鍵菜單的例子,實現(xiàn)了添加、修改和刪除功能,復(fù)制即可運行
更多TreeView的客戶端操作參見
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é)點下所有子節(jié)點(先選擇再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é)點的索引:
tree.selectedNodeIndex -
被單擊的節(jié)點的索引:
tree.clickedNodeIndex -
獲取一個節(jié)點:
tree.getTreeNode(nodeIndex) -
在根節(jié)點下增加一個子節(jié)點:
var tree = document.all[‘TreeView1‘];
var node = tree.createTreeNode() ;
tree.add(node);
node.setAttribute( "text", "aaaa"); -
在當前節(jié)點下增加一個子節(jié)點:
var tree = document.all[‘TreeView1‘];
var node = tree.createTreeNode() ;
var parentNode = tree.getTreeNode( tree.clickedNodeIndex);
parentNode.add(node);
node.setAttribute( "text", "aaaa"); - 通過XML文件來增加子節(jié)點:
node.setAttribute("NavigateUrl","xxx");
node.databind(); - 動態(tài)增加子節(jié)點后自動展開:
node.setAttribute(‘expanded‘, ‘true‘);//MS提供的HTC中需要修改一個地方,否則就會產(chǎn)生一個異常 - 獲取節(jié)點的屬性:
node.getAttribute("xxx") - 設(shè)置節(jié)點的屬性 :
node.setAttribute(‘xxx‘, ‘xxxx‘);
- 常用屬性列表:
|
值 | 含義 |
CheckBox | True False | 是否有選擇框 |
checked | True False | 選擇框是否被選中 |
Expanded | True False | 是否展開 |
ImageURL | 正常狀態(tài)下左邊的圖標 | |
SelectedImageUrl | 當節(jié)點被選擇時左邊的圖標 | |
ExpandedImageUrl | 當節(jié)點被展開后左邊的圖標 | |
Target | 目標框架 | |
navigateurl | 目標URL | |
type | 節(jié)點的類型 | |
childtype | 子節(jié)點的類型 | |
Text | 節(jié)點顯示的文本 | |
innerText | ||
innerHTML | ||
defaultstyle | 默認的風格 | |
hoverstyle | 當鼠標移到節(jié)點的上面時的風格 | |
selectedstyle | 當節(jié)點被選擇時的風格 | |
treenodesrc |
- 獲取父節(jié)點:
node.getParent() - 獲取子節(jié)點:
node.getChildren() - 判斷節(jié)點是否有子節(jié)點
node.getChildren().length > 0 - 響應(yīng)onselectedindexchange事件:
var tree = document.all["tvMain"];
tree.attachEvent("onselectedindexchange", SelectedIndexChange);