js获取TreeView控件选中节点的Text和Value值的方法


Posted in Javascript onNovember 24, 2012

在实际项目中,遇到一个问题,首先弹出一个新窗口,新窗口中放了一个TreeView控件,TreeView控件的数据绑定在我的上一篇随笔(TreeView绑定XML数据源C#代码示例)中有讲到,现在要解决的是,如何单击TreeView中一个节点,返回Text和Value到父页面并关闭该新窗口。
首先,在后台代码中为TreeView添加属性onclick以支持TreeView的客户端事件,代码如下:

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

那现在就要解决如何通过js获得TreeView中被选中的那个节点,脚本如下:
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(); 
}

其实这里用了点小花招,因为我实在不知道在哪个属性里能获得绑定给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,而是name属性了!
Javascript 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
js 连接数据库如何操作数据库中的数据
Nov 23 #Javascript
js 如何实现对数据库的增删改查
Nov 23 #Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 #Javascript
IE下使用cloneNode注意事项分享
Nov 22 #Javascript
jquery remove方法应用详解
Nov 22 #Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 #Javascript
ECMAScript 创建自己的js类库
Nov 22 #Javascript
You might like
PHP网站基础优化方法小结
2008/09/29 PHP
php xml实例 留言本
2009/03/20 PHP
PHP 递归效率分析
2009/11/24 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
php实现简易计算器
2020/08/28 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
python3调用R的示例代码
2018/02/23 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
django 环境变量配置过程详解
2019/08/06 Python
python numpy中cumsum的用法详解
2019/10/17 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
大学生职业生涯规划方案
2014/01/03 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
《问银河》教学反思
2014/02/19 职场文书
租房协议书范例
2014/10/14 职场文书
三潭印月的导游词
2015/02/12 职场文书
教导主任个人总结
2015/03/03 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书