layui结合json viewer实现代码格式化

lala_shine

于 2019-05-09 17:38:15 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jsonviewer layui 代码格式化

本文链接：https://blog.youkuaiyun.com/u013594477/article/details/90044305

需要实现这个一个功能，就是查看详细的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