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

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

但是发现刚开始的实现效果是这样的:

原因是缺少了css文件：

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

之后实现效果是这样的：

layui结合json viewer实现代码格式化相关推荐

Notepad++实用插件整理（Json Viewer、Compare、Explorer、AnalysePlugin）
文章目录插件名称安装方式 Notepad++是一款小巧.高效的工具,支持多种编程语言,其丰富强大的插件使得程序员效率++. 插件名称 1.Json Viewer: 用于格式化Json数据 2.Co ...
在线代码格式化，在线JSON校验格式化
在线代码格式化 http://tool.oschina.net/codeformat/json 在线JSON校验格式化 http://www.kjson.com/ 两个好用工具
LayUi引入JSON文件进行表格重载时出现接口请求异常
标题 LayUi引入JSON文件进行表格重载时出现接口请求异常表格重载代码 HTML代码<table class="layui-hide" id="commodi ...
layui表单的ajax联动,layui的select联动实现代码
要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载的内容,需要重新渲染后才可以正常使用. html结构: 所在省份: 请选择省份 ${provincelist. ...
JSON Viewer 安装
目的:为了方便查看json内容,安装JSON Viewer插件方便查看. 下载网址,GitHub上下载,网址:https://github.com/search?utf8=%E2%9C%93& ...
JSON Viewer有个大bug导致不得不放弃掉
关于Windows里的这款JSON格式化工具,相信很多人都熟悉,叫做 JSON Viewer,如图这个软件很好用,但是有个致命的问题让我不得不放弃它. 就是复制进去的json字串,如果是两个正常的j ...
VScode代码格式化及语法检测
一.安装以下三个扩展程序 1.ESLint ● javascript代码检语法测工具,可以配置每次保存时格式化js ● 每次保存时只格式化部分代码,需要连续按住Ctrl+S多次才能格式化完成 2.Pr ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
VS Code编写HTML-CSS-JS等——代码格式化
VS Code编写HTML-CSS-JS等--代码格式化步骤总结功能:保存时自动将代码进行格式标准化步骤 VS Code扩展中搜索:Prettier - Code formatter 点击安装 ...

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

layui结合json viewer实现代码格式化相关推荐

最新文章

热门文章