html5树json,在HTML中将JSON/YAML层次结构显示为树？

Anirvan..

7

基于简单的YAML看起来很像Markdown的事实,我终于想出了一个超级优雅的方式来完成大约5行代码.

我们从这开始:

---

all:

foo: 1025

bar:

baz: 37628

quux:

a: 179

b: 7

使用regexp(在本例中为Perl)删除起始位置---,并在每行的键之前放置连字符:

$data =~ s/^---\n//s;

$data =~ s/^(\s*)(\S.*)$/$1- $2/gm;

Voila,Markdown:

- all:

- foo: 1025

- bar:

- baz: 37628

- quux:

- a: 179

- b: 7

现在,只需通过Markdown处理器运行它:

use Text::Markdown qw( markdown );

print markdown($data);

你得到一个HTML列表 - 干净,语义,向后兼容:

• all:
  • foo: 1025
  • bar:
  • baz: 37628
  • quux:
    • a: 179
    • b: 7

YUI Treeview可以增强现有列表,因此我们将其全部包装起来:

• all:
  • foo: 1025
  • bar:
  • baz: 37628
  • quux:
    • a: 179
    • b: 7

var treeInit = function() {

var tree = new YAHOO.widget.TreeView("markup");

tree.render();

};

YAHOO.util.Event.onDOMReady(treeInit);

所以这一切都适用于大约5行代码(将YAML转换为Markdown,将Markdown转换为HTML列表,并将该HTML列表放在模板HTML文件中.生成的HTML逐步增强/降级,因为它在非完全可见-JavaScript浏览器作为一个普通的旧列表.