在一些项目中，需要用到Json数据的展示，那如何以一种格式化较美观得方式来进行展示呢？
这里使用的是jsonFormater方法，下载的地址在https://git.oschina.net/leo108/jsonFormater
以下是代码展示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Json网页格式化展示</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<link type="text/css" href="css/jsonFormater.css" rel="stylesheet" />
<script type="text/javascript" src="js/jsonFormater.js"></script>
<style>
body { margin:0; font-family:"微软雅黑"; font-size:12px; }
table { border-collapse:collapse; }
table .tdLeft { width:150px; text-align:right; line-height:30px;}
table .tdRight { width:400px; }
table textarea { width:400px; height:100px; }
#container { margin-left:150px; }
</style>
<script>
function showJson(){
$('table #container').css('display','block');
var options = {
dom: '#container' //对应容器的css选择器
};
var jf = new JsonFormater(options); //创建对象
jf.doFormat($("#jsonContent").val()); //格式化json
};
</script>
</head>
<body>
<table>
<tr>
<td class="tdLeft" nowrap>请输入要展示的Json：</td>
<td class="tdRight"><textarea id="jsonContent"></textarea></td>
</tr>
<tr>
<td class="tdLeft"> </td>
<td class="tdRight"><input type="button" value="格式化Json" onClick="showJson()"></td>
</tr>
</table>
<div id="container">
</div>
</body>
</html>
1、要注意jquery的引用，(千万别忘了引用)，并且需求版本要在1.7.2以上，这里引用的是1.9.0的版本
2、需要引用jsonFormater的样式以及JS文件
3、在页面中放入一个div用来装格式化后的Json
4、别忘了放入图片，用来收缩的图片
在做了以上几个要点之后，就能得到以下效果：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
