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写的插件工具，可以根据自己需求修改。最终结果展示如下：

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

html json解析插件,jQuery插件jsonview展示json数据相关推荐

转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
241个jquery插件—jquery插件大全
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
Esp8266 --深入分析官方json解析源码及如何使用json接口解析心知天气
什么是json? 懵逼回答:[参考菜鸟教程] a.JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) b.JSON 是轻量级的文本数据交 ...
JSON解析格式化工具——非插件（超好用推荐）
原因:云桌面上外网连不上,不能用在线json解析,就想找个程序工具或者Chrome插件. 以为就一个小插件一小会就能弄好,结果找了好几个网址用了快有一小时才找到满意的,chrome搬运的下载资源都试了 ...
php无刷新分页插件,jQuery插件jPaginate实现无刷新分页_jquery
jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. PHP读取第一页数 ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
jQuery-------zTree树形插件-jQuery插件
解压zTree_v3-master,查看demo 使用浏览器访问\zTree_v3-master\demo\cn的index.html页面案例:最简单的树-标准json数据步骤 1. 查看/dem ...
diolog js_js组件-js插件-jquery插件-dialog对话框弹层
dialog js dialog弹窗用法这是内容这是内容 var dialog = new Dialog(); dialog.init({target:"#dialog-content ...
html 图片旋转插件,jQuery插件expander实现图片翻转特效
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS expander.min.js ...

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

html json解析插件,jQuery插件jsonview展示json数据相关推荐

最新文章

热门文章