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 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
7个JS基础知识总结
Mar 05 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
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 多行多列显示
2009/08/15 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
php树型类实例
2014/12/05 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
js中DOM事件绑定分析
2018/03/18 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
深入浅析python定时杀进程
2016/06/06 Python
Python扩展内置类型详解
2018/03/26 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Flask-Mail用法实例分析
2018/07/21 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python 实现Harris角点检测算法
2020/12/11 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
环境建设实施方案
2014/03/14 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
婚前协议书
2014/04/15 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
世界文化遗产导游词
2015/02/13 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
单位综合评价意见
2015/06/05 职场文书
同学聚会祝酒词
2015/08/10 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript