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的更多相关文章

  1. yformater - chrome谷歌浏览器json格式化json高亮json解析插件

    yformater是一款chrome浏览器插件,用来格式化(高亮)服务端接口返回的json数据. 实际上小菜并不是第一个写这种插件的,但是现有的chrome json格式化插件实在是不太好用,索性小菜 ...

  2. 浏览器json格式化插件 yformater

    本人最近做的工作就是写interface,几个前端写前端,他们需要什么样的数据格式,我就得返回这样的数据格式.这就导致每一个接口都得检查json格式是否是他们所需要的.但浏览器直接请求的json格式很 ...

  3. json 格式化处理工具

    json 格式化处理工具 用于JSON的快速命令行处理工具,简单无依赖. 我这边列举一些最常用的: 调试 http 请求时打印格式化后的数据 格式化本地或或流中的数据 获取 json 的键值或进行执行 ...

  4. JSON格式化与serialize序列化

    一.JSON格式化 1. JSON是什么 JSON是一种数据的存储格式,用来沟通客户端Javascript和服务端PHP的交互.我们把用PHP生成JSON后的字符串传给前台Javascript,Jav ...

  5. JSON格式化 JSON美化 输出到html

    {"promotion_details":{"promotion_detail":[{"discount_fee":"22.20& ...

  6. asp.net中json格式化及在js中解析json

    类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...

  7. iOS 手动打造JSON Model转换库

    前一段时间学习了Runtime,对类和对象的结构,和一些消息转发有一些自己的理解,现在希望简单的应用下,就决定自己写一个简单的JSON与Model的相互转化,现在总结下. 建议查看 参考资料 :Run ...

  8. json格式化和查看工具

    以前一直以来都觉得xml个可读性要比json的可读性好,后来使用了JSON Viewer这个小工具之后,发现自己错了.之前认为json的可读性差,完全是因为没有很好的查看工具.JSON Viewer这 ...

  9. ABP入门系列(8)——Json格式化

    ABP入门系列目录--学习Abp框架之实操演练 讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一节讲呢?当然是做铺垫啊,后面的系列文章会经常和Json ...

随机推荐

  1. 利用URL重写隐藏复杂的URL

    第一步:模拟映射页面 我们想在一个页面上点击guid.html链接,跳转到比较复杂URL的guid_{492f3e0b-848e-11da-9550-00e08161165f}.html页面.即定义一 ...

  2. Tyvj P1520 树的直径

    P1520 树的直径 http://www.tyvj.cn/p/1520 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 树的直径,即这棵树中距离最远的两个结 ...

  3. django 数据库建表流程,与表结构

    目录 配置数据库 创建表结构 多表关连的设置 自创建关联表方法 自建表 和 ManyToManyField 联合使用 配置数据库 在Django项目的settings.py文件中,配置数据库连接信息: ...

  4. wamp的HTTPS配置

    1.需要去申请ssl证书 2.打开wamp的apache的配置文件:httpd.conf 找到 LoadModule ssl_module modules/mod_ssl.so Include con ...

  5. P1308-道路修建 (noi 2011)

    题目描述 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1 条双向道路. 每条道 ...

  6. 黑马SSM练习中 Oracle SQL代码

    -- 10张表 product member orders traveller order_traveller users role permission users_role role_permis ...

  7. SQL Server权限设置

    常用的几个系统表:(其实是View) sysdatabases,主数据库,服务器上的数据库 sysobjects,每个数据库,所有数据库对象 syscolumns,每个数据库,列 sysprocess ...

  8. 长春理工大学第十四届程序设计竞赛(重现赛)L.Homework Stream

    链接:https://ac.nowcoder.com/acm/contest/912/L 题意: 作为大珩班尖子生,小r每天有很多作业要完成,例如工图.工图和工图. 很显然,做作业是要有顺序的.作业之 ...

  9. 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, ...

  10. CodeForces - 608A-Saitama Destroys Hotel(模拟)

    Saitama accidentally destroyed a hotel again. To repay the hotel company, Genos has volunteered to o ...