如何用HTML CSS和JavaScript创建可折叠展开的JSON可视化？

百变鹏仔 3周前 (12-14) #PHP

文章标签如何用

用 html、css 和 javascript 创建可折叠展开的 json 可视化

通过利用 html 的可操作性、css 的样式和 javascript 的事件处理，可以构建一个交互式的 json 可视化，用户可以折叠和展开内容。以下示例演示了如何实现此功能：

html 模板：

<div class="json-view">  <div class="json-root"></div>  <div class="tpl">    ... （略）  </div></div>

css 样式：

立即学习“Java免费学习笔记（深入）”；

.json-view { font-family:consolas, monospace; }/* ...其它样式（略） */

javascript 代码：

function json_view(dombase, domtpl, key, json) {  let mapview = {    // ... （略）  };  let type = typeof(json);  if (type === 'object') {    if (json === null) type = 'null';    else if (array.isarray(json) === true) type = 'array';  }  if (!(type in mapview)) {    throw 'invalid type ['+type+']';  }  mapview[type](dombase, domtpl, key, json);}/* ...其它代码（略） */

工作原理：

该代码通过递归的方式遍历 json 对象，并根据不同类型（null、number、string、array、object）动态创建 html 元素。每个 html 元素都包含一个可折叠/展开的按钮，用户可以单击该按钮以显示/隐藏子内容。

用法：

要使用此可视化，您需要提供一个 json 对象作为输入。然后，调用 json_view(dombase, domtpl, null, json) 函数即可生成并显示可视化内容。

示例：

<script>  // ... （略）  let json = { ... };  let domRoot = document.querySelector('.json-view .json-root');  let domTpl  = document.querySelector('.json-view .tpl');  json_view(domRoot, domTpl, null, json);</script>

文章推荐

如何用HTML CSS和JavaScript创建可折叠展开的JSON可视化？

PHP 函数中如何使用递归来求最小公倍数？

PHP 函数中使用引用的高级技巧和用法

PHP 函数中引用传递与函数调用栈的关系

PHP 函数中引用传递的深浅拷贝问题

PHP 函数中如何使用递归来实现深度优先搜索？