Leon/docutranslate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前后端完成json工作流

Browse Source
This commit is contained in:
xunbu
2025-08-03 21:59:31 +08:00
parent b41daddd4f
commit 8f918e596b
6 changed files with 196 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
docutranslate/template/json.html
View File

@@ -1,62 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
{{pico}}
<!-- 1. 从 CDN 引入 json-viewer 的 CSS -->
<link href="https://cdn.jsdelivr.net/npm/jquery.json-viewer@1.4.0/json-viewer/jquery.json-viewer.css" rel="stylesheet">
<title>{{ title }}</title>
{{ pico }}
<style>
/* 美化一下页面 */
body { font-family: sans-serif; padding: 20px; }
#json-container { border: 1px solid #ccc; padding: 10px; border-radius: 5px; }
</style>
.renderjson a {
text-decoration: none;
color: #268bd2;
}
.renderjson .disclosure {
color: #cb4b16;
font-size: 150%;
}
.renderjson .syntax {
color: #93a1a1
}
.renderjson .string {
color: #2aa198;
}
.renderjson .number {
color: #d33682;
}
.renderjson .boolean {
color: #cb4b16;
}
.renderjson .key {
color: #268bd2;
}
.renderjson .keyword {
color: #b58900;
}
.renderjson .object.syntax,
.renderjson .array.syntax {
color: #93a1a1;
}</style>
</head>
<body>
<div id="test"></div>
<script>
var module,window,define,renderjson=function(){var n=function(){for(var n=[];arguments.length;)n.push(t(r(Array.prototype.shift.call(arguments)),e(Array.prototype.shift.call(arguments))));return n},t=function(){for(var n=Array.prototype.shift.call(arguments),e=0;e<arguments.length;e++)arguments[e].constructor==Array?t.apply(this,[n].concat(arguments[e])):n.appendChild(arguments[e]);return n},e=function(n){return document.createTextNode(n)},r=function(n){var t=document.createElement("span");return n&&(t.className=n),t},o=function(n,t,r){var o=document.createElement("a");return t&&(o.className=t),o.appendChild(e(n)),o.href="#",o.onclick=function(n){return r(),n&&n.stopPropagation(),!1},o};function s(l,i,a,c,u){var p=a?"":i,f=function(s,l,i,a,f){var y,_=r(a),d=function(){y||t(_.parentNode,y=function(n,t){return n.insertBefore(t,n.firstChild),n}(f(),o(u.hide,"disclosure",(function(){y.style.display="none",_.style.display="inline"})))),y.style.display="inline",_.style.display="none"};t(_,o(u.show,"disclosure",d),n(a+" syntax",s),o(l,null,d),n(a+" syntax",i));var g=t(r(),e(p.slice(0,-1)),_);return c>0&&"string"!=a&&d(),g};return null===l?n(null,p,"keyword","null"):void 0===l?n(null,p,"keyword","undefined"):"string"==typeof l&&l.length>u.max_string_length?f('"',l.substr(0,u.max_string_length)+" ...",'"',"string",(function(){return t(r("string"),n(null,p,"string",JSON.stringify(l)))})):"object"!=typeof l||[Number,String,Boolean,Date].indexOf(l.constructor)>=0?n(null,p,typeof l,JSON.stringify(l)):l.constructor==Array?0==l.length?n(null,p,"array syntax","[]"):f("[",u.collapse_msg(l.length),"]","array",(function(){for(var o=t(r("array"),n("array syntax","[",null,"\n")),a=0;a<l.length;a++)t(o,s(u.replacer.call(l,a,l[a]),i+" ",!1,c-1,u),a!=l.length-1?n("syntax",","):[],e("\n"));return t(o,n(null,i,"array syntax","]")),o})):function(n,t){var e=t||Object.keys(n);for(var r in e)if(Object.hasOwnProperty.call(n,e[r]))return!1;return!0}(l,u.property_list)?n(null,p,"object syntax","{}"):f("{",u.collapse_msg(Object.keys(l).length),"}","object",(function(){var o=t(r("object"),n("object syntax","{",null,"\n"));for(var a in l)var p=a;var f=u.property_list||Object.keys(l);for(var y in u.sort_objects&&(f=f.sort()),f){(a=f[y])in l&&t(o,n(null,i+" ","key",'"'+a+'"',"object syntax",": "),s(u.replacer.call(l,a,l[a]),i+" ",!0,c-1,u),a!=p?n("syntax",","):[],e("\n"))}return t(o,n(null,i,"object syntax","}")),o}))}var l=function n(e){var r=new Object(n.options);r.replacer="function"==typeof r.replacer?r.replacer:function(n,t){return t};var o=t(document.createElement("pre"),s(e,"",!1,r.show_to_level,r));return o.className="renderjson",o};return l.set_icons=function(n,t){return l.options.show=n,l.options.hide=t,l},l.set_show_to_level=function(n){return l.options.show_to_level="string"==typeof n&&"all"===n.toLowerCase()?Number.MAX_VALUE:n,l},l.set_max_string_length=function(n){return l.options.max_string_length="string"==typeof n&&"none"===n.toLowerCase()?Number.MAX_VALUE:n,l},l.set_sort_objects=function(n){return l.options.sort_objects=n,l},l.set_replacer=function(n){return l.options.replacer=n,l},l.set_collapse_msg=function(n){return l.options.collapse_msg=n,l},l.set_property_list=function(n){return l.options.property_list=n,l},l.set_show_by_default=function(n){return l.options.show_to_level=n?Number.MAX_VALUE:0,l},l.options={},l.set_icons("⊕","⊖"),l.set_show_by_default(!1),l.set_sort_objects(!1),l.set_max_string_length("none"),l.set_replacer(void 0),l.set_property_list(void 0),l.set_collapse_msg((function(n){return n+" item"+(1==n?"":"s")})),l}();define?define({renderjson:renderjson}):(module||{}).exports=(window||{}).renderjson=renderjson;
</script>
<script src=" https://cdn.jsdelivr.net/npm/renderjson@1.4.0/renderjson.min.js "></script>
<script>
renderjson.set_show_to_level("all");
let data={{ jsonData }}
document.getElementById("test").appendChild(renderjson(data));
<div id="json-container"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.json-viewer@1.4.0/json-viewer/jquery.json-viewer.js"></script>
<script>
const myData = {
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"is_active": true,
"sauce": null,
"batters": {
"batter": [
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping": [
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
],
"url": "https://example.com"
};;
// 5. 初始化 JSON 查看器
$(document).ready(function() {
$('#json-container').jsonViewer(myData, {
collapsed: false, // 初始状态是否折叠所有节点
withQuotes: true // key 和 string value 是否带引号
});
});
</script>
</script>
</body>
</html>