像这种可以折叠展开的json可视化功能是如何实现的？-灵析社区
瞳孔放大黑洞
复古直男https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241010/084aa0d6d1272c65dd82e1ef596aac99.png
Title
.json-view {font-family:Consolas, monospace;}
.json-view .tpl {display:none;}
.json-view .k {color:#369;}
.json-view .k:empty ~ .colon {display:none;}
.json-view .json-boolean .v {color:#993;}
.json-view .json-number .v {color:#939;}
.json-view .json-bigint .v {color:#939;}
.json-view .json-string .v {color:#393;}
.json-view .json-null .v {color:#CCC;}
.json-view a {display:block;}
.json-view a > .tag-open:before {content:'[+]';margin-right:0.5em;color:#399}
.json-view a > .tag-ddd {}
.json-view a > .content {display:none;margin-left:1em;}
.json-view a.open > .tag-open:before {content:'[-]';color:#F33;}
.json-view a.open > .tag-ddd {display:none;}
.json-view a.open > .content {display:block;}
.json-view a:last-child > .comma {display:none}
.json-view a .content :last-child > .comma {display:none}
document.addEventListener('DOMContentLoaded', function(){
function json_view_create_value($domBase, $domTpl, $tplClass, $key, $v)
{
let domTpl, dom;
domTpl = $domTpl.querySelector($tplClass);
dom = domTpl.cloneNode(true);
if(typeof($key) === 'string')
dom.querySelector('.k').innerHTML = '"'+$key+'"';
dom.querySelector('.v').innerHTML = $v;
$domBase.appendChild(dom);
}
function json_view_boolean($domBase, $domTpl, $key, $v)
{
json_view_create_value($domBase, $domTpl, '.json-boolean', $key, $v ? 'true' : 'false');
}
function json_view_number($domBase, $domTpl, $key, $v)
{
json_view_create_value($domBase, $domTpl, '.json-number', $key, $v);
}
function json_view_bigint($domBase, $domTpl, $key, $v)
{
json_view_create_value($domBase, $domTpl, '.json-number', $key, $v);
}
function json_view_string($domBase, $domTpl, $key, $v)
{
json_view_create_value($domBase, $domTpl, '.json-string', $key, '"'+$v+'"');
}
function json_view_null($domBase, $domTpl, $key, $v)
{
json_view_create_value($domBase, $domTpl, '.json-null', $key, 'null');
}
function json_view_array($domBase, $domTpl, $key, $arr)
{
let domTpl, dom;
domTpl = $domTpl.querySelector('.json-array');
dom = domTpl.cloneNode(true);
if(typeof($key) === 'string')
dom.querySelector('.k').innerHTML = '"'+$key+'"';
dom.addEventListener('click', function($evt){
if($evt.target.classList.contains('tag-ac') === false)
return;
let domContent = dom.querySelector(':scope > .content');
if(this.classList.contains('open') === true)
{
this.classList.remove('open');
}
else
{
if(domContent.classList.contains('none') === true)
{
if(typeof($key) === 'string')
dom.querySelector('.k').innerHTML = '"'+$key+'"';
domContent.classList.remove('none');
for(let i=0; i .content');
if(this.classList.contains('open') === true)
{
this.classList.remove('open');
}
else
{
if(domContent.classList.contains('none') === true)
{
if(typeof($key) === 'string')
dom.querySelector('.k').innerHTML = '"'+$key+'"';
domContent.classList.remove('none');
for(let key in $ob)
{
json_view(domContent, $domTpl, key, $ob[key]);
}
}
this.classList.add('open');
}
$evt.stopPropagation();
});
$domBase.appendChild(dom);
}
function json_view($domBase, $domTpl, $key, $json)
{
let mapView = {
'boolean' : json_view_boolean,
'number' : json_view_number,
'bigint' : json_view_bigint,
'string' : json_view_string,
'null' : json_view_null,
'array' : json_view_array,
'object' : json_view_object,
};
let type = typeof($json);
if(type === 'object')
{
if($json === null) type = 'null';
else if(Array.isArray($json) === true) type = 'array';
}
if(type in mapView === false)
throw 'invalid type ['+type+']';
mapView[type]($domBase, $domTpl, $key, $json);
}
let json = {
'null' : null,
'number' : 123,
'string' : 'abc',
'array' : [null, 123, 'abc', false, {
'null' : null,
'number' : 123,
'string' : 'abc',
}],
'object' : {
'boolean' : true,
},
};
let domRoot = document.querySelector('.json-view .json-root');
let domTpl = document.querySelector('.json-view .tpl');
json_view(domRoot, domTpl, null, json);
});
:
,
:
,
:
,
:
,
:
,
:
[...]
,
:
{...}
,