详解Javascript中checkbox树的功能

开发 前端
本文我们将介绍Javascript中checkbox树的功能,希望本文能对大家今后有所帮助。

对于Javascript中checkbox树的功能,扥多人还不是很了解,究竟checkbox树有何作用,希望本文能对大家有所帮助。研究了几天,终于搞出自己的树来。总结一下,留待以后改进用。

作为UI控件的树与数据结构的树有很大的不同,它分为根节点,枝节点与叶节点。根节点有子树,并不隶属于其他树。枝节点有子树,并作为某一子树的节点而存在。叶节点只作为某一子树的节点而存在,并且没有子树。但仅是这样,无法绘制树的。我们看下面的图,树在网页中无论样子如何,从上到下都是一行行分开的。每一行都有几张图片与文本。这些图片大致分三类,一是虚线图标与加号图标与减号图标,我把它们统称为连线图标;二是装饰用的文件夹图标,或者根节点的那个地球,或者叶子节点的文档,或者类似的电脑、苹果、回收站等等,我称之为装饰图标;***是checkbox,它分三种状态。图标的种类如此多,仅是根枝叶加关闭展开这两种状态,也只是六种可能,因此我们还得把枝节点细分为普通枝与末枝,叶节点也一样。由于连线图标与装饰图标的作用很相似,装饰图标好像是从视觉上强调点击连线图标会出现的效果,因此我们可以用CSS把它们整合到一起,以节省一个DOM。

[[6513]]

我们单独拿根节点分析。表面上,它有三个图标,一个文本,实质上,只有两个图标,第二作为***个的背景而存在,文本位于span元素中。如果想点击文字跳转,也可以换成A元素。此外,还隐藏***一个DIV元素。它是用于装载子树与缩进子树的。这四个元素都位于一个DIV中,我把它称之为根节点,并设置index属性,用于与原数据相比较取得父节点的index。

01.var data = [
02.  [0,-1,"中国"],//根节点
03.  [1,0,"北京市"],//枝节点
04.  [2,0,"天津市"],//叶节点
05.  [3,1,"市辖区"],//枝节点
06.  [4,3,"东城区"],//叶节点
07.  [5,3,"西城区"],//叶节点
08.  [6,3,"崇文区"],//叶节点
09.  [7,3,"朝阳区"],//叶节点
10.  [8,3,"丰台区"]//叶节点
11.]

接着我们给图标加入一些识别要素,这对样式表控制还是事件绑定都很有无用,因为仅仅是一个index是非常乏力的。当我们点击连线图标,那个加号或减号,我们怎样让程序知道是点击了它呢?!我们给它一个className,为collapse与unfold。只要有这两个类之一,我们就重设它的className,原来是collapse就改成unfold,反之亦然,然后再更换其src,以达到切换图片的目的。它后面的装饰图标是用样式表控制(内部样式),因此当className变了它会reflow,重新渲染页面。难点在checkbox,当点击它时,会有一连串反应,更换其父级节点的checkbox,更换自身,再更换其子孙。它有三种状态,对应三个className。0为子孙元素无选中,1为子孙元素全选中,2为子孙元素部分选中。算法非常复杂,渲染也非常复杂,如img为checkbox图标,它的parentNode才为树的节点元素,如果它非根节点,那它肯定还被一个DIV包裹着,img.parentNode.parentNode.parentNode才为其上级的树节点元素,这个节点的第二个IMG元素就是它顶上的那个checkbox。要访问其下级的checkbox,就更复杂了!总之,多处用到递归,自己看源码吧。由于没有学过数据结构与算法,实现有点劣拙,功能这么少也得一百五十行,惭愧万分。bug也无法自排,因此请勿用于商用,后果自负。

  1. var getPriorCheckbox = function(checkbox){   
  2.    var node = checkbox.parentNode;//取得对应的树节点   
  3.    if(/root/.test(node.className)){//判断是否根节点   
  4.     return false;   
  5.    }else{   
  6.     var priorNode = node.parentNode.parentNode;//取得对应的上级树节点   
  7.     return priorNode.children[1];   
  8.   }   
  9.  } 

原文标题:javascript checkbox树

链接:http://www.cnblogs.com/rubylouvre/archive/2009/10/26/1589692.html

【编辑推荐】

  1. 浅析利用Javascript获取随机颜色
  2. JSON是什么?为JavaScript准备的数据格式
  3. 十个最常用的JavaScript自定义函数
  4. 有关JavaScript事件加载的一些延伸思考
  5. JavaScript使用心得汇总:从BOM和DOM谈起
责任编辑:彭凡 来源: 博客园
相关推荐

2013-05-08 10:36:07

JavaScriptJS详解JavaScrip

2017-03-20 14:45:42

JavaScript详解

2016-10-11 20:33:17

JavaScriptThisWeb

2009-09-21 16:59:29

Array扩展

2009-09-08 13:52:54

CheckBox选中

2009-06-30 15:18:10

StringBuildJava

2009-07-15 10:52:13

JTree组件

2016-12-27 10:19:42

JavaScriptindexOf

2010-09-08 15:13:09

Node节点Node属性

2009-09-09 10:32:12

C# CheckBox

2009-09-08 09:31:54

c# CheckBox

2016-08-12 11:04:17

JavaScript物联网应用

2020-11-18 09:06:02

JavaScript开发技术

2009-11-06 13:28:19

Javascript框

2012-02-02 16:39:40

CheckBox控件源代码

2010-10-09 09:56:51

JavaScriptObject对象

2011-05-20 13:31:54

Repeatercheckbox

2012-05-28 10:34:50

MVVM 数据绑定

2012-11-28 10:54:33

Windows 8快速启动

2009-12-11 10:29:27

策略路由功能
点赞
收藏

51CTO技术栈公众号