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引导程序
Oct 26 Javascript
window.location.hash 使用说明
Nov 08 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python实现Linux中的du命令
2017/06/12 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
大学同学聚会邀请函
2014/01/19 职场文书
小学教师节活动方案
2014/01/31 职场文书
高中打架检讨书
2014/02/13 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
促销活动总结范文
2014/04/30 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript