大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 JsonTree.js

A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.

JsonTree.js 是 一个轻量级 JavaScript 库，可生成可自定义的树视图以更好地可视化 JSON 数据，其具有以下突出特征：

• 零依赖性且非常轻量
• 可导出以用于其他框架
• 可通过公共函数获得完整 API
• 完全采用 CSS/SASS 样式，完全响应，并与 Bootstrap 库兼容
• 完全支持 CSS 主题（使用 :root 变量）
• 每个 DOM 元素完全可配置，支持关闭 / 打开全部
• 可点击值、自定义值渲染

JsonTree.js 完全支持所有现代浏览器，例如： Google Chrome、FireFox 和 Opera 等。

如何使用 JsonTree.js

首先安装相应依赖：

npm install jjsontree.js
// 也可以通过 CDN 引入
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@1.1.2/dist/jsontree.min.js
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@1.1.2/dist/jsontree.export.min.js
https://cdn.jsdelivr.net/gh/williamtroup/JsonTree.js@1.1.2/dist/jsontree.js.min.css

接着包含以下内容：

<link rel="stylesheet" href="dist/jsontree.js.css">
<script src="dist/jsontree.js"></script>

然后进行 DOM 树绑定：

<div id="tree-1" data-jsontree-js="{'showCounts': true,'data': [ true, false, 5, 10,'A String'] }">
    Your HTML.
</div>

当然，开发者还可以通过自定义函数的方式来处理，比如：

<div id="json-tree-1" data-jsontree-js="bindingOptions"></div>

下面是 bindingOptions 方法的内容：

function bindingOptions() {
    return {
        showCounts: false,
        data: {
            value1: true,
            value2: "This is a string",
            value3: new Date(),
            value4: 5,
            value7: null,
            value8: function() {
                // Does nothing
            },
            value9: 3.1415926535,
            value5: [
                true,
                "This is another string",
                {
                    arrayValue1: true,
                    arrayValue2: 10
                },
                [
                    false,
                    true,
                    5,
                    10,
                    new Date()
                ]
            ],
            value6: {
                objectValue1: false,
                objectValue2: "This is a new string",
                objectValue3: 20
            }
        }
    }
}

当然，JsonTree.js 还允许开发者使用配置选项，其允许自定义 JsonTree.js 的运行方式，比如下面的示例：

<script>
  $jsontree.setConfiguration( {
      safeMode: false
  } );
</script>

更多关于 JsonTree.js 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://www.william-troup.com/jsontree-js/documentation/options.html