1、樹形導航菜單組件設計1 .系統模型本系統的體系構造設計采用B/S或C/S構造。假設為B/S采用三層構造：表示層、應用層、數據層。其中，表示層是客戶端的瀏覽器；應用層是具有應用程序擴展功能的Web效勞器，它包括事務處理邏輯，位于效勞器端；數據層即數據庫效勞器。B/S的三層構造是基于Web效勞的體系構造，采用三層構造的優點：可實現應用效勞器級和數據庫級的全面分布，較好實現負載上的平衡，因為有了中間層，提高了數據的平安性。2 .樹形導航菜單組件的體系構造設計該樹形導航菜單組件的設計主要是基于樹形構造的研究，能夠對樹中的節點進展相關操作，主要實現的功能有：讀入根節點、展開、折疊、編輯、保存、顯示以及拖

2、放等功能，其中編輯功能又包括對兄弟節點、根節點和葉節點進展增加、刪除和修改的操作，而拖放功能那么可以將節點拖放為其它節點的子節點和葉節點，也可以實現同級節點之間的拖放，以此輕松地實現了各個節點之間的次序排列方式。該樹形導航菜單組件各個功能模塊之間的層次構造關系如圖2.1所示：樹形導航菜單拖放展開折疊編輯節點名稱增加節點刪除節點編輯保存顯示增加兄弟節點增加孩子節點優選圖2.1樹形導航菜單組件的功能構造圖3 .各模塊功能設計3.1 展開樹形構造是表示事物問“一對多的聯系方式之一，同時還表示了事物間的附屬關系和并列關系。如果樹形構造中的所有節點都翻開勢必占用很大的空間，顯示不出清晰的層次構造并且查找

3、起來不方便。為了解決這個問題可以通過對節點的展開操作和折疊操作來實現。當樹形構造的一個節點有子節點的時候就可以將該節點設為可以展開或者折疊。當要查看該節點的子節點信息的時候那么需要將該節點展開來看，如果不需要那么將該節點折疊起來，以節省空間。同時讓樹形構造有序整齊。在此需要用到兩個圖標：“+和-'。當樹形構造的節點目錄有下級子目錄的時候節點前面的按鈕呈現“+狀態,表示有下級子目錄并且為折疊狀態，這時候點擊樹形導航構造左側的按鈕圖標+，就將樹中的該節點目錄下的子目錄節點全部展開，同時“+變成了-，說明該節點已經完全展開。如圖(a)、(b)所示。，二事尊而網嘉碑章1:2章章章章章章章章章

4、啊 1 1二三四五六七八九十 軻第 第第第第第竟第第第 計 日!r.LILt(a)展開前慨逑因特網概述1 1網絡的網絡因特網的組成物理層數據慌路信網絡層運輸層應用層M喑安全因將網上的音頻/視頻胭翁無線網絡_下一代因特網(b)展開后3.2 折疊折疊狀態與展開狀態正好相反，當樹形構造的節點目錄有下級子目錄的時候并且節點前面的按鈕呈現“-狀態，表示該節點目錄為展開狀態，如果要使該節點呈現為折疊狀態，點擊樹形導航構造左側的按鈕圖標“-，就將樹形構造中的該節點目錄下的子目錄節點全部隱藏起來，同時“-變成了“+，說明該節點已經折疊，下級子節點目錄已經隱藏。3.3 增加節點（ 1）增加兄弟節點該樹形導航菜單

5、與以往樹形導航構造不同的地方就在于在以往樹形導航構造的根底上增加了對節點的任意編輯，其中包括對節點的增加、刪除和修改。在該樹形導航菜單中設計需要增加并行的兄弟節點以實現同級目錄。在確定需要在某個節點下添加兄弟節點后，首先點擊該節點，然后點擊組合列表框選擇增加兄弟節點，并且雙擊新節點后可以對新增加的兄弟節點進展文本編輯。（ 2）增加孩子節點如果在編輯樹形構造目錄的時候需要對某一目錄添加它的下級子目錄，就要對該樹形構造中的某一節點增加它的子節點，這時也要通過點擊按鈕來對這一節點進展添加，并且要對新增加的子節點進展文本編輯。首先確定需要增加子節點的節點，然后點擊該節點，再點擊組合列表框選擇增加子節點

