jQuery JSONView-格式化和语法高亮JSON格式数据查看插件

痛定思痛。 2022-06-03 03:06 777阅读 0赞

### 使用方法 ###

下载压缩包，在页面中引入jquery和jquery.jsonview.js，以及jquery.jsonview.css文件。

##### 关于语法高亮 #####

jQuery JSONView插件中的语法高亮是通过CSS来渲染不同数据类型的字符串，例如，可以在CSS中设置布尔型的数值为蓝色，字符串类型为绿色等等。jquery.jsonview.css文件中已经预设了各种高亮颜色，你可以根据实际情况自行修改。

.jsonview .null {
        color: red;
    }
    .jsonview .bool {
      color: #fde3a7;
    }
    .jsonview .num {
      color: #bf55ec;
    }
    .jsonview .string {
      color: #00b16a;
      white-space: pre-wrap;
    }

初始化插件

在页面DOM元素加载完毕之后，可以通过`JSONView()`方法来初始化该插件。也可以在初始化时传入配置参数。

var json = {"hey": "guy","anumber": 243,"anobject": {...},...}; $(function() { $("#json").JSONView(json); // with options $("#json-collasped").JSONView(json, { collapsed: true }); });

配置参数

jQuery JSONView插件可以使用以下一些配置参数。

*  `collapsed`：是否在第一次渲染时收缩所有的节点，默认值为：false。
 *  `nl2br`：是否将一个新行转换为`<br>`字符串，默认值为false。
 *  `recursive_collapser`：是否递归收缩节点，默认值为false。
 *  `escape`：Escape HTML in key, default is true。

### 方法 ###

jQuery JSONView提供了以下的方法来控制JSON节点，所有的方法都接收一个`level`参数来在相应的节点上执行操作。

*  `jQuery#JSONView('collapse', [level])`：收缩节点。
 *  `jQuery#JSONView('expand', [level])`：展开节点。
 *  `jQuery#JSONView('toggle', [level])`：切换节点。

jQuery JSONView插件的github地址为：[https://github.com/yesmeck/jquery-jsonview][https_github.com_yesmeck_jquery-jsonview]

页面示例截图：

![20171216124225467][]

[https_github.com_yesmeck_jquery-jsonview]: https://github.com/yesmeck/jquery-jsonview
[20171216124225467]: /images/20220603/e4481eb7adf049eab4e44f02c617b616.png