jQuery插件jsonview展示json数据

本文实例为大家分享了jQuery插件jsonview展示json数据的具体代码，供大家参考，具体内容如下

项目中要展示json数据，自己写一套html来展示太麻烦，可以使用jquery的插件jsonview来解决这个问题。

首先，去jquery官网下载最新的jsonview插件，放在js目录中，下载地址。

其次，在html中加入以下代码：

<div class=\"col-lg-6\"> 
 <section class=\"panel\" style=\"height:600px\"> 
  <header class=\"panel-heading\"> 
   JSON数据 
  </header> 
  <div class=\"panel-body\" style=\"height:580px;overflow:auto\"> 
   <input type=\"hidden\" name=\"json_data\" id=\"json_data\" value=\"{{ json_data }}\"/> 
   <button id=\"collapse-btn\">折叠</button> 
   <button id=\"expand-btn\">展开</button> 
   <button id=\"save-btn\">保存</button> 
   <div id=\"json\"></div> 
  </div> 
 </section> 
</div> 

然后，在js中增加js控制方法：

<script type=\"text/javascript\"> 
 var raw_json = $(\"#json_data\").val(); 
 var json = JSON.parse(raw_json); 
 $(function() { 
  $(\"#json\").JSONView(json); 
 
  $(\"#json-collapsed\").JSONView(json, {collapsed: true, nl2br: true}); 
 
  $(\'#collapse-btn\').on(\'click\', function() { 
  $(\'#json\').JSONView(\'collapse\'); 
  }); 
 
  $(\'#expand-btn\').on(\'click\', function() { 
  $(\'#json\').JSONView(\'expand\'); 
  }); 
 }); 
</script> 

可以自动解析json给其加入html样式，并且jquery.jsonview.js也是使用jquery写的插件工具，可以根据自己需求修改。最终结果展示如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。