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 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
js实现本地时间同步功能
Aug 26 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php导出CSV抽象类实例
2014/09/24 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php中JSON的使用与转换
2015/01/14 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
简单了解python的内存管理机制
2019/07/08 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
对祖国的寄语大全
2014/04/11 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
基层党支部整改方案
2014/10/25 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python
js 实现验证码输入框示例详解
2022/09/23 Javascript