layui结合json viewer实现代码格式化_layui在线浏览格式化json插件

作者：IT小白 | 2024-02-28 06:22:18

踩

layui在线浏览格式化json插件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui结合jsonviewer实现json代码折叠</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div class="jq22-container">
    <div class="container"  style="margin-top: 1em;">
        <div class="row">
            <pre id="json-renderer"></pre>
        </div>
    </div>
</body>
<script src="layui/layui.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/src/jquery.json-viewer.js"></script>
<script type="text/javascript">
        var desc_mess = {
            "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" }
            ]
        };
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 1,   //类型代表在页面加载显示
                content: $("#json-renderer"),
                success:function(){
                    $("#json-renderer").jsonViewer(desc_mess);
                }
            });
        });
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

但是发现刚开始的实现效果是这样的:
在这里插入图片描述
原因是缺少了css文件：

<link href="css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />
1

之后实现效果是这样的：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/158012