使用方法
下载压缩包,在页面中引入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
:是否将一个新行转换为<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
页面示例截图: