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来定位
Feb 20 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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数组是否为索引数组的实现方法
2013/06/13 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python中字符串与编码示例代码
2019/05/20 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
python pymysql库的常用操作
2020/10/16 Python
软件测试企业面试试卷
2016/07/13 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
市场开发计划书
2014/05/07 职场文书
社区工作者演讲稿
2014/05/23 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
暑假安全保证书
2015/02/28 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang