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層 |