レンダリング：
ページのコード：
<％@ページ言語= " C＃" AutoEventWireup属性= " 真の" 分離コード= " Home.aspx.csは、" 継承= " EasyUIWeb.Home " ％> <！DOCTYPE HTML > < HTML のxmlns = "http://www.w3.org/1999/xhtml" > < 頭にrunat = "サーバー" > < メタHTTP-当量= "Content-Typeの" コンテンツ= "text / htmlの、文字セット= UTF-8" /> > < リンクのhref = "スクリプト/ jqueryの-easyui-1.7.0 /テーマ/デフォルト/ easyui.css" のrel = "スタイルシート" /> < リンクのhref = "CSS / wu.css" のrel = "スタイルシート" /> < リンクのhref = "CSS / icon.css" のrel = "スタイルシート" /> < スクリプトSRC = "スクリプト/ jqueryの-easyui-1.7.0 / jquery.min.js" > </ スクリプト> < スクリプトSRC = "スクリプト/ jqueryの-easyui-1.7.0 / jquery.easyui.min.js」> </ スクリプト> < スクリプトSRC= "スクリプト/ jqueryの-easyui-1.7.0 /ロケール/ easyui-LANG-zh_CN.js" > </ スクリプト> < スクリプトSRC = "スクリプト/公共/ Main.js" > </ スクリプト> < スクリプトSRC =」スクリプト/ Menu.js " > </ スクリプト> </ ヘッド> < 身体クラス= "easyuiレイアウト" > < divのクラス= "WU-ヘッダ" データ・オプション="地域： '北の'国境：偽、スプリット：真」> < DIV クラス= "WU-ヘッダ左"> < H1 > EasyUI Web管理</ H1 > </ DIV > < DIV クラス= "WU-ヘッダ右" > < P > < 強いクラス= "easyui-ツールヒント" タイトル= "2条未读消息" >管理者</ 強い>、欢迎您！ </ P > </ DIV > </ DIV > < DIV クラス= "WU-サイドバー" データ・オプション= "地域： '西'、スプリット：真、ボーダー：真、タイトル： '导航菜单'" > <DIV クラス= "easyui-アコーディオン" データオプション= "国境：偽、フィット：真の" ID = "RightAccordion" > </ DIV > </ DIV > < DIV クラス= "WU-メイン" データ・オプション= "地域： '中央'" > < div要素のid =」 WU-タブ" クラス= "easyui-タブ" データ・オプション= "国境：偽、フィット：真の" > </ DIV > </ DIV > < DIV クラス= "WU-フッタ" データ・オプション="地域：」南」、国境：真、スプリット：「真> ＆コピー; 2013呉すべての権利予約 </ DIV > </ ボディ> </ HTML >
JSコード：
$（関数（）{ $（ "#RightAccordion"）アコーディオン（{。// 初始化アコーディオン fillSpace：真、 フィット：真、 ボーダー：偽、 アニメーション：偽 }）; VARのuserId = 1 ; $アヤックス（{ タイプ： 'ポスト' 、 データ型： "JSON" 、 URL： "/Handlers/MenuHandler.ashx?action=LoadMenu&userId=" +はuserId + "＆menuParId = '1'" 、 成功：関数（データ）{ の$ .each（データ、関数（I、N）{ VAR menuID属性= n.id。 $（ '#RightAccordion'）アコーディオン（ '追加' 、{ タイトル：n.text、 選択された：真、 iconCls：n.iconCls、 コンテンツ： "<UL ID ="木" + menuID属性+" '> </ UL >」 }）。 $ .parser.parse（）; $ .getJSON（ "/Handlers/MenuHandler.ashx?action=LoadMenu&userId=" +はuserId + "＆menuParId = '" + menuID属性+ "'" 、 ヌル、 機能（結果）{//注意結果中的结果、ツリー必须的字段名称为：ID、テキスト、iconClsの $（ "#tree" + menuID属性）.tree（{ データ：結果、 onBeforeExpand：機能（ノード、PARAM）{ $（ "#tree" + menuID属性）.tree（ 'オプション'）URL = "/Handlers/MenuHandler.ashx?action=LoadMenu&userId=" +はuserId + "＆menuParId = '" + node.menuId + "'" ; } 、 のonClick：機能（ノード）{ VAR tabTitle = node.text。 そこ URL =node.menuUrl; VaRのアイコン= node.iconCls。 addTab（tabTitle、URL、アイコン）。 } }）。 } ）; }） } }） }） // 选项卡 関数addTab（タイトル、URL、アイコン）{ 場合（$（ '＃WU-タブ'）。タブ（ '存在' 、タイトル））{ $（「＃WU-タブ'）.tabs（'」を選択し、タイトル）。 } 他{ VARコンテンツ= '<IFRAMEスクロール= "auto"のFRAMEBORDER = "0" SRC = "' + URL + '"スタイル= "幅：100％;高さ：100％;"> </ IFRAME>' ; $（ '＃WU-タブ'）タブ（ '追加' 、{ タイトル：タイトル、 コンテンツ：コンテンツ、 閉鎖可能：真 }）。 } }
DALとBLLコード：
使用してSystem.Dataを。 使用してDBUtilityを。 名前空間DAL { パブリック クラスDAL_Menu { /// <要約> /// 根据用户ID查询有相关权限的菜单 /// </要約> /// <PARAM NAME = "はuserId"> </ PARAM> /// <リターン> </戻り> パブリックデータセットGetUserMenuData（int型はuserId、ストリングmenuParId） { 文字列のSQL = @」iconCls、m.menuParId、Mと異なるテキスト（m.menuName）、m.menuId IDとして、m.menuIcon SELECT tb_usersユーザーから.menuUrl INNER JOINはdbo.tb_users_role UR ON users.userId = ur.userId ur.roleId = RMB ON INNER JOIN dbo.tb_role_menu_button人民元を。 roleId インナーrmb.menuId = m.menuId ON dbo.tb_menu mをJOIN users.userId = " +はuserId + " AND m.menuParId = " + menuParId + " によって順序をm.menuParId " ; 戻りDbHelperSQL.Query（SQL）を; } } } 使用System.Collections.Genericを、 使用System.Dataを、 使用して一般的に、 使用DALを、 使用モデル、 名前空間BLL { パブリック クラスBLL_Menu { プライベート 読み取り専用の DAL_MenuのDAL = 新しいです DAL_Menu（）; /// <要約> /// ユーザIDに関連するクエリの権限メニュー /// </要約> /// <PARAM NAME = "はuserId"> </ param>の /// </戻り> <返し>を パブリックリスト（<Model_Navigation> GetUserMenuData INTはuserId、ストリングmenuParId） { データセットDSは = この.dal.GetUserMenuData（userIdを、menuParId）を、 戻り ModelHandler <Model_Navigation> .FillModel（ds.Tablesを[ 0 ]）; } } }