前端时间接到公司的一个需求,说是后端接口返回的数据存在较大的差异,其中json格式会给出来,但是对应的json格式会存在多种方式,如下所示:
二、【
先睹为快
】
json中包括文字块级展示,其中块级元素包括父子级别的关系,且要求在页面上通过背景色做区分,并且除了块级元素,还有表格元素,针对不同的json数据对应的元素还要添加其样式、点击事件等。废话不多说,先看json格式,然后再看json格式生成的页面结构:
json格式如下:
var arr = [
"block_name": "黄大大第一季",
"block_color": "red",
"block_type": "single",
"block_children": [{
"name": "第一集-啊啊",
"color": "blue",
"children": [
"name": "1-1",
"color": "rebeccapurple",
"click": {
"methods": "OBtargetInfoDetail('黄大大第一季 : 第一集-啊啊 1-1章节')"
}, {
"name": "1-2",
"color": "rebeccapurple"
"click": {
"methods": "OBtargetInfoDetail('黄大大第一季 : 第一集-啊啊')"
}, {
"name": "第二集-哈哈",
"color": "blue",
"children": [
"name": "2-1",
"color": "rebeccapurple"
}, {
"name": "第三集-更新中",
"color": "blue",
}, {
"block_name": "黄大大第二季",
"block_color": "red",
"block_type": "multi",
"block_children": [{
"name": "第一集-吃吃",
"color": "blue",
}, {
"name": "第二集-喝喝",
"color": "blue",
}, {
"name": "第三集-吹吹",
"color": "blue",
"children": [
"name": "3-1",
"color": "rebeccapurple"
"name": "3-2",
"color": "rebeccapurple",
"children": [
"name": "3-2-1",
"color": "orange",
"click": {
"methods": "OBtargetInfoDetail('黄大大第二季 : 第三集-吹吹 3-2 3-2-1')"
"name": "3-2-2",
"color": "orange",
"block_name": "OCEANBASE单层名称",
"block_type": "table",
"block_children": {
"head": ["租户ID", "名称", "CPU", "内存", "IO", "会话", "活跃会话", "诊断"],
"lines": [
[{ "val": "123", "color": "red" },
{ "val": "名称1" },
{ "val": "80%" },
{ "val": "80%", "color": "green" },
{ "val": "" },
{ "val": "" },
{ "val": "" },
{ "val": "诊断", "click": { "methods": "OBtargetInfoDetail('210100001')" } }],
[{ "val": "123" },
{ "val": "名称2", "color": "red" },
{ "val": "80%" },
{ "val": "80%", "color": "green" },
{ "val": "" },
{ "val": "" },
{ "val": "" },
{ "val": "诊断", "click": { "methods": "OBtargetInfoDetail('210100001')" } }],
通过前端代码解析生成的页面如下:

三、【实现剖析】
不难看出已经解析到第四层级的深度了,下面我将侧重讲述一下如何做到的
解决这个办法的核心在于递归调用页面解析的方法;
递归时候我们切记从最底层的地方着手,然后再不断的往上冒泡,将生成的页面结构字符串进行拼接,然后再渲染到页面即可;
其中递归的核心代码如下:
function loadDistriDom(domchild, loadHtmlStr) {
debugger;
if (domchild != null && domchild.length > 0) {
domNum++;
for (var k = 0; k < domchild.length; k++) {
onclickStr = "doNothing()";
if (domchild[k].click != null && domchild[k].click != undefined
&& domchild[k].click.methods != null && domchild[k].click.methods != undefined) {
onclickStr = domchild[k].click.methods;
if (domchild[k].children != null) {
loadHtmlStr += `<div class='blc_child` + domNum + `' οnclick="` + onclickStr + `">
<div style='color:`+ domchild[k].color + `'>` + domchild[k].name + `</div>
`+ loadDistriDom(domchild[k].children, "") + `
</div>`;
domNum--;
} else {
loadHtmlStr += `<div class='blc_child` + domNum + `' οnclick="` + onclickStr + `" style='color:` + domchild[k].color + `'>` + domchild[k].name + `</div>`
return loadHtmlStr;
在上面的逻辑中,主要判断是否还有孩子节点,如果有则递归调用,调用的过程中记得将原先的渲染页面字符串重新置空。另外值得注意的是domNum这个值得设置和修改过程,有孩子节点的切记形成dom后再执行–的操作,这个做的主要目的就是让页面的class名形成一个树状结构,如下所示:

调用方法如下:
for (var j = 0; j < arr.length; j++) {
loadHtmlStr = ``;
domNum = 0;
if (arr[j].block_type == "single" || arr[j].block_type == "multi") {
allStr += `<div class='bkchild bkchild_` + arr[j].block_type + `'>
<div style='color:`+ arr[j].block_color + `'>` + arr[j].block_name + `</div>
`+ loadDistriDom(arr[j].block_children, loadHtmlStr) + `
</div>`;
} else {
allStr += `<div class='bkchild bkchild_` + arr[j].block_type + `'>
<div style='color:`+ arr[j].block_color + `'>` + arr[j].block_name + `</div>
` + loadDistriTable(arr[j].block_children) + `</div>`
通过上面的一系列操作和递归调用,不过json数据的层级有多深,我们都是可以来实现页面的层级模块的展示,这个还可以广泛应用于多级菜单的形成。
百度网盘
链接:https://pan.baidu.com/s/158YrxeOj9SuNx83_gH9NjQ
提取码:hdd6
123云盘(不限速)
https://www.123pan.com/s/ZxkUVv-1EJ4
提取码:hdd6
有什么不懂的可以留言,动动发财的小手,点个赞关注下,支持博主创作的可以上皇榜哟,皇榜点击此处;
知识的道路上,愿与君同行!
本文实例讲述了JavaScript解析JSON数据。分享给大家供大家参考,具体如下:
JSON数据是一种常用的数据格式,解析方式也比较简单,特别是由于JavaScript原生就支持JSON,所以JavaScript能够更好的解析JSON。
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解析JSON</title>
[removed]
// 开始解析
function startParse()
// ,{"字段2"
之前公司有一个需求是:通过js来生成html。而且大部分都是生成表格,直接通过字符串拼接的话,代码的可复用性太低的,所以写了个通用的json转html表格的工具。
htmlKit = {
_tags: [], html: [],
_createAttrs: function (attrs) {
va...
* JSON实际上也是键值对("key":"value")
* key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)
* value如果是字符串,用jsonobj.getString("key")获取
* value如果是数 字,用jsonobj.getIntValue("ke...
4.本项目
源码见
文尾捷文规范第一条,视图
源码在view
包,分析工具在analyze
包 一、贝塞尔三次曲线初体验 1.无网格,不曲线,废话不多说,上网格+坐标系 /** * 作者:张风捷特烈
* 时间:2018/11/16 0016:9:04
4.本项目
源码见
文尾捷文规范第一条,视图
源码在view
包,分析工具在analyze
包 一、贝塞尔三次曲线初体验 1.无网格,不曲线,废话不多说,上网格+坐标系 /** * 作者:张风捷特烈
* 时间:2018/11/16 0016:9:04
主要需求: 针对嵌套多层json,可以指定解析到的层级,并返回完整的解析后信息。
目前没在工具类中找到类似的函数故自己实现了,如果大神知道的话请告知下.
1.目前默认认定数组为最底层结构不做解析,以数据返回。
2.默认数据格式全部转换为string类型,针对需要匹配bean对象最赋值,请自行调整。
public class JsonParseUtils<T> {
private int jsonlevel = 0;
* 递归解析json并对重复字段根据解析层级调
一点要注意点。
JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:var str2 = { "name": "cxh", "sex": "man" };
如果是字符串要转换,使用var obj = eval('(' + str + ')');
别的没什么直接上代码,如
IEC 60870-104是电力系统通信标准协议,以实现各种设备(如自动化设备和保护设备)之间的通信。Wireshark是一款网络协议分析软件。将它们结合起来,可以对IEC 60870-104报文进行详细解析。
首先,需要确定使用的IEC 60870-104版本和协议参数。接着,使用Wireshark进行网络抓包,然后筛选出IEC 60870-104协议。
对于iec60870-104报文解析,需要理解报文结构。报文结构包括报文头、应用服务数据单元(ASDU)和报文尾。报文头包含报文类型、起始字符和校验和等信息,ASDU则是报文的主体部分。ASDU的类型取决于具体的请求或响应,比如,遥信、遥测和遥控等。报文尾包含结束字符。
按字节对报文进行解析,可以将每个字节的十六进制代码与相应的含义进行比对,来理解报文的结构和内容。
例如,开始字符由一个固定的数值68H(十进制数为104)表示,接着是将主站地址、子站地址、APDU长度、控制域和数据先后加入CRC校验码中。在ASDU中,遥信的信息类型编号为01,具体值为01-FF;遥测的信息类型编号为09,包含遥测值和品质描述符;遥控的信息类型编号为0C,分为单点遥控和双点遥控。
解析完整个报文后,可以还原出完整的信息,从而实现互通性与自动化化。
CSDN-Ada助手:
nodejs+express实现数据库mysql的访问,并展示数据到页面上【文尾分享源码包】
拄杖盲学轻声码:
nodejs+express实现数据库mysql的访问,并展示数据到页面上【文尾分享源码包】
拄杖盲学轻声码:
nodejs+express实现数据库mysql的访问,并展示数据到页面上【文尾分享源码包】
-Winn.: