使用javascript生成級聯選單

2021-08-21 10:48:57 字數 1243 閱讀 9466

在做某些管理系統時,大多數情況都會用到級聯選單,可以對專案中的各個模組進行組織和管理,同時每個模組一般會有多個頁面,所以針對這些情況就要生成指定功能的選單了。下面是基於jquery的簡單的級聯選單。

html中的布局採用如下結構:

id="rootmenu">

style="background: #0000ff;">新聞 div>

style="margin-left: 6px;">

style="background: #0000ff;margin:2px;">美食div>

style="margin-left: 6px;">

西瓜li>

蘋果li>

ul>

li>

健康li>

ul>

li>

style="background: #0000ff;">娛樂 div>

style="margin-left: 6px;">

電視li>

電影li>

ul>

li>

ul>當然在這只是乙個布局而已,做好後我們只需要

這個節點就可以了,因為裡面的選單是通過資料來生成的。具體 方法如下:

function

genmenubydata

(parent, menuitems) else }}

資料格式為:

var menudata = [, ]

}, ]

}, , ]

}];

方法呼叫時,我們只需傳入根節點和選單資料進去即可:genmenubydata($('#rootmenu'), menudata);這樣就可以生成我們所需的級聯選單了。

這個選單中,如果某個選單有子選單,則標識為藍色,子選單本身就不標色了。

genmenubydata方法的基本思路是,遍歷每個選單節點資料,如果某個節點有子節點,則先生成父級選單內容,然後儲存該父級選單中的乙個jquery物件,再遞迴呼叫,傳入當前的父級物件和它相關的所有子選單資料,某個節點沒有子節點時,則直接生成該子節點即可,即直函式中的else分支,上述**只是提供乙個大概的思路,在實際專案中應該還要完善很多細節方面的問題,僅供參考。

JavaScript 生成隨機數

分享一段非常強大的隨機數生成功能 例項,有需要的朋友可以做一下參考。例項如下 function function getcharcode 乙個自執行的匿名函式。2 var charcodeindex 48,57 65,90 97,122 三個子數字分別表示ascii字元的區間,表示數字 大小寫字母,...

javascript呼叫c 生成的dll

namespace uisintegrateview public static string statictest 1.上面生成 dll後statictest方法是呼叫不到的,不能用static關鍵字,類也不能用static的 2.生成dll前,改一下 應用程式 程式集資訊 使程式集com可見 打...

javascript根據目錄路徑生成目錄結構

1.要生成的大概結構 var treedata 2.資料 const arr test test a.txt test cmp test cmp b.txt demo demo b.txt 3.實現 const arr test test a.txt test cmp test cmp b.txt ...