jQuery插件jsonview展示json数据


Posted in jQuery onMay 26, 2018

本文实例为大家分享了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插件jsonview展示json数据

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

jQuery 相关文章推荐
jquery.validate表单验证插件使用详解
Jun 21 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
20个最常见的jQuery面试问题及答案
May 23 #jQuery
You might like
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
JavaScript闭包和回调详解
2017/08/09 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
js尾调用优化的实现
2019/05/23 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python每天定时运行某程序代码
2019/08/16 Python
基于python监控程序是否关闭
2020/01/14 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
keras slice layer 层实现方式
2020/06/11 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
社团个人总结范文
2015/03/05 职场文书
自主招生英文自荐信
2015/03/25 职场文书
捐书活动倡议书
2015/04/27 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS