無限級選單簡單的設計

2022-02-15 12:29:01 字數 2227 閱讀 4269

策略：資料庫就一張表，前端查詢出所有的可顯示的選單，在前端進行迴圈展示。

create


table


sys_menu (


id 


intnot


null


auto_increment,


name 


varchar(64) not


null


, url 


varchar(255


), pid 


intnot


null


default0,


isleaf 


tinyint


notnull


default


1comment 


'0表示不是葉子，1表示是葉子',


status 


tinyint


notnull


default


1comment 


'0表示禁用，1表示啟用',


seq 


tinyint


notnull


default


0comment 


'同級中的順序，0-n，從上到下',


primary


key(id)


);
把選單當作乙個多叉樹，root節點為虛擬節點，id為0。第一層節點表示一級選單，以此類推。其中，isleaf表示該選單是不是葉子節點。

簡單的填充資料如下所示：

需要過濾status=0，也就是禁用的選單。

body中就是如下簡單的**
css樣式（從網上隨便找的）



$.ajax(


//$(".menue").html("");


$(".menue").html(showfirstlevelmenu(list));


console.log(showfirstlevelmenu(list))


//在選單全部顯示後，增加hover件事


addhover();


} else


},error: 


function


() })


當獲取到資料後，將資料拼裝成節點html資料，設定到class=menu的ul中。然後對動態新增的html**段加上hover事件


$(".menue").html(showfirstlevelmenu(list));


//在選單全部顯示後，增加hover事件


addhover();


使用遞迴呼叫實現拼接子選單


function


showfirstlevelmenu(list) 


}sublist.sort(


function


(a, b) );


alert(sublist.length)


for (i = 0; i < sublist.length; i++) 


return


menu;


}function


showsubmenu(list, menuinfo) 


}if (sublist.length != 0) );


menu += '';}}


return


menu;


}


function


addhover() 


})//$(".menue li").hover(function


() , 


function


() );


var submenu = $(".sub_menu").find(".sub_menu")


submenu.css()


$(".sub_menu li").hover(function


() , 


function


() );


/*jquery menu 結束


選單無限級設計思路
這思路估計在高手眼中不算什麼 下面這個是乙個編碼無限級選單 id myselfcode 選單每級編號限制2位數字 這種思路方便排序 麻煩的是錄入編碼問題 需要在pojo中的新增屬性 而新增的屬性又不會對映到資料庫中 idmyselfcode parentcode 上級編碼 parentname 上級...


無限級選單資料庫設計
第一種方案 表為兩張，一張分類表，一張資訊表。表1 id int 10 cid tinyint 3 title varchar 255 表2 cid tinyint 3 parentid tinyint 3 order tinyint 3 name varchar 255 這樣可以根據cid par...


使用tree實現無限級樹形選單
使用tree實現無限級樹形選單 使用tree實現無限級樹形選單 單張表 sqlconnection con new sqlconnection configurationmanager.connectionstrings 字串 connectionstring string cmdtext sele...