loader
29 Oct , 2019

Layui结合JSONView插件实现json格式化

author

Mr.PAN 本站原创

shape animated shape animated shape animated

使用第三方账号注册

使用手机号/邮箱注册

需要实现这个一个功能,就是查看详细的json代码,最好是实现json代码的折叠与展示功能,在页面弹出层用到了layui中的layer组件,在组件中展示的内容就是json格式的代码,实例如下所示:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQuery JSONView</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css" />
    <link rel="stylesheet" href="./jquery.jsonview.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
    <script type="text/javascript" src="./jquery.jsonview.js"></script>     
</head>
<body>
    <div id="json-view"></div>
</body>
<script>
    layui.use(['layer'], function() {
        var layer = layui.layer,json = {
            "name": "潘旭博客",
            "anumber": 243,
            "anobject": {
                "whoa": "nuts",
                "anarray": [1, 2, "thr<h1>ee"],
                "more": "stuff"
            },
            "link": "https://panxu.net",
            "multiline": ['Much like me, you make your way forward,',
                'Walking with downturned eyes.',
                'Well, I too kept mine lowered.',
                'Passer-by, stop here, please.'
            ].join("\n")
        }; 
        layer.open({
            type: 1,
            area: ['700px', '450px'],
            fixed: false,
            content: $("#json-view"),
            success: function ()
            {
                $("#json-view").JSONView(json,{ collapsed: true, nl2br: true, recursive_collapser: true });
            },
            end: function () 
            {
                $("#json-view").html("");
            }
        });
    });
</script>
</html>

运行效果如下:

Layui结合JSONView插件实现json格式化

Robin Binar Themeix

Onubia, turpis inceptos pharetra. Ipsum erat rutrum, luctus non rhoncus quam quisque posuere, eros pede leo facilisis at risus. Ea sit consectetuer suscipit pede hac purus, erat nec

猜你喜欢

WinSxS是什么,C盘WinSxS是什么文件夹?

11 Dec , 2018

2018-12-11 00:01

mac下安装composer,macos系统下全局安装composer

11 Dec , 2018

2018-12-11 00:11

区块链是什么,区块链到底是什么意思,看完这段话就懂了

11 Dec , 2018

2018-12-11 00:19

wireshark使用教程,网络抓包工具wireshark中文版使用教程

11 Dec , 2018

2018-12-11 00:48

VBS整人代码大集合,学会用VBS来编小程序对心仪的女神表白

11 Dec , 2018

2018-12-11 02:06

网友评论 ( 1 条评论 )

粪fa涂墙 11-01 09:39

插件那里下载呢

评论