格式化json数据展示可折叠样式

叁歲伎倆 2022-06-02 00:38 426阅读 0赞

**有很多时候我们需要展示json数据，并不仅仅是数据展示，如让json中的数据像树形一样展示实现可折叠，废话不多说直接上步骤：**

**1.项目中引入外部插件（可以百度或者加入下方交流群，群里有你想要的！）**

**jquery.json-viewer.js**

**2.页面的写法**

**<!DOCTYPE html>  
<html lang="zh">  
<head>  
<meta charset="UTF-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>jQuery查看json格式数据插件</title>  
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">  
<link href="css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />  
<style>  
body\{background-color: \#F7F7F7\}  
</style>  
</head>  
<body>  
<div class="jq22-container">  
  <div class="container"  style="margin-top: 1em;">  
    <div class="row">  
      <textarea class="form-control" id="json-input" rows="15" >  
\{  
  "id": 1001,  
  "type": "donut",  
  "name": "Cake",  
  "description": "http://www.jq22.com",  
  "price": 2.55,  
  "available": \{  
    store: 42,  
    warehouse: 600  
  \},  
  "topping": \[  
    \{ "id": 5001, "type": "None" \},  
    \{ "id": 5002, "type": "Glazed" \},  
    \{ "id": 5005, "type": "Sugar" \},  
    \{ "id": 5003, "type": "Chocolate" \},  
    \{ "id": 5004, "type": "Maple" \}  
  \]  
\}  
</textarea>    
      <pre id="json-renderer"></pre>  
    </div>  
  </div>  
    
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>  
<script src="js/jquery.json-viewer.js"></script>   
<script type="text/javascript">  
$(function() \{  
  
    try \{  
//获取该json数据  
      var input = eval('(' + $('\#json-input').val() + ')');  
    \}  
    catch (error) \{  
      return alert("Cannot eval JSON: " + error);  
    \}   
//初始化json格式折叠展示  
    $('\#json-renderer').jsonViewer(input);  
\});  
</script>  
</body>  
</html>**

**3.最终页面显示效果如下：**

**![Center][]**

**向下箭头均可点击折叠该json数据！**

**如有披露或问题欢迎留言或者入群探讨**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70][]

[Center]: /images/20220602/1c284b35b0d045f6915013fb4945ca19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70]: /images/20220602/521e959b1d76448b8e2a1a06e949918c.png