您的位置：首页 > Web前端 > JavaScript

Json网页格式化展示

2016-11-04 14:58 267 查看

在一些项目中，需要用到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、别忘了放入图片，用来收缩的图片

在做了以上几个要点之后，就能得到以下效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航