前後端三層雙層(多層)樹形結構處理

2021-10-25 00:24:49 字數 2575 閱讀 6025

相信有許多人曾被樹形結構處理從而困擾過下面我就為大家分享一下,在工作中!常見的樹形結構該怎麼處理!場景

首先肯定有三個資料 這裡我就分為 大主題(第一層資料),小主題(第二層資料),商品(第三層資料) 這裡就列舉為三層資料吧!其實你搞懂了三層資料處理後,在多也是一樣的!

首先你要知道三層資料肯定是有所關聯的

那到底是咋樣關聯的呢?

其實懂點後端的夥伴!肯定知道是通過欄位id關聯的!

(1)假設大主題 總共有四條如下

(後端同理就當下面下面資料為查出資料)

let bigcommoditydata =[,

,,]

小主題是繫結在大主題上的,通過大主題的id小主題的每條資料可以增加欄位對其進行繫結這裡就以pid為例!假設pid:1就是繫結在大主題的第一條資料上的

(2)假設小主題 總共有8條如下

let smallcommoditydata =[,

,,,,

,,,]

這樣就把小主題繫結在了大主題了上了 細心的小夥伴會發現欄位sid是幹嘛的?對的其實它就是我們用來繫結商品的sid:"0_0"前面的0就代表在第乙個大主題上後面的0是代表商品繫結在小主題的第乙個上(這裡相對商品而言的)!

(3)假設商品總共有8條如下

let goodsdata =[,

,,,,

,,,]

這樣其實就繫結好了!這些就是樹型結構的設計理念

現在我們要把資料給前端反出去!或者有的(坑比後端,不過關的後端)不會處理這種樹形結構!會直接扔給前端讓前端處理!再或者基於需求這種結構只能分開反!但前端有的時候合併該怎麼辦呢?

其實很簡單我們直接來硬貨!巢狀迴圈這樣就可以了(三層for迴圈)!

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

<

/head>

<

/body>

<

/html>

// 小主題資料 // select id,name,sid,pid,name,subhead,img_url_grey,img_url_pink from pandora_small_themes order by sid , gmt_modified desc

// 大主題資料 // select id,name,title,slogan,poster_slogan from pandora_big_themes

// 首飾項鍊資料 // select id,cid,item_id,sku,prize,url,name,name_detail,detail_url,diy_url,width,height,order_url,material,color,theme from pandora_goods order by cid ,priority, gmt_modified desc

let smallcommoditydata =[,

,,,,

,,,]

let bigcommoditydata =[,

,,]let goodsdata =[,

,,,,

,,,]

let array =

;for

(let i =

0; i < bigcommoditydata.length; i++)}

}}} console.

log(array)

;<

/script>

/**

* 二維陣列資料處理格式

* 預設盒子寬度indexwidth 為900,預設margin為28,資料為每乙個元素的寬度,若元素寬度相加並且加上每個元素的margin 總寬度大於900併入乙個新陣列

* 理想格式[,,,]

*/var data =[,

,,,,

,,,,

,,,,

,,,,

,,,,

,,,,

,,,,

,,,,

,,,,

,,,,

];console.

log(data.length)

;let newarray =

;let finallyarray =

;let indexwidth =

900;

let indexmargin =28;

let boxlength =0;

for(

let i =

0; i < data.length; i++

) newarray.

push

(data[i]);

if(i == data.length -1)

} console.

log(finallyarray)

;

三層 多層結構

三層 多層結構就像多個人,分別不同負責各自的工作。該知道自己知道的,不該知道自己不知道的。別八卦,別打聽不該自己知道的事。表示層 不應該知道的 不應該看到物理的資料儲存。不應該有connection strings,connections,commands或者類似。應該知道的 應該知道主要模組。業務...

三層 多層結構

三層 多層結構就像多個人,分別不同負責各自的工作。該知道自己知道的,不該知道自己不知道的。別八卦,別打聽不該自己知道的事。表示層 不應該知道的 不應該看到物理的資料儲存。不應該有connection strings,connections,commands或者類似。應該知道的 應該知道主要模組。業務...

python matplotlib的三層結構

眾所周知,matplotlib這個第三方外部庫功能是比較強大的,機器學習,深度學習以及人工智慧方面都需要的乙個庫,翻譯成中文,名字叫矩陣繪相簿,因此,這個庫是乙個對資料進行統計並展示的庫。使用該庫,需要先弄清楚它是分為了三個層次結構,即,容器層,輔助顯示層,畫像層。提出這麼三層結構有什麼意義嗎?當然...