jquery - 寻找 JQuery 风格的 Web 控件来深入了解树形数据结构

Question

我正在寻找一种 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

我想以这样的方式呈现这些中间步骤，以便用户可以深入特定的评估分支以发现产生特定值的输入。

我曾考虑过将表达式的工作操作为树结构，也许插入中间评估(在示例中以蓝色显示)。但是，我担心该软件的目标受众可能会觉得这有点令人生畏。

例如

另一种更友好的表示方式可能是允许就地钻取，如此例所示:

表达式最初看起来像这样:

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

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

在编写自己的控件之前，我认为可能有一个可用的现有控件可用于此目的。或者，我真的很感激任何以更直观的方式表示此数据的替代建议。

Answer 1

我找不到一个可以按照我上面描述的方式工作的控件，所以我创建了一个。 来源可在: http://github.com/Wheelies/expression-explorer

该控件使用用户可以导航的树形数据结构进行初始化。

表达式(((2+3)×(4+5))+Max(20+2, 31, 16, 62, 40))可以被解析成一棵树，它可以探讨如下:

用户单击[107]按钮，将控件更改为:

单击

[62]按钮，将控件更改为:

用户现在点击[22]

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