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 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
vue实现学生信息管理系统
May 30 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
PHP文本数据库的搜索方法
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python如何获取文件路径/目录
2020/09/22 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
授权委托书怎么写
2014/09/25 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
教师节大会主持词
2015/07/06 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript