其他代码
JSONView - 格式化高亮JSON格式数据查看插件
PetitQ
jQuery JSONView 是一款非常实用的格式化和语法高亮 JSON 格式数据查看器 jQuery 插件。通过该插件可以将 JSON 格式的数据进行格式输出，便于阅读，同时它还支持各种数据类型的语法高亮，以及节点的收缩和展开等。
使用方法:
下载压缩包，在页面中引入 jquery 和 jquery.jsonview.js，以及 jquery.jsonview.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="dist/jquery.jsonview.css">
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.jsonview.js"></script>
关于语法高亮
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：是否将一个新行转换为
字符串，默认值为 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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
