正在寻找JQuery样式的web控件以向下钻取树数据结构

我正在寻找一个JQuery风格的javascript/CSS控件，它允许用户深入了解表达式的工作方式

例如，假设我们有以下表达式：

  (2+3) × (4+5) + Max(22, 31, 16, 62, 40)

这将评估如下：

(((2+3)×(4+5))+Max(22, 31, 16, 62, 40)) ⇒ ((5×9)+62) ⇒ (45+62) ⇒ 107 （（2+3）×（4+5））+最大值（22,31,16,62,40）） ⇒ ((5×9)+62) ⇒ (45+62) ⇒ 107 我想以这样一种方式展示这些中间步骤，用户可以深入到特定的评估分支，以发现产生特定值的输入

我曾尝试过将表达式的工作方式操纵到树结构中，可能会插入中间求值（示例中以蓝色显示）。然而，我担心我的目标受众可能会觉得这有点吓人

e、 g。

另一种更友好的表示方式是允许就地向下钻取，如本例所示：

表达式最初如下所示：

用户单击“107”按钮，将控件更改为：

用户单击“62”按钮将控件更改为：

---

在我编写自己的控件之前，我认为可能有一个现有控件可用于此目的。或者，我真的非常感谢任何其他建议，以一种更直观的方式表示这些数据。

我找不到一个控件可以按照我上面描述的方式工作，所以我创建了一个。 资料来源可于：

控件初始化为一个树数据结构，用户可以对其进行导航

表达式

（（（2+3）×（4+5））+Max（20+2,31,16,62,40））

可以解析为一个树，可以如下所示：

(((2+3)×(4+5))+Max(22, 31, 16, 62, 40)) ⇒ ((5×9)+62) ⇒ (45+62) ⇒ 107

用户单击

[107]

按钮，将控件更改为：

[62]

按钮被单击，该按钮将控件更改为：

用户现在单击

[22]

请注意，此控件不处理表达式解析。另外，我还没有将该控件实现为真正的JQuery插件