JsonFormater

基于jQuery的json格式化、高亮库

核心代码参考，本人只做了模块化和一些代码优化。

demo

github地址

使用方式

引入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层