JSONView介绍
jQuery插件，用于显示漂亮的JSON。
官网地址：https://plugins.jquery.com/jsonview/
git地址：https://github.com/yesmeck/jquery-jsonview
JSONView使用
1、下载jsonview插件
2、在html中引入插件
1 <link rel="stylesheet" href="jquery.jsonview.css" /> 2 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 3 <script type="text/javascript" src="jquery.jsonview.js"></script>
3、js中调用（本例对js做了修改，多引入了2个选项：key_marks、link_marks）
1 <script type="text/javascript"> 2 var json = { 3 "he<y": "guy", 4 "anumber": 243, 5 "anobject": { 6 "whoa": "nuts", 7 "anarray": [1, 2, "thr<h1>ee"], 8 "more":"stuff" 9 }, 10 "awesome": true, 11 "bogus": false, 12 "meaning": null, 13 "japanese":"明日がある。", 14 "link": "http://jsonview.com", 15 "notLink": "http://jsonview.com is great", 16 "multiline": ['Much like me, you make your way forward,', 17 'Walking with downturned eyes.', 18 'Well, I too kept mine lowered.', 19 'Passer-by, stop here, please.'].join("\n") 20 }; 21 $(function() { 22 $("#json").JSONView(json); 23 24 /* 25 collapsed：是否在第一次渲染时收缩所有的节点，默认值为：false。 26 nl2br：是否将一个新行转换为<br>字符串，默认值为false。 27 recursive_collapser：是否递归收缩节点，默认值为false。 28 key_marks:是否为key添加双引号，默认值为false。 29 link_marks:是否为连接添加双引号，默认值为false。 30 */ 31 $("#json-collapsed").JSONView(json, { collapsed: true, nl2br: true, recursive_collapser: true, key_marks: true, link_marks: true }); 32 33 $('#collapse-btn').on('click', function() { 34 $('#json').JSONView('collapse'); 35 }); 36 37 $('#expand-btn').on('click', function() { 38 $('#json').JSONView('expand'); 39 }); 40 41 $('#toggle-btn').on('click', function() { 42 $('#json').JSONView('toggle'); 43 }); 44 45 $('#toggle-level1-btn').on('click', function() { 46 $('#json').JSONView('toggle', 1); 47 }); 48 49 $('#toggle-level2-btn').on('click', function() { 50 $('#json').JSONView('toggle', 2); 51 }); 52 }); 53 </script>
具体html，js，css文件如下：
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQuery JSONView</title> 6 <link rel="stylesheet" href="jquery.jsonview.css" /> 7 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 8 <script type="text/javascript" src="jquery.jsonview.js"></script> 9 <script type="text/javascript"> 10 var json = { 11 "he<y": "guy", 12 "anumber": 243, 13 "anobject": { 14 "whoa": "nuts", 15 "anarray": [1, 2, "thr<h1>ee"], 16 "more":"stuff" 17 }, 18 "awesome": true, 19 "bogus": false, 20 "meaning": null, 21 "japanese":"明日がある。", 22 "link": "http://jsonview.com", 23 "notLink": "http://jsonview.com is great", 24 "multiline": ['Much like me, you make your way forward,', 25 'Walking with downturned eyes.', 26 'Well, I too kept mine lowered.', 27 'Passer-by, stop here, please.'].join("\n") 28 }; 29 $(function() { 30 $("#json").JSONView(json); 31 32 /* 33 collapsed：是否在第一次渲染时收缩所有的节点，默认值为：false。 34 nl2br：是否将一个新行转换为<br>字符串，默认值为false。 35 recursive_collapser：是否递归收缩节点，默认值为false。 36 key_marks:是否为key添加双引号，默认值为false。 37 link_marks:是否为连接添加双引号，默认值为false。 38 */ 39 $("#json-collapsed").JSONView(json, { collapsed: true, nl2br: true, recursive_collapser: true, key_marks: true, link_marks: true }); 40 41 $('#collapse-btn').on('click', function() { 42 $('#json').JSONView('collapse'); 43 }); 44 45 $('#expand-btn').on('click', function() { 46 $('#json').JSONView('expand'); 47 }); 48 49 $('#toggle-btn').on('click', function() { 50 $('#json').JSONView('toggle'); 51 }); 52 53 $('#toggle-level1-btn').on('click', function() { 54 $('#json').JSONView('toggle', 1); 55 }); 56 57 $('#toggle-level2-btn').on('click', function() { 58 $('#json').JSONView('toggle', 2); 59 }); 60 }); 61 </script> 62 </head> 63 <body> 64 <h2>Data</h2> 65 <button id="collapse-btn">Collapse</button> 66 <button id="expand-btn">Expand</button> 67 <button id="toggle-btn">Toggle</button> 68 <button id="toggle-level1-btn">Toggle level1</button> 69 <button id="toggle-level2-btn">Toggle level2</button> 70 <div id="json"></div> 71 <h2>Data Collapsed</h2> 72 <div id="json-collapsed"></div> 73 </body> 74 </html>