寻找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插件实现，但还没有实现。