html json解析插件,jQuery插件jsonview展示json数据

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

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

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

其次,在html中加入以下代码:

JSON数据

折叠

展开

保存

然后,在js中增加js控制方法:

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');

});

});

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python3.5安装pygame_python怎么安装pygame

Pygame 是一种流行的 Python 包,用于编写游戏-鼓励学生学习编程,同时创建有趣的东西。 Pygame 在新窗口中显示图形,因此它将 无法在 WSL 的命令行方法下运行。 但是,如果您通过本教程中所述的 Microsoft Store 安装了 Python&…

所属的用户_关于chmod(变更用户对此文件的相关权限)超详细说明,小白秒懂

Linux下一切都是文件,通过ls -l或者别名ll可以查看文件的详细信息:drwxr-xr-x 第一个字符d指的是目录文件;第2-4个字符rwx:指的是u(user,owner)对这个文件具有可读可写可执行的权限;第5-7字符r-x:指的是g(group)对这个文件具有可读可执行权限&#xff1b…

台式计算机计量单位,计算机的计量单位以及常见的数据类型

为什么会写这篇文章,面试官问数据类型占字节大小干什么。实际开发中,你肯定计算预估过一些数据具体要占多少磁盘,或者是内存。如果你没有不去在意这些东西,很多服务器资源,都会被无形的浪费掉。我们知道计算机的世界其…

cad线性标注命令_CAD常用标注快捷键和命令

点击上方 “CAD自学网 ” → 点击右上角“...” → 点选“设为星标 ★ ”为CAD自学网加上星标,即可及时收到干货啦!左下角阅读原文看CAD视频站长推荐:1、CAD2014快速精通进阶提高教程:点击查看 2、室内设计全屋定制全套视频教程&…

计算机怎么设置网络共享,局域网共享设置,教您电脑怎么设置局域网共享

前两天,遇到位朋友说他刚买了台新的电脑,加上原来家里原有的两台电脑了,就三台了,现在想要三台电脑都能够进行一个共享职员的这么设置,就是不知道如何在局域网里怎么设置共享,下面,小编就来跟大…

python中的类装饰器应用场景_Python 自定义装饰器使用写法及示例代码

1、Python装饰器简介 python的装饰器就是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象。简单的说装饰器就是一个用来返回函数的函数。 它经常用于有切面需求的场景,比如&…

html引用外部导入式css文件夹,css文件内引用外部资源文件的相对路径

1.default.css文件内容(位于css文件夹下):.ClassName .ClassName .ClassName.page-sidebar .sidebar-search .submit {--该图片相对于css文件所在的位置。不是使用本css文件的html文件位置。background-image: url(../image/search-icon.png);}2.使用本css文件的htm…

京东五星电器送扫地机器人_家电也流行“套餐”,京东五星电器吹响国庆家装“集结号”...

“70吋超薄激光电视、大容量多门法式冰箱、烘干一体滚筒洗衣机、蒸烤一体机、扫地机器人……”一系列的新房采购清单让宿迁的谭小姐直呼头痛,“挑选品牌和型号,比较价格,还要想着跟装修风格是否搭配,好浪费时间。”在线下实体店迎…

c++设置单元格填充色_格式函数text,设置自定义格式的万金油

在日常的数据处理统计中,我们知道,数据格式标准统一,是很重要的前提,如果数据混乱,那么,在后期的数据处理分析,excel就会耍脾气出错的。所以设置好数据格式,是相当重要的。今天&…

生成html_听说你不会用Python将字符串生成PDF?来,我教你!

这是恋习Python推荐的第118篇好文来源:Python爬虫与算法作者:jclian笔者在今天的工作中,遇到了一个需求,那就是如何将Python字符串生成PDF。比如,需要把Python字符串‘这是测试文件’生成为PDF, 该PDF中含有文字‘这是…

大学计算机基础python第二次作业_python第二次作业-titanic数据集练习

