【轉】json格式化、高亮庫jsonFormater

時間 2019-11-19

標籤 json 格式化 jsonformater 欄目 JavaScript 简体版

原文原文鏈接

http://leo108.com/pid-1996.aspjavascript

JsonFormater

基於jQuery的json格式化、高亮庫

核心代碼參考天馬行空工做室，本人只作了模塊化和一些代碼優化。css

demo

http://leo108.github.io/jsonFormater/html

github地址

https://github.com/leo108/jsonFormaterjava

使用方式

引入jQuery

 
      1 
      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

注意：jQuery版本要求>=1.7.2jquery

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

調用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 
      });

效果圖

詳細使用方式

配置

支持的配置以及默認配置以下:github

 
      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層