国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js遞歸,無限分級樹形折疊菜單

HitenDev / 1838人閱讀

摘要：效果圖表結構形式數據數據第一級是第二級是廣東第二級是廣西第三級是玉林第三級是北流廣東廣州天河白云廣西玉林北流深圳東莞松山湖部分獲取省一級遞歸結構形式數據數據廣東廣州天河白云深圳東莞松山湖廣西玉林北流部分獲取省一級遞歸兩者區別數據表形式數據遞

效果圖

mysql表結構形式數據 data數據

第一級是id:0

第二級是id:1,name:"廣東",pid:0

第二級是id:5,name:"廣西",pid:0

第三級是id:6,name:"玉林",pid:5

第三級是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++) { //獲取省一級
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += "
    "
                                menu += "
  • " + data[i].name
                                // menu += "
  • "+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                                menuFn(data[i].id, data)   //遞歸
                                menu += "
    • "
                            menu += "
"
                        }
                    }
                    return menu;
                }
            }
json結構形式數據 data數據 
            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++) { //獲取省一級
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += "
    "
                            menu += "
  • " + data[i].name
                            // menu += "
  • "+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                            if (data[i].children) {
                                menuFn(data[i].id, data[i].children)   //遞歸
                            }

                            menu += "
    • "
                            menu += "
"
                        }
                    }
                    return menu;
                }
            }
兩者區別

數據表形式數據

menuFn(data[i].id, data)   //遞歸

json形式數據

if (data[i].children) {
    menuFn(data[i].id, data[i].children)   //遞歸
}
多級折疊菜單 效果圖

說明 this指向 
function fn() {
   // console.log(this)  //span   em
}
$("#app").delegate("span", "click", fn)
$("#app").delegate("em", "click", fn)
兩者區別

$(this).parent().children("ul")[0]
$($(this).parent().children("ul")[0])

代碼 




    
    
    
    Document

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99006.html

相關文章

  • 實現一個可無限折疊的table

    摘要：但實際上就是在上點擊時對其子集進行隱藏或顯示通過縮進的距離來表現層級關系在代碼里很東西其實都是偽裝出來的，例如我們要實現的這個可無限折疊的。 前言 如何在table上實現一個可折疊展開子節點的table？先看下最終實現效果圖： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其實這個項...

    crossea 評論0 收藏0

  • java實現構造無限層級樹形菜單

    摘要：繼續填上篇文章的坑，這里來講一下后臺如何構造多叉樹，這樣前臺就可接收到數據遞歸構造樹形菜單了。 繼續填上篇文章的坑，這里來講一下后臺java如何構造多叉樹，這樣前臺就可接收到數據遞歸構造樹形菜單了。 我們來理一下如何實現構造多叉樹的邏輯吧，其實整個問題概括起來就是1、構造一個實體類，用來存儲節點，所以我們構造的需要四個對象（id，pid，name，和chirenList）2、構造菜單結...

    seasonley 評論0 收藏0

  • JavaScript實現無限級遞歸樹

    摘要：需求最近遇到一個需求，平時被后臺慣著直接返回了樹形結構給到前端，前端對這種嵌套類型的數據如地區的級聯或菜單的樹形結構省掉了一層處理。當然，沒用好就相當于一堆廢鐵，甚至將導致一些不可預料的結果。相比起遞歸，我更喜歡這種方法。 需求 最近遇到一個需求，平時被后臺慣著直接返回了樹形結構給到前端，前端對這種嵌套類型的數據（如地區的級聯或菜單的樹形結構）省掉了一層處理。換了個后臺小哥哥返回了扁平...

    atinosun 評論0 收藏0

  • sql反模式(二) — 單純的樹

    摘要：其他的樹形結構數據像職員與經理的關系，菜單等等很多方案以下所有方案中暫不考慮外鍵約束，數據庫是鄰接表這個可能是最常見的解決方案，直接添加字段，引用同一張表中的其他回復。 個人博客：http://www.80soho.com/?p=781 場景： 有這么個需求：設計開發一個評論系統，要求用戶可以評論文章以及相互回復，無層級數限制。 這個需求開發人員基本都遇到過，可以先回憶或考慮這個數據...

    cnTomato 評論0 收藏0

發表評論

0條評論

HitenDev

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<