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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery图片放大镜效果
Jun 23 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery实现简易验证插件封装
Sep 13 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
vuejs如何配置less
2017/04/25 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
python读写文件操作示例程序
2013/12/02 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python正则表达式常用函数总结
2017/06/24 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
迟到检讨书500字
2014/02/05 职场文书
本科生自荐信
2014/06/18 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
地方课程教学计划
2015/01/19 职场文书
网络研修随笔感言
2015/11/18 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server