6、，即可對該節點增加它的子節點，在該節點的下級節點中出現節點編輯框。雙擊新增加的子節點就可以對其進展文本編輯。3.4 刪除節點對于樹形導航構造，不僅要做到可以任意增加節點同時還應該能夠任意刪除節點，這樣才能更加方便地對樹形構造的目錄進展修改調整。在該樹形導航菜單中設計了一個刪除按鈕，即對選中的節點進展刪除。首先要點擊需要刪除的節點，然后點擊刪除按鈕，對其進展操作。3.5 拖放該樹形導航菜單不僅實現了對節點的增、刪、改的編輯，還給用戶提供了一個方便實用的功能:拖放功能。也就是說，用戶可以通過鼠標選中要操作的節點或者目錄，隨意拖至想要的位置，就可以實現節點位置的改變。可以將編輯好的任意節點拖為其它節

7、點的兄弟節點，子節點，而不需要對節點進展重新添加和編輯，這樣很輕松地就實現了對節點的次序調整。拖放功能操作起來很簡單，主要是對鼠標的操作，主要分兩種方式：1拖放節點為其它節點的子節點，成為該節點目錄的下級目錄；2拖放節點為同級節點的前后以此來改變節點的位置，這種拖放主要應用在調整節點次序方面。3.6 保存對于編輯好白樹形構造，如果不能進展保存也就失去了編輯的意義。在該樹形導航菜單中，可以實時對編輯好的樹形構造進展保存。3.7 顯示在該樹形導航菜單不僅可以輕松地對編輯好的樹形構造進展保存，而且可以直觀地顯示在用戶面前，對編輯好的樹形構造的內容進展顯示。一旦編輯成功，就可以點擊“顯示按鈕，樹形導航

8、構造加載區進展顯示。4 .系統數據庫設計要開發一個Web數據庫當然離不開后臺數據庫的支持，在后臺數據庫的選擇上，不同的要求可以選擇不同數據庫來實現。本系統采用MicrosoftSQLServer2005數據庫。SQLServer2005是微軟提供的一個數據庫管理軟件，能提供超大型系統所需的數據庫效勞，可在多個用戶之間有效地分配可用資源。它不僅是一個巨大的數據容器，更是一個非常強大的數據處理工具。由于與ASP.NET同為微軟的產品，ASP.NET對SQLServer提供了更為強大的支持，ASP.NET中的數據處理組件ADO.NET對SQLServer作了優化處理，ADO.NET中SQL類會跳過由

9、OLEDB提供程序呈現的中間層，而直接進入數據庫效勞器內部API,從而提高了運行的速度。系統使用SQLServer作為數據庫管理軟件不但可以防止與操作系統兼容問題，更可大幅提高開發和運行的效率。4.1 數據庫表的設計數據字段是對系統中數據各個層次和各個方面的準確、詳盡地描述，也是數據和處理的有機結合。表treeroot字段名稱數據類型長度根節點號主鍵字符型10名稱字符型50圖片二進制50寬度字符型50高度字符型50表first字段名稱長度節點號主鍵字符型20名稱字符型50圖片二進制50寬度字符型50高度字符型50根節點號外鍵字符型20子節點號字符型204.2 數據庫表關系tree root#根

10、節點號Wrlb伯VariableImage (t Relationship 1Variable '-WVariable稱片段4 名圖嵬高 o o o Ofiret點,另 Variable c節稱本片度度節 報名文圖竟高于Q 。 Q QOOVariable cVariable cVariable cImage (5( Variable c Variable c 點號 Variable c圖4.2概念數據模型firsttreeroot-根節點號號號號尋尋點稱片度度節節節名圖寬高根子一一一1一1一0.Jo.*1*-*«-*drklrn./XJtl/I.加除改存增刪修保+VJ加除改存示增刪修保顯十+十+«»w圖4.3功能邏輯類圖5 .樹形導航菜單組件的界面設計該樹形導航菜單組件的界面主要分為兩局部：功能欄和樹形導航構造加載區。功能欄那么放置了各個按鈕相應地來實現節點的一些操作功能，通過點擊按鈕對樹形構造中的節點進展操作；樹形導航構造加載區是加載樹形構造的區域，可以將提前編輯好的樹形構造內容加載到該區域進展顯示，也可以在此區域對樹形構造進展編輯以及顯示。勒嚀點工章章章章章章章章章1二三四五六七八九十諾第第第第第第第第n3 一 一 -