Ani*_*van 8 html javascript treeview yui json
我的YAML数据看起来有点像这样,但是大约150k:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
...或者JSON中的相同内容:
{"all":{"bar":{"baz":"37628","quux":{"a":"179","b":"7"}},"foo":"1025"}}
我想在可扩展JavaScripty HTML树视图呈现这个内容(例如:1,2),使其更容易去探索.我该怎么做呢？
我想我真正想弄清楚的是如何获取这个YAML/JSON数据,并自动将其显示为树(使用按字母顺序排序的哈希键).到目前为止,我一直在与YUI的树视图争吵,但它不接受直接的JSON,而我将数据按到有用的东西的微弱尝试似乎并没有起作用.
谢谢你的帮助.
您可以使用此方法将JSON数据转换为精美嵌套的DIV.我没有使用大量数据集对其进行测试,但它似乎有效.
function renderJSON(obj) {
'use strict';
var keys = [],
retValue = "";
for (var key in obj) {
if (typeof obj[key] === 'object') {
retValue += "<div class='tree'>" + key;
retValue += renderJSON(obj[key]);
retValue += "</div>";
} else {
retValue += "<div class='tree'>" + key + " = " + obj[key] + "</div>";
}
keys.push(key);
}
return retValue;
}
基于简单的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列表 - 干净,语义,向后兼容:
<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul></li>
</ul></li>
</ul>
YUI Treeview可以增强现有列表,因此我们将其全部包装起来:
<html><head>
<!-- CSS + JS served via YUI hosting: developer.yahoo.com/yui/articles/hosting/ -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/treeview/assets/skins/sam/treeview.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/treeview/treeview-min.js"></script>
</head><body>
<div id="markup" class="yui-skin-sam">
<!-- start Markdown-generated list -->
<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul></li>
</ul></li>
</ul>
<!-- end Markdown-generated list -->
</div>
<script type="text/javascript">
var treeInit = function() {
var tree = new YAHOO.widget.TreeView("markup");
tree.render();
};
YAHOO.util.Event.onDOMReady(treeInit);
</script>
</body></html>
所以这一切都适用于大约5行代码(将YAML转换为Markdown,将Markdown转换为HTML列表,并将该HTML列表放在模板HTML文件中.生成的HTML逐步增强/降级,因为它在非完全可见-JavaScript浏览器作为一个普通的旧列表.