其实，ASP.NET本身就提供了一个简单的方法获得所选择节点的Text和Value属性了。我们先看看ASP.NET关于 TreeView 控件生成的代码:
首先：会有下面一个表单控件；
HTML 代码
<input type="hidden" name="TreeView1_SelectedNode" id="TreeView1_SelectedNode" value="" />
再次：会有下面的一个Form对象的定义；
JavaScript 代码
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
接着，会有2段脚本资源的引用：
HTML 代码
<script src="/WebSite1/WebResource.axd?d=HrSxn51SCVtJIIHuVWDUljVNjC0Ga-dPM3AH-
Hu07ok0KPDC37khkhdp0k3BKUwnYblLYsIQUYfYLnVajZz4JnQe_ImedZQ28HSACAu3BY41&t=634221208816441802" type="text/javascript"></script>
<script src="/WebSite1/WebResource.axd?
d=cRb87h5TjCoB991MCwmuiagyyjJipEKTdmBwvI7oEW81cxsMT_kCKzcgneLQdKt4c43HXATD4_3BMJ0gCqTi687dcK_XH_kMTKheJxgbrqY1&t=634221208816441802"
type="text/javascript"></script>
然后，就是一个自定义对象，记录一些在点击过程中记录的一些数据：
JavaScript 代码
WebForm_InitCallback();
var TreeView1_Data = new Object();
TreeView1_Data.selectedNodeID = theForm.elements['TreeView1_SelectedNode'];
关键的地方就是这个 TreeView1_Data 对象。下面看看每个节点的HTML代码：
HTML 代码
<a class="TreeView1_0" href="javascript:__doPostBack('TreeView1','s孟子E章')" onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1');" id="TreeView1t1">孟子E章</a>
我们看到，在节点点击时执行了TreeView_SelectNode 方法，这个方法定义是：
JavaScript 代码
function TreeView_SelectNode(data, node, nodeId) {
if (!data) {
return;
}
if ((typeof(data.selectedClass) != "undefined") && (data.selectedClass != null)) {
var id = data.selectedNodeID.value;
if (id.length > 0) {
var selectedNode = document.getElementById(id);
if ((typeof(selectedNode) != "undefined") && (selectedNode != null)) {
WebForm_RemoveClassName(selectedNode, data.selectedHyperLinkClass);
selectedNode = WebForm_GetParentByTagName(selectedNode, "TD");
WebForm_RemoveClassName(selectedNode, data.selectedClass);
}
}
WebForm_AppendToClassName(node, data.selectedHyperLinkClass);
node = WebForm_GetParentByTagName(node, "TD");
WebForm_AppendToClassName(node, data.selectedClass)
}
data.selectedNodeID.value = nodeId;
}
因此，在每次点击时，就会记录下所点击的节点的id，根据这个id就可以得到所选择的节点的内容了：
JavaScript 代码
<script type="text/javascript">
function GetSelectedNode() {
var selectedNodeID = theForm.elements["<%=TreeView1.ClientID%>_SelectedNode"].value;
if (selectedNodeID != "") {
var selectedNode = document.getElementById(selectedNodeID);
var value = selectedNode.href.substring(selectedNode.href.indexOf(",") + 3, selectedNode.href.length - 2);
var text = selectedNode.innerHTML;
alert("Text = " + text + "\r\n" + "Value = " + value)
}
else {
alert("没有选择节点。")
}
// 也可以使用内置的对象
// var treeViewData = window["<%=TreeView1.ClientID%>" + "_Data"];
// selectedNodeID = treeViewData.selectedNodeID.value
return false;
}
</script>
完整的测试代码如下：
ASPX 代码
<%@ Page Language="C#" EnableViewState="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function GetSelectedNode() {
var selectedNodeID = theForm.elements["<%=TreeView1.ClientID%>_SelectedNode"].value;
if (selectedNodeID != "") {
var selectedNode = document.getElementById(selectedNodeID);
var value = selectedNode.href.substring(selectedNode.href.indexOf(",") + 3, selectedNode.href.length - 2);
var text = selectedNode.innerHTML;
alert("Text = " + text + "\r\n" + "Value = " + value)
}
else {
alert("没有选择节点。")
}
// 也可以使用内置的对象
// var treeViewData = window["<%=TreeView1.ClientID%>" + "_Data"];
// selectedNodeID = treeViewData.selectedNodeID.value
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True">
<Nodes>
<asp:TreeNode Text="孟宪会"></asp:TreeNode>
<asp:TreeNode Text="孟子E章">
<asp:TreeNode Text="网站" Value="http://dotnet.aspx.cc"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Blog" Value="http://blog.csdn.net/net_lover/"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<asp:Button ID="Button1" runat="server" Text="得到选择的节点" OnClientClick="return GetSelectedNode();" />
</form>
</body>
</html>
.NET 相关
