【转】json格式化、高亮库jsonFormater
http://leo108.com/pid-1996.asp
JsonFormater
基于jQuery的json格式化、高亮库
核心代码参考天马行空工作室,本人只做了模块化和一些代码优化。
demo
http://leo108.github.io/jsonFormater/
github地址
https://github.com/leo108/jsonFormater
使用方式
引入jQuery
1 |
<script type= "text/javascript" src= "jquery-1.7.2.min.js" ></script> |
注意:jQuery版本要求>=1.7.2
引入jsonFormater.js和jsonFormater.css
1 |
<script type= "text/javascript" src= "jsonFormater.js" ></script> |
2 |
<link href= "jsonFormater.css" type= "text/css" rel= "stylesheet" /> |
在html中新增一个空的元素作为显示的容器
例如<div id='container'></div>
调用JsonFormater
1 |
$(document).ready( function (){ |
2 |
var options = { |
3 |
dom : '#container' //对应容器的css选择器 |
4 |
}; |
5 |
var jf = new JsonFormater(options); //创建对象 |
6 |
jf.doFormat( '{"string":"leo108"}' ); //格式化json |
7 |
}); |
效果图
详细使用方式
配置
支持的配置以及默认配置如下:
1 |
{ |
2 |
dom: '' , //用于放置的dom的选择器 |
3 |
singleTab: " " , //单个tab |
4 |
tabSize: 2, //缩进数量 |
5 |
quoteKeys: true , //key是否用双引号包含 |
6 |
imgCollapsed: "images/Collapsed.gif" , //收起的图片路径 |
7 |
imgExpanded: "images/Expanded.gif" , //展开的图片路径 |
8 |
isCollapsible: true //是否支持展开收起 |
9 |
} |
方法
1 |
var obj = new JsonFormater({dom: '#container' }); |
2 |
obj.doFormat(json) //格式化一个json字符串或者js对象 |
3 |
obj.expandAll() //全部展开 |
4 |
obj.collapseAll() //全部收起 |
5 |
obj.collapseLevel(level) //展开到level层
|
【转】json格式化、高亮库jsonFormater的更多相关文章
- yformater - chrome谷歌浏览器json格式化json高亮json解析插件
yformater是一款chrome浏览器插件,用来格式化(高亮)服务端接口返回的json数据. 实际上小菜并不是第一个写这种插件的,但是现有的chrome json格式化插件实在是不太好用,索性小菜 ...
- 浏览器json格式化插件 yformater
本人最近做的工作就是写interface,几个前端写前端,他们需要什么样的数据格式,我就得返回这样的数据格式.这就导致每一个接口都得检查json格式是否是他们所需要的.但浏览器直接请求的json格式很 ...
- json 格式化处理工具
json 格式化处理工具 用于JSON的快速命令行处理工具,简单无依赖. 我这边列举一些最常用的: 调试 http 请求时打印格式化后的数据 格式化本地或或流中的数据 获取 json 的键值或进行执行 ...
- JSON格式化与serialize序列化
一.JSON格式化 1. JSON是什么 JSON是一种数据的存储格式,用来沟通客户端Javascript和服务端PHP的交互.我们把用PHP生成JSON后的字符串传给前台Javascript,Jav ...
- JSON格式化 JSON美化 输出到html
{"promotion_details":{"promotion_detail":[{"discount_fee":"22.20& ...
- asp.net中json格式化及在js中解析json
类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...
- iOS 手动打造JSON Model转换库
前一段时间学习了Runtime,对类和对象的结构,和一些消息转发有一些自己的理解,现在希望简单的应用下,就决定自己写一个简单的JSON与Model的相互转化,现在总结下. 建议查看 参考资料 :Run ...
- json格式化和查看工具
以前一直以来都觉得xml个可读性要比json的可读性好,后来使用了JSON Viewer这个小工具之后,发现自己错了.之前认为json的可读性差,完全是因为没有很好的查看工具.JSON Viewer这 ...
- ABP入门系列(8)——Json格式化
ABP入门系列目录--学习Abp框架之实操演练 讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一节讲呢?当然是做铺垫啊,后面的系列文章会经常和Json ...
随机推荐
- 利用URL重写隐藏复杂的URL
第一步:模拟映射页面 我们想在一个页面上点击guid.html链接,跳转到比较复杂URL的guid_{492f3e0b-848e-11da-9550-00e08161165f}.html页面.即定义一 ...
- Tyvj P1520 树的直径
P1520 树的直径 http://www.tyvj.cn/p/1520 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 树的直径,即这棵树中距离最远的两个结 ...
- django 数据库建表流程,与表结构
目录 配置数据库 创建表结构 多表关连的设置 自创建关联表方法 自建表 和 ManyToManyField 联合使用 配置数据库 在Django项目的settings.py文件中,配置数据库连接信息: ...
- wamp的HTTPS配置
1.需要去申请ssl证书 2.打开wamp的apache的配置文件:httpd.conf 找到 LoadModule ssl_module modules/mod_ssl.so Include con ...
- P1308-道路修建 (noi 2011)
题目描述 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1 条双向道路. 每条道 ...
- 黑马SSM练习中 Oracle SQL代码
-- 10张表 product member orders traveller order_traveller users role permission users_role role_permis ...
- SQL Server权限设置
常用的几个系统表:(其实是View) sysdatabases,主数据库,服务器上的数据库 sysobjects,每个数据库,所有数据库对象 syscolumns,每个数据库,列 sysprocess ...
- 长春理工大学第十四届程序设计竞赛(重现赛)L.Homework Stream
链接:https://ac.nowcoder.com/acm/contest/912/L 题意: 作为大珩班尖子生,小r每天有很多作业要完成,例如工图.工图和工图. 很显然,做作业是要有顺序的.作业之 ...
- CodeForces - 500A-New Year Transportation(模拟)
New Year is coming in Line World! In this world, there are n cells numbered by integers from 1 to n, ...
- CodeForces - 608A-Saitama Destroys Hotel(模拟)
Saitama accidentally destroyed a hotel again. To repay the hotel company, Genos has volunteered to o ...