json 格式 数据的可视化及修改操作在前端的实现
日期： 2019-04-09 分类： 个人收藏 368次阅读
在一般情况下前后端交互我们只需要提取 json 中我们所需要的数据拿来使用即可，但是如果需要将很长的json进行展示重新写无疑是一件比较痛苦的事情，这里对于json的可视化方面推荐两个较为简洁的框架：
jquery.json-viewer （官方网站）
这个框架导入需要依赖jQuery，之后只需导入一个js文件及一个css文件即可完成配置，相关文件可以在官网给出的GitHub地址中下载，下面给出我的demo代码，值得注意的是四个参数的设定（collapsed , rootCollapsable, withQuotes, withLinks），这个官网中有相关说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquery.json-viewer.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.json-viewer.css" />
</head>
<body>
<button onclick="expand()">展开</button>
<button onclick="collapse()">折叠</button>
<pre id="json-renderer"></pre>
<script type="text/javascript">
var data = {
"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"
} ]
}
function expand() {
$("#json-renderer").jsonViewer(data, {
collapsed: false,
rootCollapsable: true,
withQuotes: false,
withLinks: true
});
flag = false;
};
function collapse() {
$("#json-renderer").jsonViewer(data, {
collapsed: true,
rootCollapsable: true,
withQuotes: false,
withLinks: true
});
flag = true;
};
</script>
</body>
</html>
展示效果如下
JsonEditor （官方网站）
这个框架功能较为多些，可以对json进行可视化的添加、修改及删除的操作，如需使用可以从GitHub地址中下载即可直接使用，对于json数据的操作我们只需要关注jsoneditor.js这个文件即可，并且可以很容易的根据我们的需求修改，下面给出我简化的代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jsoneditor.css"/>
<link rel="icon" href="logo-small.png"/>
<title>Flexi JSON Editor and Inspector</title>
<style>
body {
padding: 0 70px;
}
#json {
margin: 10px 10px 10px 32px;
width: 50%;
min-height: 70px;
}
h1 {
font-family: Arial;
color: #EBBC6E;
text-align: center;
text-shadow: 1px 1px 1px black;
border-bottom: 1px solid gray;
padding-bottom: 50px;
width: 500px;
margin: 20px auto;
}
h1 img {
float: left;
}
h1 b {
color: black;
font-weight: normal;
display: block;
font-size: 12px;
text-shadow: none;
}
#legend {
display: inline;
margin-left: 30px;
}
#legend h2 {
display: inline;
font-size: 18px;
margin-right: 20px;
}
#legend a {
color: white;
margin-right: 20px;
}
#legend span {
padding: 2px 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 1px black;
background-color: black;
}
#legend .string { background-color: #009408; }
#legend .array { background-color: #2D5B89; }
#legend .object { background-color: #E17000; }
#legend .number { background-color: #497B8D; }
#legend .boolean { background-color: #B1C639; }
#legend .null { background-color: #B1C639; }
#expander {
cursor: pointer;
margin-right: 20px;
}
#footer {
font-size: 13px;
}
#rest {
margin: 20px 0 20px 30px;
}
#rest label {
font-weight: bold;
}
#rest-callback {
width: 70px;
}
#rest-url {
width: 700px;
}
label[for="json"] {
margin-left: 30px;
display: block;
}
#json-note {
margin-left: 30px;
font-size: 12px;
}
.addthis_toolbox {
position: relative;
top: -10px;
margin-left: 30px;
}
#disqus_thread {
margin-top: 50px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
<!--<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5029684-7']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>-->
</head>
<body>
<!--<h1>
<img src="logo-small.png" alt="FlexiJSONEditor logo" />
<span>JSON Editor and Inspector</span>
<b>Inspect your JSON structures with ease.</b>
</h1>
<div id="legend">
<span><a href="http://www.daviddurman.com">Blog post & Usage</a></span>
<span id="expander">Expand all</span>
<span class="array">array</span>
<span class="object">object</span>
<span class="string">string</span>
<span class="number">number</span>
<span class="boolean">boolean</span>
<span class="null">null</span>
<span>Remove item by deleting a property name.</span>
</div>
<div id="rest">
<label>JSONP: </label><br/>
Callback: <input type="text" id="rest-callback" value="_callback" />
URL: <input type="text" value="" id="rest-url" />
<button id="btn-rest-url">display JSON</button>
</div>-->
<pre id="path"></pre>
<div id="editor" class="json-editor"></div>
<!--<label for="json">Or paste JSON directly here:</label>-->
<!--<p id="json-note">Note that you can edit your JSON directly in the textarea below.
The JSON viewer will get updated when you leave the field.</p>-->
<!--<textarea id="json"></textarea><br/>-->
<!--<p id="footer">Copyright © 2011-2013 David Durman (client IO, <a href="http://client.io">http://client.io</a>, org@client.io)</p>-->
<script src="json2.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.jsoneditor.js"></script>
<script src="jsoneditor.js"></script>
</body>
</html>
其效果如下
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
精华推荐