一、读入titanic.xlsx文件,按照教材示例步骤,完成数据清洗。 titanic数据集包含11个特征,分别是: Survived:0代表死亡,1代表存活 Pclass:乘客所持票类,有三种值(1,2,3) Name:乘客姓名 Sex:乘客性别 Age:乘客…

大一计算机上机试题2017,2017历年全国计算机二级ACCESS上机试题及答案

可通过实际操作,锻炼Access的学习能力,动手能力,编程思想锻炼等,也可以作为access 数据库国际二级考试使用呢历年Access操作试题解析(2017.5.8整理,可能为2015年以前的)第一套一、基本操作题(计30分)(1)新建数据库"学生.mdb",将考生文件夹中的…

怎么做手机的上下滑动_手机视频恢复怎么做?删除时间较久的找回方法

手机视频恢复?话说到手机视频误删的情况对于一些用户来说是常态,手机视频多又杂,经常全选删除,不小心多选了没有发现就给一起删除了!事隔多个月以后突然要用到,却怎么也找不到了,最近删除相册也…

大唐发电厂计算机考试题,全国计算机等级考试上机考试与题库解析:一级B

全国计算机等级考试上机考试与题库解析:一级B语音编辑锁定讨论上传视频《全国计算机等级考试上机考试与题库解析一级B》是2011年北京邮电大学出版社出版的图书。本书在研究历年上机真题(库)的基础上,将常考题型提炼出来,对其进行了细致深入的…

opencv利用矩形框选中某一区域_【从零学习OpenCV】4Ubuntu系统中安装OpenCV 4

经过几个月的努力,小白终于完成了市面上第一本OpenCV 4入门书籍《从零学习OpenCV 4》。为了更让小伙伴更早的了解最新版的OpenCV 4,小白与出版社沟通,提前在公众号上连载部分内容,请持续关注小白。Ubuntu系统中安装OpenCV 4前面我…

python中str和int区别_python中eval与int的区别浅析

python中eval和int的区别是什么&#xff1f;下面给大家介绍一下: 1.eval()函数 eval(<字符串>)能够以Python表达式的方式解析并执行字符串&#xff0c;并将返回结果输出。eval()函数将去掉字符串的两个引号&#xff0c;将其解释为一个变量。 作用&#xff1a; a. 处理数字…

英伟达最大gpu_英伟达正式发布Ampere架构GPU,完成史上最大性能飞跃

PingWest品玩5月14日讯&#xff0c;在GTC 2020线上发布会上&#xff0c;英伟达CEO黄仁勋正式推出了安培(Ampere)架构GPU。据其表示&#xff0c;这块芯片采用7nm工艺&#xff0c;540亿晶体管&#xff0c;20倍AI算力&#xff0c;实现5大技术创新。黄仁勋表示&#xff0c;“这是英…

学计算机语言需要什么基础,学习计算机语言需要什么基础

学语言其实很有意思&#xff0c;但鉴于你的职业是学生&#xff0c;国籍是中国&#xff0c;建议在学有余力的情况下学习&#xff0c;尤其不要为了计算机特招而学。语言分为高级语言&#xff0c;汇编语言&#xff0c;机器语言。其实什么高级语言都差不多&#xff0c;只要学会一种…

c++ map 析构函数_C++|类继承关系中的虚函数、虚析构函数、虚基类

在继承关系中&#xff0c;虚函数、虚析构函数、虚基类中使用的关键字virtual都是在告诉编译器&#xff0c;此处要进行特殊处理&#xff1a;虚函数&#xff1a;函数重写时的要求编译器动态绑定来实现多多态 &#xff1b;虚析构函数&#xff1a;当基类指针指向在堆内实现的派生类…

python计算面积折线图_Python交互图表可视化Bokeh:4. 折线图| 面积图

折线图与面积图① 单线图、多线图② 面积图、堆叠面积图1. 折线图--单线图importnumpy as npimportpandas as pdimportmatplotlib.pyplot as plt%matplotlib inlineimportwarningswarnings.filterwarnings(ignore)#不发出警告from bokeh.io importoutput_notebookoutput_notebo…