软件开发培训班 >> 编程开发 >> JavaScript


详解Javascript中checkbox树的功能

　　本文标签：checkbox树

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

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

　　我们单独拿根节点分析 。表面上，它有三个图标，一个文本，实质上，只有两个图标，第二作为第一个的背景而存在，文本位于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.  }