http://leo108.com/pid-1996.asp
JsonFormater
基于jQuery的json格式化、高亮库
核心代码参考天马行空工作室，本人只做了模块化和一些代码优化。
demo
http://leo108.github.io/jsonFormater/
github地址
https://github.com/leo108/jsonFormater
使用方式
引入jQuery
1 |
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> |
注意：jQuery版本要求>=1.7.2
引入jsonFormater.js和jsonFormater.css
1 |
<script type="text/javascript" src="jsonFormater.js"></script> |
2 |
<link href="jsonFormater.css" type="text/css" rel="stylesheet"/> |
在html中新增一个空的元素作为显示的容器
例如<div id=‘container‘></div>
调用JsonFormater
1 |
$(document).ready(function(){ |
2 |
var options = { |
3 |
dom : ‘#container‘ //对应容器的css选择器 |
4 |
}; |
5 |
var jf = new JsonFormater(options); //创建对象 |
6 |
jf.doFormat(‘{"string":"leo108"}‘); //格式化json |
7 |
}); |
效果图
详细使用方式
配置
支持的配置以及默认配置如下:
1 |
{ |
2 |
dom: ‘‘, //用于放置的dom的选择器 |
3 |
singleTab: " ", //单个tab |
4 |
tabSize: 2, //缩进数量 |
5 |
quoteKeys: true, //key是否用双引号包含 |
6 |
imgCollapsed: "images/Collapsed.gif", //收起的图片路径 |
7 |
imgExpanded: "images/Expanded.gif", //展开的图片路径 |
8 |
isCollapsible: true //是否支持展开收起 |
9 |
} |
方法
1 |
var obj = new JsonFormater({dom: ‘#container‘}); |
2 |
obj.doFormat(json) //格式化一个json字符串或者js对象 |
3 |
obj.expandAll() //全部展开 |
4 |
obj.collapseAll() //全部收起 |
5 |
obj.collapseLevel(level) //展开到level层
|
时间： 2024-09-30 19:54:25