javascript - 如何在 HTML 中创建通用 JSON 数据的树表示?

标签 javascript json jstree mongovue

我有一些以 JSON 格式存储的数据。我希望能够在浏览器中将其显示为动态树结构,类似于 MongoVUE 呈现 mondodb 文档的方式: Screenshot

我发现了一个非常好的jquery插件,叫做jsTree。不幸的是,为了处理 JSON 文档,它需要数据具有非常具体的详细(在我看来是多余的)结构: link 。使用它意味着对我的 json 文档进行重大修改。我宁愿寻找一种能够自动构建树的工具,无需对数据进行严格的手动调整,但如果需要的话,它允许我对 View 进行一些修改。

json.bloople.net 上的工具使用表格制作类似的东西,但因为我有多层嵌套文档,所以输出看起来非常臃肿。此外,该结构不可动态折叠。

如果有任何有关完成这项工作的正确工具的提示,包括那些可能需要(自动!)在 Java/Groovy 或纯基于 JavaScript 的解决方案中预处理 JSON 数据的提示,我将不胜感激。

最佳答案

这只是一个简单的示例,说明如何在 html 中输出类似 JSON 结构的树。 http://jsfiddle.net/K2ZQQ/1/ (有关浏览器对空白的支持,请参阅 here)。请注意,JSON.stringify 的第二个参数是一个 replacer 函数:

来自http://msdn.microsoft.com/en-us/library/ie/cc836459(v=vs.94).aspx

If replacer is a function, JSON.stringify calls the function, passing in the key and value of each member. The return value is used instead of the original value. If the function returns undefined, the member is excluded. The key for the root object is an empty string: "".

因此,如果您需要对 JSON 树的 dislpay 添加任何进一步的修改,replacer 函数可能会有所帮助。

关于javascript - 如何在 HTML 中创建通用 JSON 数据的树表示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8094741/

相关文章:

jquery - 如何找出父节点的所有嵌套子节点?

javascript - 如何获取 jQuery 事件处理程序的返回值

Javascript - var 有何不同?

json - 如何在 Spark 2 Scala 中将 Row 转换为 json

arrays - 在 ruby​​ 中将数组转换为散列

javascript - 删除 jstree 中的根节点会分离事件监听器

javascript - 如何突出显示textarea html代码的一部分

javascript - 获取 Iframe 的内部元素

arrays - 戈朗 :How to parse/unmarshal/decode a json array API response?

javascript - jstree 显示原始 json,而不是树