資訊專欄INFORMATION COLUMN
摘要：效果圖表結(jié)構(gòu)形式數(shù)據(jù)數(shù)據(jù)第一級(jí)是第二級(jí)是廣東第二級(jí)是廣西第三級(jí)是玉林第三級(jí)是北流廣東廣州天河白云廣西玉林北流深圳東莞松山湖部分獲取省一級(jí)遞歸結(jié)構(gòu)形式數(shù)據(jù)數(shù)據(jù)廣東廣州天河白云深圳東莞松山湖廣西玉林北流部分獲取省一級(jí)遞歸兩者區(qū)別數(shù)據(jù)表形式數(shù)據(jù)遞
效果圖 mysql表結(jié)構(gòu)形式數(shù)據(jù) data數(shù)據(jù)
第一級(jí)是id:0
第二級(jí)是id:1,name:"廣東",pid:0
第二級(jí)是id:5,name:"廣西",pid:0
第三級(jí)是id:6,name:"玉林",pid:5
第三級(jí)是id:7,name:"北流",pid:6
var data = [
{ id: 1, name: "廣東", pid: 0 },
{ id: 2, name: "廣州", pid: 1 },
{ id: 3, name: "天河", pid: 2 },
{ id: 4, name: "白云", pid: 2 },
{ id: 5, name: "廣西", pid: 0 },
{ id: 6, name: "玉林", pid: 5 },
{ id: 7, name: "北流", pid: 6 },
{ id: 8, name: "深圳", pid: 1 },
{ id: 9, name: "東莞", pid: 1 },
{ id: 10, name: "松山湖", pid: 9 },
]
js部分
var menu = "";
menuFn(0, data)
$("body").append(menu)
function menuFn(id, data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) { //獲取省一級(jí)
if (data[i].pid == id) {
// console.log(data[i])
menu += " var data = [
{
id: 1, name: "廣東", pid: 0,
children: [
{
id: 2, name: "廣州", pid: 1,
children: [
{ id: 3, name: "天河", pid: 2 },
{ id: 4, name: "白云", pid: 2 },
],
},
{ id: 8, name: "深圳", pid: 1 },
{
id: 9, name: "東莞", pid: 1,
children: [
{ id: 10, name: "松山湖", pid: 9 },
]
},
]
},
{
id: 5, name: "廣西", pid: 0,
children: [
{
id: 6, name: "玉林", pid: 5,
children: [
{ id: 7, name: "北流", pid: 6 },
]
},
]
},
];
js部分
var menu = "";
menuFn(0, data)
$("body").append(menu)
function menuFn(id, data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) { //獲取省一級(jí)
if (data[i].pid == id) {
// console.log(data[i])
menu += "數(shù)據(jù)表形式數(shù)據(jù)
menuFn(data[i].id, data) //遞歸
json形式數(shù)據(jù)
if (data[i].children) {
menuFn(data[i].id, data[i].children) //遞歸
}
多級(jí)折疊菜單
效果圖
說(shuō)明
this指向
function fn() {
// console.log(this) //span em
}
$("#app").delegate("span", "click", fn)
$("#app").delegate("em", "click", fn)
兩者區(qū)別
$(this).parent().children("ul")[0]
$($(this).parent().children("ul")[0])
Document
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99006.html
摘要：但實(shí)際上就是在上點(diǎn)擊時(shí)對(duì)其子集進(jìn)行隱藏或顯示通過(guò)縮進(jìn)的距離來(lái)表現(xiàn)層級(jí)關(guān)系在代碼里很東西其實(shí)都是偽裝出來(lái)的，例如我們要實(shí)現(xiàn)的這個(gè)可無(wú)限折疊的。 前言 如何在table上實(shí)現(xiàn)一個(gè)可折疊展開(kāi)子節(jié)點(diǎn)的table？先看下最終實(shí)現(xiàn)效果圖： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其實(shí)這個(gè)項(xiàng)...
摘要：繼續(xù)填上篇文章的坑，這里來(lái)講一下后臺(tái)如何構(gòu)造多叉樹(shù)，這樣前臺(tái)就可接收到數(shù)據(jù)遞歸構(gòu)造樹(shù)形菜單了。 繼續(xù)填上篇文章的坑，這里來(lái)講一下后臺(tái)java如何構(gòu)造多叉樹(shù)，這樣前臺(tái)就可接收到數(shù)據(jù)遞歸構(gòu)造樹(shù)形菜單了。 我們來(lái)理一下如何實(shí)現(xiàn)構(gòu)造多叉樹(shù)的邏輯吧，其實(shí)整個(gè)問(wèn)題概括起來(lái)就是1、構(gòu)造一個(gè)實(shí)體類，用來(lái)存儲(chǔ)節(jié)點(diǎn)，所以我們構(gòu)造的需要四個(gè)對(duì)象（id，pid，name，和chirenList）2、構(gòu)造菜單結(jié)...
摘要：需求最近遇到一個(gè)需求，平時(shí)被后臺(tái)慣著直接返回了樹(shù)形結(jié)構(gòu)給到前端，前端對(duì)這種嵌套類型的數(shù)據(jù)如地區(qū)的級(jí)聯(lián)或菜單的樹(shù)形結(jié)構(gòu)省掉了一層處理。當(dāng)然，沒(méi)用好就相當(dāng)于一堆廢鐵，甚至將導(dǎo)致一些不可預(yù)料的結(jié)果。相比起遞歸，我更喜歡這種方法。 需求 最近遇到一個(gè)需求，平時(shí)被后臺(tái)慣著直接返回了樹(shù)形結(jié)構(gòu)給到前端，前端對(duì)這種嵌套類型的數(shù)據(jù)（如地區(qū)的級(jí)聯(lián)或菜單的樹(shù)形結(jié)構(gòu)）省掉了一層處理。換了個(gè)后臺(tái)小哥哥返回了扁平...
摘要：其他的樹(shù)形結(jié)構(gòu)數(shù)據(jù)像職員與經(jīng)理的關(guān)系，菜單等等很多方案以下所有方案中暫不考慮外鍵約束，數(shù)據(jù)庫(kù)是鄰接表這個(gè)可能是最常見(jiàn)的解決方案，直接添加字段，引用同一張表中的其他回復(fù)。 個(gè)人博客：http://www.80soho.com/?p=781 場(chǎng)景： 有這么個(gè)需求：設(shè)計(jì)開(kāi)發(fā)一個(gè)評(píng)論系統(tǒng)，要求用戶可以評(píng)論文章以及相互回復(fù)，無(wú)層級(jí)數(shù)限制。 這個(gè)需求開(kāi)發(fā)人員基本都遇到過(guò)，可以先回憶或考慮這個(gè)數(shù)據(jù)...
閱讀 1079·2021-11-23 09:51
閱讀 2419·2021-09-29 09:34
閱讀 3161·2019-08-30 14:20
閱讀 1069·2019-08-29 14:14
閱讀 3189·2019-08-29 13:46
閱讀 1086·2019-08-26 13:54
閱讀 1642·2019-08-26 13:32
閱讀 1435·2019-08-26 12:23
