jQuery插件jsonview展示json數(shù)據(jù)

更新時(shí)間：2018年05月26日 16:37:14 作者：阿杜_(tái)ardo

這篇文章主要為大家詳細(xì)介紹了jQuery插件jsonview展示json數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery插件jsonview展示json數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

項(xiàng)目中要展示json數(shù)據(jù)，自己寫一套html來(lái)展示太麻煩，可以使用jquery的插件jsonview來(lái)解決這個(gè)問(wèn)題。

首先，去jquery官網(wǎng)下載最新的jsonview插件，放在js目錄中，下載地址。

其次，在html中加入以下代碼：

<div class="col-lg-6"> 
 <section class="panel" style="height:600px"> 
  <header class="panel-heading"> 
   JSON數(shù)據(jù) 
  </header> 
  <div class="panel-body" style="height:580px;overflow:auto"> 
   <input type="hidden" name="json_data" id="json_data" value="{{ json_data }}"/> 
   <button id="collapse-btn">折疊</button> 
   <button id="expand-btn">展開</button> 
   <button id="save-btn">保存</button> 
   <div id="json"></div> 
  </div> 
 </section> 
</div>

然后，在js中增加js控制方法：

<script type="text/javascript"> 
 var raw_json = $("#json_data").val(); 
 var json = JSON.parse(raw_json); 
 $(function() { 
  $("#json").JSONView(json); 
 
  $("#json-collapsed").JSONView(json, {collapsed: true, nl2br: true}); 
 
  $('#collapse-btn').on('click', function() { 
  $('#json').JSONView('collapse'); 
  }); 
 
  $('#expand-btn').on('click', function() { 
  $('#json').JSONView('expand'); 
  }); 
 }); 
</script>

可以自動(dòng)解析json給其加入html樣式，并且jquery.jsonview.js也是使用jquery寫的插件工具，可以根據(jù)自己需求修改。最終結(jié)果展示如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JQuery 又談ajax局部刷新
這篇文章主要為大家詳細(xì)介紹了JQuery ajax局部刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法
這篇文章主要介紹了jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法,需要的朋友可以參考下
2014-05-05
10分鐘學(xué)會(huì)寫Jquery插件實(shí)例教程
這篇文章主要介紹了10分鐘學(xué)會(huì)寫Jquery插件,通過(guò)一個(gè)實(shí)例分兩步完成一個(gè)簡(jiǎn)單的插件,非常實(shí)用,需要的朋友可以參考下
2014-09-09
jquery點(diǎn)擊改變class并toggle的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery點(diǎn)擊改變class并toggle的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jQuery.trim() 函數(shù)及trim()用法詳解
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符。jquery trim函數(shù)應(yīng)用非常廣泛，下面小編給大家講解jquery.trim（）函數(shù)及trim()用法詳解，需要的朋友可以參考下
2015-10-10
jquery 添加節(jié)點(diǎn)的幾種方法介紹
添加節(jié)點(diǎn)的方法有很多，在本文將為大家介紹下jquery中添加節(jié)點(diǎn)幾種方法，感興趣的朋友可以參考下
2013-09-09
jquery cookie插件代碼類
jquery cookie插件代碼類，使用這個(gè)就可以方便的控制的cookie了，但感覺(jué)前提你已經(jīng)使用的jquery,否則那么大的js類，沒(méi)必要用的吧，可以查看腳本之家以前提高的代碼。
2009-05-05
基于JQuery的多標(biāo)簽實(shí)現(xiàn)代碼
最近在學(xué)習(xí)JQuery，其實(shí)也不叫學(xué)習(xí)，很久以前就學(xué)過(guò)，只是有一段時(shí)間沒(méi)用，有些生疏了，于是就做幾個(gè)小例子來(lái)練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來(lái)
2012-09-09
jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能,需要的朋友可以參考下
2017-10-10
jquery ready函數(shù)源代碼研究
我們都知道,很多時(shí)候,在頁(yè)面加載完后都需要做一些相應(yīng)的初始化動(dòng)作.例如,運(yùn)行某些js特效,設(shè)置表單等等.怎么知道頁(yè)面加載完了呢?
2009-12-12