在上一篇文章中介紹JavaScript實現級聯下拉菜單的例子,本篇繼續介紹一個利用現存的JavaScript代碼配合struts構成一個樹型菜單的例子。
大家知道,樹型菜單在應用中有著十分廣泛的用途。實現樹型菜單的途徑較多,本文介紹的一種覺得理解起來比較直觀,與上篇文章的方法比較類似:就是將樹型菜單的節點保存在數據庫表中(當然,在實際項目中,節點的信息往往并不是放在一個單一的表中的。比如:在一個權限管理系統中,這些信息可能分別放在用戶表、角色表、功能表等表中,只要設法讓查詢出來的結果與下面給出的表格的內容相似就可以了。只要稍微有些數據庫方面的知識做到這點并不難,詳細的實現細節超出了本文的主題,不在此細說)。通過數據訪問對象將其從數據庫中查出后放在一個集合對象中,并將該集合對象傳遞給客戶端,再用一段現存的JavaScript代碼--dtree(一個免費的JavaScript程序)來操作集合中的數據。大方向確定之后,我們就來具體著手來實現它。
根據dtree的要求,我們來建一個數據庫表來存儲樹的節點信息,表名為functions,其結構如下:
在表中輸入如下一些記錄以供后面的實驗用:
到此,數據庫方面的準備工作就告一段落。
接下來的工作我們仍然在先前介紹的mystruts項目中進行。先編寫一個名為:FunctionsForm的ActionForm,其代碼如下:
因為我們的樹型節點的數據都存儲在數據庫表中,接下來,要做一個數據訪問對象類,名稱為:FunctionsDao.java,其代碼如下:
這里值得注意的是:在以往我們見到的一些顯示樹型菜單的程序,如:一些asp程序中往往簡單地采用遞歸調用的方法來查找到樹的各個節點。這對那些樹的深度不確定的場合還是有些用處,但這種處理方法也有一個致命的弱點,那就是反復地進行數據庫查詢,對一些節點較多的應用,對應用程序性能的影響是非常大的,有時會慢得讓人難以接受;而在實際的應用中大多數情況下樹的深度往往是有限的,如:用于會計科目的樹一般最多也在六層以下。又如:用作網頁功能菜單的情況,網頁設計的原則就有一條是:達到最終目的地,鼠標點擊次數最好不要多于三次。因此,在實際設計存儲樹型結構的表時要考慮查詢的效率。對能確定樹的最大深度的情況下,要設法盡量優化查詢語句,減少查詢次數,以提高應用程序的性能同時減少數據庫的負荷。
本例對應的Action的名稱為FunctionsAction,其代碼如下:
在struts-config.xml文件中加入如下內容:
為了對應配置中的 ,我們還要提供一個顯示錯誤信息的jsp頁面,其代碼如下:
下面,我們來看一下我們顯示樹型菜單的頁面代碼,從配置中可以看出,頁面的名稱為testDTree.jsp,代碼如下:
從 可以看出,我們要在mystruts目錄下,建一個名為js的目錄,并將下載的dtree文件dtree.js放在該目錄中。
再在mystruts目錄下分別建一個名為img和名為css的目錄,將dtree中用到的圖標和層疊樣式表單文件分別放在相應的目錄中。
有關dtree的使用方法,詳見其說明文檔,如:api.html。筆者在此要感謝dtree的作者為我們提供了一個結構如此清晰的javascript程序!
現在,可以編譯執行這個例子程序了,編譯后在瀏覽器中輸入:http://127.0.0.1:8080/mystruts/functionsAction.do就可以看到運行效果。效果圖為:

注:dtree的下載地址為: http://www.destroydrop.com/javascripts/tree/
大家知道,樹型菜單在應用中有著十分廣泛的用途。實現樹型菜單的途徑較多,本文介紹的一種覺得理解起來比較直觀,與上篇文章的方法比較類似:就是將樹型菜單的節點保存在數據庫表中(當然,在實際項目中,節點的信息往往并不是放在一個單一的表中的。比如:在一個權限管理系統中,這些信息可能分別放在用戶表、角色表、功能表等表中,只要設法讓查詢出來的結果與下面給出的表格的內容相似就可以了。只要稍微有些數據庫方面的知識做到這點并不難,詳細的實現細節超出了本文的主題,不在此細說)。通過數據訪問對象將其從數據庫中查出后放在一個集合對象中,并將該集合對象傳遞給客戶端,再用一段現存的JavaScript代碼--dtree(一個免費的JavaScript程序)來操作集合中的數據。大方向確定之后,我們就來具體著手來實現它。
根據dtree的要求,我們來建一個數據庫表來存儲樹的節點信息,表名為functions,其結構如下:
|
在表中輸入如下一些記錄以供后面的實驗用:
|
到此,數據庫方面的準備工作就告一段落。
接下來的工作我們仍然在先前介紹的mystruts項目中進行。先編寫一個名為:FunctionsForm的ActionForm,其代碼如下:
|
因為我們的樹型節點的數據都存儲在數據庫表中,接下來,要做一個數據訪問對象類,名稱為:FunctionsDao.java,其代碼如下:
|
這里值得注意的是:在以往我們見到的一些顯示樹型菜單的程序,如:一些asp程序中往往簡單地采用遞歸調用的方法來查找到樹的各個節點。這對那些樹的深度不確定的場合還是有些用處,但這種處理方法也有一個致命的弱點,那就是反復地進行數據庫查詢,對一些節點較多的應用,對應用程序性能的影響是非常大的,有時會慢得讓人難以接受;而在實際的應用中大多數情況下樹的深度往往是有限的,如:用于會計科目的樹一般最多也在六層以下。又如:用作網頁功能菜單的情況,網頁設計的原則就有一條是:達到最終目的地,鼠標點擊次數最好不要多于三次。因此,在實際設計存儲樹型結構的表時要考慮查詢的效率。對能確定樹的最大深度的情況下,要設法盡量優化查詢語句,減少查詢次數,以提高應用程序的性能同時減少數據庫的負荷。
本例對應的Action的名稱為FunctionsAction,其代碼如下:
|
在struts-config.xml文件中加入如下內容:
|
為了對應配置中的
|
下面,我們來看一下我們顯示樹型菜單的頁面代碼,從配置中可以看出,頁面的名稱為testDTree.jsp,代碼如下:
|
從 可以看出,我們要在mystruts目錄下,建一個名為js的目錄,并將下載的dtree文件dtree.js放在該目錄中。
再在mystruts目錄下分別建一個名為img和名為css的目錄,將dtree中用到的圖標和層疊樣式表單文件分別放在相應的目錄中。
有關dtree的使用方法,詳見其說明文檔,如:api.html。筆者在此要感謝dtree的作者為我們提供了一個結構如此清晰的javascript程序!
現在,可以編譯執行這個例子程序了,編譯后在瀏覽器中輸入:http://127.0.0.1:8080/mystruts/functionsAction.do就可以看到運行效果。效果圖為:

注:dtree的下載地址為: http://www.destroydrop.com/javascripts/tree/