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 相关文章推荐
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
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如何编写易读的代码
2007/07/10 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
详解php用static方法的原因
2018/09/12 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
php5与php7的区别点总结
2019/10/11 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
vue 授权获取微信openId操作
2020/11/13 Javascript
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
感恩节活动方案
2014/01/27 职场文书
公司端午节活动方案
2014/02/04 职场文书
2014年店长工作总结
2014/11/17 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS