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 未结束的字符串常量错误解决方法
Jun 13 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
js实现下拉框二级联动
Dec 04 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
js获取视频时长代码
2014/04/10 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
angular.bind使用心得
2015/10/26 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python去除文件中重复的行实例
2018/06/29 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
优秀士兵个人事迹材料
2014/01/19 职场文书
投资意向书范本
2014/04/01 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
任长霞观后感
2015/06/16 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android