任务目的

• 熟练JavaScript
• 学习树这种数据结构的基本知识

任务描述

• 基于上几个任务，实现一个树形组件，样式自定义，不做限制
• 要求有以下功能：
• 节点的折叠与展开
• 允许增加节点与删除节点
• 按照内容进行节点查找，并且把找到的节点进行特殊样式呈现，如果找到的节点处于被父节点折叠隐藏的状态，则需要做对应的展开

任务目的

• 熟练JavaScript
• 学习树这种数据结构的基本知识

任务描述

• 基于上个任务，添加节点的选择、增加与删除的功能
• 点击某个节点元素，则该节点元素呈现一个特殊被选中的样式
• 增加一个删除按钮，当选中某个节点元素后，点击删除按钮，则将该节点及其所有子节点删除掉
• 增加一个输入框及一个“添加”按钮当选中某个节点元素后，点击增加按钮，则在该节点下增加一个子节点，节点内容为输入框中内容，插入在其子节点的最后一个位置
  阅读全文 »

任务目的

• 熟练JavaScript
• 学习树这种数据结构的基本知识

任务描述

• 基于上个任务，将二叉树变成了多叉树，并且每一个节点中带有内容
• 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
• 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
• 每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
• 增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致

在上一文章中，用面向过程的思想实现了对二叉树的三种遍历。这篇采用面向对象实现了一下。
定义一个Node类，把遍历好的node节点保存在对象的属性中，把三种遍历方法和渲染方法作为对象的方法。
Node类代码如下：

任务目的

• 熟练JavaScript
• 学习树这种数据结构的基本知识

任务描述

• 在页面中展现一颗二叉树的结构
• 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
• 二叉树的遍历算法和方式自定，前序中序后序皆可，但推荐可以提供多种算法的展示
• 增加多个按钮，每个按钮对应不同的算法）
• 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
• 每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
  阅读全文 »