如何实现可折叠展开的 JSON 可视化功能？

如何实现可折叠展开的 json 可视化功能？

本文将介绍如何通过自定义 javascript 函数和 html 模板来实现类似的 json 可视化功能。

步骤

1. 创建 html 模板：

   • 定义一个
     作为根容器，将 json 可视化显示在这个容器中。
   • 定义一个
     作为模板，其中包含不同类型的 json 值的模板项。

   • 定义 javascript 函数：

     • 定义一个 json_view 函数，接受一个根容器、模板、键和 json 值作为参数。
     • 对于每个 json 值，根据其类型调用特定的函数来创建相应的 html 元素并添加到根容器中。例如，对于布尔值，我们调用 json_view_boolean 函数创建 html 元素。

   • 为折叠展开添加交互：

     • 给数组和对象类型的 html 元素添加点击事件监听器。
     • 在点击事件处理程序中，切换元素的 open 类，并在需要时动态创建内部内容（例如数组或对象的子内容）。

   示例代码

   以下代码示例展示了如何使用 html 模板和 javascript 函数来实现可折叠展开的 json 可视化：

   html 模板：

   <div class="json-view">
     <div class="json-root"></div>
     <div class="tpl">
       <!-- 各种 json 值类型的模板 -->
     </div>
   </div>

   登录后复制

   javascript 函数：

   function json_view($domBase, $domTpl, $key, $json) {
     // 根据 JSON 值类型调用特定函数
     let mapView = {
       // ...
     };
   
     let type = typeof($json);
     if (mapView[type] === undefined) {
       throw 'invalid type [' + type + ']';
     }
   
     mapView[type]($domBase, $domTpl, $key, $json);
   }
   
   // 为折叠展开添加交互
   document.addEventListener('DOMContentLoaded', function() {
     // ...
   
     document.querySelector('.json-view .json-root').addEventListener('click', function($evt) {
       // ...
       if (this.classList.contains('open')) {
         this.classList.remove('open');
       } else {
         if (this.querySelector(':scope > .content').classList.contains('none')) {
           // ...
           this.querySelector(':scope > .content').classList.remove('none');
           // ...
         }
         this.classList.add('open');
       }
   
       $evt.stopPropagation();
     });
   });

   登录后复制

   通过以上步骤，就可以在 html 页面上创建可折叠展开的 json 可视化，让用户轻松查看和了解 json 数据结构。