JS控制TreeView的结点选择


Posted in Javascript onNovember 11, 2016

网上有很多控制TreeView的checkbox选中,但是自己尝试的时候,要么报错,要么不可行。以下这种写法是经过验证有效的,仅作参考,思维比较巧妙!

Tree:

<asp:TreeView ID="treeViewDapartment" runat="server" SelectedNodeStyle-BackColor="GrayText" onclick="javascript:NodeCheck();" 
     Font-Size="13px" ShowCheckBoxes="All" ShowLines="true" AutoGenerateDataBindings="false" ShowExpandCollapse="true" >
</asp:TreeView>

脚本:

<script language="javascript" type="text/javascript">
   //节点父节点选中子节点全选
   function NodeCheck() {  
      var o = window.event.srcElement;
      if (o.tagName == "INPUT" && o.type == "checkbox") //点击treeview的checkbox是触发 
      {
        var d = o.id; //获得当前checkbox的id; 
        var e = d.replace("CheckBox", "Nodes"); //通过查看脚本信息,获得包含所有子节点div的id 
        var div = window.document.getElementById(e); //获得div对象 
        if (div != null) //如果不为空则表示,存在自节点 
        {
          var check = div.getElementsByTagName("INPUT"); //获得div中所有的已input开始的标记 
          for (i = 0; i < check.length; i++) {
            if (check[i].type == "checkbox") //如果是checkbox 
            {
              check[i].checked = o.checked; //字节点的状态和父节点的状态相同,即达到全选 
            }
          }
        }
        else //点子节点的时候,使父节点的状态改变,即不为全选
        {
          var divid = o.parentElement.parentElement.parentElement.parentElement.parentElement; //子节点所在的div   
          var id = divid.id.replace("Nodes", "CheckBox"); //获得根节点的id 

          var checkbox = divid.getElementsByTagName("INPUT"); //获取所有子节点数
          var s = 0;
          for (i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked) //判断有多少子节点被选中 
            {
              s++;
            }
          }
          if (s == checkbox.length) //如果全部选中 或者 选择的是另外一个根节点的子节点 , 
          {                //  则开始的根节点的状态仍然为选中状态 
            window.document.getElementById(id).checked = true;
          }
          else {                //否则为没选中状态 
            window.document.getElementById(id).checked = false;
          }
        }

      }
  }
</script>

这个脚本的写法巧妙运用生成的页面源文件中checkbox与其子结点div之间的关系!

那么,只需要在注册一下触发事件即可:

protected void Page_Load(object sender, EventArgs e)
{  
    this.treeViewDapartment.Attributes.Add("onclick", "NodeCheck();"); 

}

特别感谢,雷云锋给予的指导!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
node+express制作爬虫教程
Nov 11 #Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 #Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 #Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 #Javascript
通过扫描二维码打开app的实现代码
Nov 10 #Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 #Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
You might like
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
PHP 文件上传限制问题
2019/09/01 PHP
javascript学习网址备忘
2007/05/29 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
javascript数组去重小结
2016/03/07 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
vue 中几种传值方法(3种)
2019/11/12 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Vue性能优化的方法
2020/07/30 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
文明生主要事迹
2014/05/25 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
公司委托书格式范文
2014/10/09 职场文书
模范教师事迹材料
2014/12/16 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server