说明
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/
*** ON格式化功能
实现效果
实现代码
<!doctype HTML> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title> *** ON格式化</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> <!-- *** ON Viewer --> <link href="./json-viewer/jquery.json-viewer.css" rel="stylesheet" /> <!-- *** ON 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 *** ON: " + 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"> *** ON格式化（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>
