动态菜单(二)
?這天都能感冒，悲劇。上次寫到一半一個Ctrl+C 瀏覽器崩潰了。沉重的被打擊了。。
?? 上次我們說的是輸出html組成動態菜單。同學們有沒有改成遞歸的形式？沒有改的同學就是不喜歡學習的同學。
?? 這次我們來個Repeater嵌套Repeater組成的二級菜單.典型的應用一個Iframe，左邊是菜單，右邊是內容。有上下LOGO先上個圖看看效果.
?
?? 還算可以吧 這東西做簡單的系統 可以直接用了。
?? 里面還封裝了一個彈出框比如點擊版本信息會彈出一個遮罩效果的彈出框這里就不上圖了。
?先說說iframe設置
??1?<body?scroll="no"?leftmargin="0"?topmargin="0"?marginheight="0"?marginwidth="0">??2?????<table?border="0"?cellspacing="0"?cellpadding="0"?width="100%"?height="100%">
??3?????????<tr>
??4?????????????<td?width="100%"?height="50"?colspan="3"?style="border-bottom:?1px?solid?#000000">
??5?????????????????<table?height="49"?border="0"?cellspacing="0"?cellpadding="0"?width="100%"?class="font_size">
??6?????????????????????<tr>
??7?????????????????????????<td?style="background-image:?url(images/top-gray.gif);?background-repeat:?no-repeat;
??8?????????????????????????????background-position:?right?top">
??9?????????????????????????????<b>Ziye.Net</b>
?10?????????????????????????????<br?/>
?11?????????????????????????????<font?size="2"?color="#999999"?face="Verdana,?Arial,?Helvetica,?sans-serif"> ?
?12????????????????????????????????? ?動態菜單(二)Iframe應用</font>
?13?????????????????????????</td>
?14?????????????????????????<td?style="background-image:?url(images/top-gray.gif);?background-repeat:?no-repeat;
?15?????????????????????????????background-position:?right?top"?valign="bottom">
?16?????????????????????????????
?17?????????????????????????</td>
?18?????????????????????</tr>
?19?????????????????</table>
?20?????????????</td>
?21?????????</tr>
?22?????????<%
?23?????????????switch?(MenuStyle)
?24?????????????{
?25?????????????????case?0:
?26?????????%>
?27?????????<tr>
?28?????????????<td?id="frmTitle"?name="frmTitle"?nowrap="nowrap"?valign="middle"?align="center"
?29?????????????????width="198"?style="border-right:?1px?solid?#000000">
?30?????????????????<iframe?name="BoardTitle"?style="height:?100%;?visibility:?inherit;?width:?198;?z-index:?2"
?31?????????????????????scrolling="auto"?frameborder="0"?src="left.aspx"></iframe>
?32?????????????</td>
?33?????????????<td?style="width:?10pt"?bgcolor="#7898A8"?title="關閉/打開左欄"?class="navPoint">
?34?????????????????<table?border="0"?cellpadding="0"?cellspacing="0"?width="11"?height="100%"?align="right">
?35?????????????????????<tr>
?36?????????????????????????<td?valign="middle"?align="right"?class="middleCss"?style="width:?13px">
?37?????????????????????????????<img?border="0"?src="images/Menu/close.gif"?id="menuimg"?alt="隱藏左欄"?onmouseover="javascript:?menuonmouseover();"
?38?????????????????????????????????onmouseout="javascript:?menuonmouseout();"?onclick="javascript:switchSysBar()"
?39?????????????????????????????????style="cursor:?hand"?width="11"?height="76"?/>
?40?????????????????????????</td>
?41?????????????????????</tr>
?42?????????????????</table>
?43?????????????</td>
?44?????????????<td?style="width:?100%">
?45?????????????????<iframe?id="mainFrame"?name="mainFrame"?style="height:?100%;?visibility:?inherit;
?46?????????????????????width:?100%;?z-index:?1"?scrolling="auto"?frameborder="0"?src="Manage_Welcome.aspx">
?47?????????????????</iframe>
?48?????????????</td>
?49?????????</tr>
?50?????????<%
?51?????????????break;
?52?????????case?1:
?53?????????????
?54?????????%>
?55?????????<%--測試--%>
?56?????????<%
?57?????????????break;
?58?????????case?2:
?59?????????%>
?60?????????<%--?測試--%>
?61?????????<%
?62?????????????break;
?63?
?64?????}
?65?????????%>
?66?????????<tr>
?67?????????????<td?colspan="3"?height="20">
?68?????????????????<table?border="0"?cellpadding="0"?cellspacing="0"?width="100%"?height="20">
?69?????????????????????<tr>
?70?????????????????????????<td?colspan="3"?height="20">
?71?????????????????????????????<table?border="0"?cellpadding="0"?cellspacing="0"?width="100%"?height="20">
?72?????????????????????????????????<tr>
?73?????????????????????????????????????<td?class="down_text"?style="height:?20px">
?74?????????????????????????????????????????Powered?By?<a?href="http://hi.csdn.net/wxr0323"?target="_blank"><font?color="#ffffff">Ziye.com</font></a>
?75?????????????????????????????????????????Information?Technology?Logistics?Inc.QQ:459919
?76?????????????????????????????????????</td>
?77?????????????????????????????????</tr>
?78?????????????????????????????</table>
?79?????????????????????????</td>
?80?????????????????????????<td?align="right"?width="400"?bgcolor="#000000">
?81?????????????????????????????<table?border="0"?cellpadding="0"?cellspacing="0"?width="100%">
?82?????????????????????????????????<tr>
?83?????????????????????????????????????<td?style="cursor:?pointer;?border-left:?1px?solid?#FFFFFF;"?onclick="javascript:showPopWin('子夜','Manage_Welcome.aspx?rand'+rand(100000000),400,?255,?AlertMessageBox,true)">
?84????????????????????????????????????????? <img?src="images/userset.gif"?style="margin-bottom:?-3px"> <img?src="images/about.gif"
?85?????????????????????????????????????????????style="margin-bottom:?-3px"> <font?color="#FFFFFF">版本信息</font>
?86?????????????????????????????????????</td>??????????????????????????????????
?87?????????????????????????????????????<td?style="cursor:?pointer;?border-left:?1px?solid?#FFFFFF;"?onclick="javascript:?window.mainFrame.location.href='Manage_Welcome.aspx'">
?88????????????????????????????????????????? <img?src="images/house.gif"?style="margin-bottom:?-3px"> <font?color="#FFFFFF">回到首頁</font>
?89?????????????????????????????????????</td>
?90?????????????????????????????????????<td?style="cursor:?pointer;?border-left:?1px?solid?#FFFFFF;"?onclick="javascript:?window.top.location.href?=?'http://hi.csdn.net/wxr0323'">
?91????????????????????????????????????????? <img?src="images/logout.gif"?style="margin-bottom:?-3px"> <font?color="#FFFFFF">退出系統</font>
?92?????????????????????????????????????</td>
?93?????????????????????????????????????<td?style="cursor:?pointer;?border-left:?1px?solid?#FFFFFF;"?onclick="javascript:window.open('http://hi.csdn.net/wxr0323');">
?94????????????????????????????????????????? <img?src="images/help.gif"?style="margin-bottom:?-3px"> <font?color="#FFFFFF">幫助手冊</font>
?95?????????????????????????????????????</td>
?96?????????????????????????????????</tr>
?97?????????????????????????????</table>
?98?????????????????????????</td>
?99?????????????????????</tr>
100?????????????????</table>
101?????????????</td>
102?????????</tr>
103?????</table>
104?</body>
?104行代碼
?
<iframe?name="BoardTitle"?style="height:?100%;?visibility:?inherit;?width:?198;?z-index:?2" scrolling="auto"?frameborder="0"?src="left.aspx"></iframe>這一個iframe是指向菜單的。
?
?
?
<iframe?id="mainFrame"?name="mainFrame"?style="height:?100%;?visibility:?inherit;???????????????????? width:?100%;?z-index:?1"?scrolling="auto"?frameborder="0"?src="Manage_Welcome.aspx"></iframe>
這一個iframe是指向右邊的頁面。
?
?
?
?
從22行開始 switch(MenuStyle). 這個考慮到了分組權限。
第一個是當MenuStyle=0的時候加載第一個TR。等于1的時候可以加載第二個TR.
當一個用戶是管理員的時候，可以在后臺設置
?
public int MenuStyle = 0;(此代碼是Default后臺代碼)這樣他登陸此頁面的時候就加載為0下的TR了?
?
?
當用戶是非管理員的時候可以設置 為1 就加載為1的HTML。
?
public int MenuStyle = 數據庫中讀取的字段;這樣是不是就有效的分組了呢？加載的時候里層可以在嵌一層用戶權限列表。什么意思呢。最后討論。這里只要知道不同的MenuStyle讀取不同的TR就可以了 剩下的代碼就是一些無聊的JS了。。
?
接下來我們開始整菜單。
?
數據庫結構還有"SqlHelper"跟上節課的一樣??
建立頁面left.aspx;
repeater嵌套repeater
?
?1?<asp:Repeater?ID="LeftMenu"?runat="server"?OnItemDataBound="LeftMenu_ItemDataBound">?2?????????<ItemTemplate>
?3?????????????<table?cellspacing="0"?cellpadding="0"?width="159"?align="center"?border="0">
?4?????????????????<tr>
?5?????????????????????<td?width="23">
?6?????????????????????????<img?height="25"?src="images/Menu/box_topleft.gif"?width="23">
?7?????????????????????</td>
?8?????????????????????<td?class="ttl"?onclick="JavaScript:showHide('M_<%#?Eval("Menu_ID")%>');"?width="129"
?9?????????????????????????background="images/Menu/box_topbg.gif">
10?????????????????????????<%#?Eval("Menu_Name")%>
11?????????????????????</td>
12?????????????????????<td?width="7">
13?????????????????????????<img?height="25"?src="images/Menu/box_topright.gif"?width="7">
14?????????????????????</td>
15?????????????????</tr>
16?????????????</table>
17?????????????<table?id="M_<%#?Eval("Menu_ID")%>"?style="display:?none"?cellspacing="0"?cellpadding="0"
18?????????????????width="159"?align="center"?border="0">
19?????????????????<tr>
20?????????????????????<td?background='images/Menu/box_bg.gif'?height="0px"?width='159'?colspan='3'>
21?????????????????????????<table?width="157"?border="0"?cellpadding="2"?cellspacing="1">
22?????????????????????????????<tbody>
23?????????????????????????????????<asp:Repeater?ID="LeftMenu_Sub"?runat="server">
24?????????????????????????????????????<ItemTemplate>
25?????????????????????????????????????????<tr>
26?????????????????????????????????????????????<td?class="table_none"?onclick="javascript:NowShow('M_<%#?Eval("Menu_ID")%>','<%#?Eval("Menu_Url")%>');"
27?????????????????????????????????????????????????οnmοusemοve="javascript:TDOverORIn('M_<%#?Eval("Menu_ID")%>');"?οnmοuseοut="javascript:TDOverOROut('M_<%#?Eval("Menu_ID")%>');"
28?????????????????????????????????????????????????id="M_<%#?Eval("Menu_ID")%>">
29?????????????????????????????????????????????????<img?height='7'?hspace='5'?src='images/Menu/arrow.gif'?width='5'?align="bottom">
30?????????????????????????????????????????????????<%#?Eval("Menu_Name")%>
31?????????????????????????????????????????????</td>
32?????????????????????????????????????????</tr>
33?????????????????????????????????????</ItemTemplate>
34?????????????????????????????????</asp:Repeater>
35?????????????????????????????</tbody>
36?????????????????????????</table>
37?????????????????????</td>
38?????????????????</tr>
39?????????????</table>
40?????????????<table?cellspacing="0"?cellpadding="0"?width="159"?align="center"?border="0">
41?????????????????<tr>
42?????????????????????<td?colspan="3">
43?????????????????????????<img?height='10'?src='images/Menu/box_bottom.gif'?width='159'>
44?????????????????????</td>
45?????????????????</tr>
46?????????????</table>
47?????????</ItemTemplate>
48?????</asp:Repeater>
?
?綁定的方法就是簡單的綁定字段
<%#?Eval("Menu_ID")%>剩下的那些JS啊CSS啊。不動。只需要動我們要改的東西即可。
根據上節課的知識我們應該知道如何去抄一個菜單了吧？這節里面就不詳細說如何去抄了。
其實這個也是我上大二的時候抄襲來的。前天翻資料一下找到了。就分享了。。
?后臺
?
?
?
?1??protected?void?Page_Load(object?sender,?EventArgs?e)?2?????????{
?3?????????????BindMenu();
?4?????????}
?5?????????#region?"綁定主菜單"
?6?????????///?<summary>
?7?????????///?綁定主菜單
?8?????????///?</summary>
?9?????????private?void?BindMenu()
10?????????{
11?????????????LeftMenu.DataSource?=?SqlHelper.ReturnDataTable("select?*?from?Ziye_Menu?where?Menu_Fid=0?and?Menu_able=1",?CommandType.Text);
12?????????????LeftMenu.DataBind();
13?????????}
14?????????#endregion
15?
16?????????#region?"綁定子菜單"
17?????????///?<summary>
18?????????///?綁定子菜單事件
19?????????///?</summary>
20?????????///?<param?name="sender"></param>
21?????????///?<param?name="e"></param>
22?????????protected?void?LeftMenu_ItemDataBound(object?sender,?RepeaterItemEventArgs?e)
23?????????{
24?????????????int?nParentID?=?Convert.ToInt32(((DataRowView)e.Item.DataItem).Row["Menu_ID"]);
25?????????????Repeater?LeftSubID?=?(Repeater)e.Item.FindControl("LeftMenu_Sub");
26?????????????LeftSubID.DataSource?=?SqlHelper.ReturnDataTable("select?*?from?Ziye_Menu?where?Menu_Fid='"?+?nParentID?+?"'",?CommandType.Text);?
27?????????????LeftSubID.DataBind();
28?????????}
29?????????#endregion
?
?30行代碼
先綁定父的repeater?
綁定之后查找
?
int?nParentID?=?Convert.ToInt32(((DataRowView)e.Item.DataItem).Row["Menu_ID"]);然后根據這個nparentID來查找子repeater的數據源 在綁定。。
?
就這么簡單。。。
?
?接下來我們把上面的分組權限問題闡述一下。
For example:
數據庫Users表中
ID ? ?? Name ?? Password ? ? Group ? ? MenuCollection
1 ? ? ?? ziye ? ? ? ?? 123 ? ? ? ? ?? 0 ? ? ? ?? 1,2,3,4,5,6,9
2 ? ? ?? Mini ? ? ? ?? 123??????????? 1 ???????? 1,3,5,6,9,12
?
流程 :
登陸->登陸成功之后->讀取信息->判斷加載的Group->判斷要讀取的菜單->加載->顯示
?
?
用戶1登陸的時候讀取他的信息?
Group為0 那么就加載MenuStyle為0的TR。
進入頁面讀取菜單頁面的時候 就根據MenuCollection來查詢用戶可以看見的菜單。(select * from menu where MenuID in (1,2,3,4,5,6,9);)
從而達到了一個用戶 讀取各自的菜單。然后可以在響應頁面判斷登陸權限結合FORM認證 應該可以滿足簡單的權限設計。
?
同理用戶2登陸的時候 Group為1加載條件為1下面的TR 在讀取菜單鏈表 加載菜單。
?
?
OVER了 第三章我們將結合Nhibernate spring.Net 來抄襲一個國產UI框架.
?
代碼在第三節一起放出.
?
?
?
轉載于:https://www.cnblogs.com/freedom831215/archive/2011/10/11/2207627.html
總結
