jQuery插件jsonview展示json数据

 更新时间:2018年05月26日 16:37:14   作者:阿杜_ardo  
这篇文章主要为大家详细介绍了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写的插件工具,可以根据自己需求修改。最终结果展示如下:

 

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

相关文章

  • JQuery 又谈ajax局部刷新

    JQuery 又谈ajax局部刷新

    这篇文章主要为大家详细介绍了JQuery ajax局部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • jQuery 获取、设置HTML或TEXT内容的两种方法

    jQuery 获取、设置HTML或TEXT内容的两种方法

    这篇文章主要介绍了jQuery 获取、设置HTML或TEXT内容的两种方法,需要的朋友可以参考下
    2014-05-05
  • 10分钟学会写Jquery插件实例教程

    10分钟学会写Jquery插件实例教程

    这篇文章主要介绍了10分钟学会写Jquery插件,通过一个实例分两步完成一个简单的插件,非常实用,需要的朋友可以参考下
    2014-09-09
  • jquery点击改变class并toggle的实现代码

    jquery点击改变class并toggle的实现代码

    下面小编就为大家带来一篇jquery点击改变class并toggle的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery.trim() 函数及trim()用法详解

    jQuery.trim() 函数及trim()用法详解

    jQuery.trim()函数用于去除字符串两端的空白字符。jquery trim函数应用非常广泛,下面小编给大家讲解jquery.trim()函数及trim()用法详解,需要的朋友可以参考下
    2015-10-10
  • jquery 添加节点的几种方法介绍

    jquery 添加节点的几种方法介绍

    添加节点的方法有很多,在本文将为大家介绍下jquery中添加节点几种方法,感兴趣的朋友可以参考下
    2013-09-09
  • jquery cookie插件代码类

    jquery cookie插件代码类

    jquery cookie插件代码类,使用这个就可以方便的控制的cookie了,但感觉前提你已经使用的jquery,否则那么大的js类,没必要用的吧,可以查看脚本之家以前提高的代码。
    2009-05-05
  • 基于JQuery的多标签实现代码

    基于JQuery的多标签实现代码

    最近在学习JQuery,其实也不叫学习,很久以前就学过,只是有一段时间没用,有些生疏了,于是就做几个小例子来练习练习,为了方便以后查找就将这些小示例记录下来
    2012-09-09
  • jQuery实现切换隐藏与显示同时切换图标功能

    jQuery实现切换隐藏与显示同时切换图标功能

    这篇文章主要介绍了jQuery实现切换隐藏与显示同时切换图标功能,需要的朋友可以参考下
    2017-10-10
  • jquery ready函数源代码研究

    jquery ready函数源代码研究

    我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?
    2009-12-12

最新评论