JS获取TreeView选中节点Text与Value的方法及跨页传值

TreeView节点值获取与跨窗口传值实现

在实际开发场景中，常需在一个弹出窗口内展示TreeView控件，该控件的数据源绑定方式可参考相关随笔。当前目标是实现点击节点后，将选中的Text和Value值返回至父页面，并自动关闭当前弹出窗口。

首先，需在后台代码中为TreeView控件注册onclick属性，以启用客户端事件处理。

 
if (!IsPostBack)
{ 
TreeView1.Attributes.Add("onclick", "ReturnValue()");//ReturnValue为javascript函数
BindTreeView();
} 

JavaScript获取选中节点的核心逻辑

接下来，重点在于如何通过JavaScript脚本准确获取当前被选中的节点信息。相关脚本代码如下：

 
function ReturnValue() {
var objNode = event.srcElement;
var unitid = event.srcElement.href;
if (objNode.tagName != "SPAN") {
return;
} 
window.opener.document.getElementById("txtUnit").value = objNode.getAttribute("innerHtml");
window.opener.document.getElementById("txtUnitID").value = unitid;
window.close();
} 

Value值绑定技巧与服务器端取值

此处采用了一种变通方法：由于难以直接通过标准属性获取绑定给TreeView的ValueField值，因此将Value值同时绑定至NavigateUrl属性。上述黄色高亮代码部分即为此目的而设，对应的HTML代码如下：

 
<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1">
<DataBindings>
<asp:TreeNodeBinding TextField="NAME" ValueField="Value" NavigateUrlField="Value" SelectAction="None" />
</DataBindings>
</asp:TreeView>

红色标记部分代码用于获取TreeView上显示的文本。查看页面源码可知，TreeView的Text属性值实际被渲染在SPAN标签内。

绿色标记部分代码用于向父页面回填数据。需注意，目标控件"txtUnit"必须为客户端控件；若使用服务器端控件，弹窗在编译时会报错提示控件不存在。

至此，所需功能已实现。另有疑问：若父页面使用客户端控件装载回填值，如何在服务器端事件中获取该值？解决方法很简单，C#代码如下：

Request.Form["txtUnit"].ToString();

但需注意，此处的"txtUnit"并非控件ID，而是HTML元素的name属性值。