说明
jQuery json-viewer
jQuery插件，通过将json对象转换为HTML来显示。
json-viewer地址：https://github.com/abodelot/jquery.json-viewer
BootStrap 4.x
Bootstrap，全球最受欢迎的前端开源工具库，它支持Sass变量和mixin、响应式栅格系统、自带大量组件和众多强大的JavaScript插件。基于 Bootstrap 提供的强大功能，能够快速设计并定制网站。
地址：https://v4.bootcss.com/
JSON格式化功能
实现效果
实现代码
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>JSON格式化</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- JSON Viewer -->
<link href="./json-viewer/jquery.json-viewer.css" rel="stylesheet" />
<!-- JSON viewer -->
<script src="./json-viewer/jquery.json-viewer.js"></script>
<style type="text/css">
body {
margin: 0 100px;
font-family: sans-serif;
}
p.options label {
margin-right: 10px;
}
p.options input[type=checkbox] {
vertical-align: middle;
}
textarea#json-input {
width: 100%;
height: 600px;
}
pre#json-renderer {
margin-top: 0px;
border: 1px solid rgb(182, 181, 181);
height: 600px;
}
</style>
<script>
$(function () {
function renderJson() {
try {
var input = eval('(' + $('#json-input').val() + ')');
} catch (error) {
// return alert("Cannot eval JSON: " + error);
return;
}
var options = {
collapsed: $('#collapsed').is(':checked'),
rootCollapsable: $('#root-collapsable').is(':checked'),
withQuotes: $('#with-quotes').is(':checked'),
withLinks: $('#with-links').is(':checked')
};
$('#json-renderer').jsonViewer(input, options);
}
// Generate on click
$('#btn-json-viewer').click(renderJson);
// Generate on option change
$('p.options input[type=checkbox]').click(renderJson);
// 执行清除
$('#btn-json-clear').click(function () {
$('#json-input').val('');
$('#json-renderer').text('');
});
});
</script>
</head>
<body>
<div id="container">
<h1 style="margin-top: 20px;">
<a href="https://github.com/abodelot/jquery.json-viewer">JSON格式化（json-viewer）</a>
</h1>
<div class="d-flex flex-row" style="width: 100%;">
<div region="west" class="west" style="width: 300px;">
<textarea id="json-input" autocomplete="off" class="form-control"></textarea>
</div>
<div region="center" class="center" style="width: 180px;">
<table style="margin: auto;" width='90%' height="80%" align="center">
<tr>
<td>
<p class="options" style="text-align: center;">
<b>选项:</b><br />
<label title="Generate node as collapsed">
<input type="checkbox" id="collapsed"> 折叠节点
</label><br />
<label title="Allow root element to be collasped">
<input type="checkbox" id="root-collapsable" checked> 根可折叠
</label><br />
<label title="Surround keys with quotes">
<input type="checkbox" id="with-quotes"> 键带引号
</label><br />
<label title="Generate anchor tags for URL values">
<input type="checkbox" id="with-links" checked> 含有链接
</label><br />
</p>
<button id="btn-json-viewer" class="btn btn-info"
style="display:block;margin:0 auto;line-height:18px;">格式化</button>
<button id="btn-json-clear" class="btn btn-light"
style="display:block;margin:0 auto;line-height:18px;margin-top: 20px;">清 除</button>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
<div region="east" class="east flex-fill">
<pre id="json-renderer"></pre>
</div>
</div>
</div>
</body>
</html>