首页 > 代码库 > 【转】json格式化、高亮库jsonFormater

【转】json格式化、高亮库jsonFormater

2024-08-22 16:40:25   224人阅读

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=http://www.mamicode.com/"jquery-1.7.2.min.js"></script>

注意：jQuery版本要求>=1.7.2

 

引入jsonFormater.js和jsonFormater.css

1<script type="text/javascript" src=http://www.mamicode.com/"jsonFormater.js"></script>
2<link href=http://www.mamicode.com/"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});

效果图

技术分享

详细使用方式

配置

支持的配置以及默认配置如下:

view source
 
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}

方法

1var obj = new JsonFormater({dom: ‘#container‘});
2obj.doFormat(json) //格式化一个json字符串或者js对象
3obj.expandAll()    //全部展开
4obj.collapseAll()  //全部收起
5obj.collapseLevel(level)  //展开到level层

【转】json格式化、高亮库jsonFormater


联系
我们