JSP 教學 - 動態輸出 HTML 樹狀結構

HTML 的樹狀結構東常有很多做法，在很多網站上譬如說部落格裡以時間來顯示文章的部份

即是一種樹狀結構，一般在 HTML裡能讓使用者點及某標籤及展開內容的作法

通常都是透過 CSS 中的 display:none; 來達成，以下範例以 span 標籤為例

以下的水藍色地假設很重要喔 等等 JSP 程式會用到

<span id="spanID" onClick='showhide('show')' >//假設這邊叫標頭
    <p>點我展開</p>
<span>
<span id="show" style="display:none;">  //假設這邊叫內容

<ul>
        <li><a href="http://tw.yahoo.com/">YAHOO</li>
        <li><a href="http://www.google.com.tw/">Google</li>
        <li><a href="http://www.youtube.com/">Youtube</li>

</ul>
</span>

以上的第一個 span 當滑鼠點擊時呼叫 showhide() 方法


function showhide(element){
    var subs = document.getElementById(element).style;
    if(subs.display=='none')
        subs.display='';  
    else
        subs.display='none';
}

以下以 JSP 來動態建立一個樹狀結構，以部落格的日期分類為例

程式碼有點複雜.... 確實不好做

必須判斷幾年幾月  做出不同的 HTML輸出 以及HTML結尾

以下程式是我最近再做的一個 AP 大致上就是能夠讓使用者自行建立部落格的網站

所以可能會參雜一些我所定義的 DAO 或是變數等，請自行斟酌替換或刪除

雖然有點複雜有點難　要細心一點　就可以解決了

LiteraryDao literDao = new LiteraryDao();    //我的LiteraryDao
Calendar calendar = new GregorianCalendar();
int thisYear = calendar.get(Calendar.YEAR);    //取得年
int thismonth = calendar.get(Calendar.MONTH); thismonth++; //取得月
int y = new LiteraryDao().getFirstLiterary(strDomain);  //透過 DAO 取得最近的文章
if(y == -1){    //資料庫異常
        out.println("文章列表載入錯誤");
 }else if(y == 0){     //沒有文章
        out.println("<span onClick='showhide('show')' >");
        out.println("<img src='images/scranch.png'><p class='mainItem'>" + thisYear + "</p></img></span><br />" );
        out.println("<span id='m1sub' style=''display:none;'></span>");
}else{
        ArrayList listMenu = literDao.getAllLiterary(strDomain, 3);  //取得所有文章
        int posMenu = 0;  //指向 listMenu 陣列的指標
        int yid = 0, mid = 0;
        String uperFather = "m1sub", lowerFather = "mm1sub";
        String various = "fid", manyious = "cid";
        // isYear 代表年的 HTML 標籤, false 是指尚未有 span 標頭, isMonth 同
        boolean isYear = false, isMonth = false;  
        while(posMenu < listMenu.size()){
                 Literary liter = (Literary)listMenu.get(posMenu);  //取出文章物件 Literary 
                 String X = liter.getDate();     //取得該文章的日期
                 String d = X.substring(0, X.indexOf('/'));   //取出年份
                 String m =  X.substring(X.indexOf('/')+1, X.lastIndexOf('/'));  //取出月份

                 if(Integer.valueOf(d) == thisYear) {   //比較剛剛取出的年份是否等於現在的年份
                         posMenu++;  //陣列指標前進一個
                         if(!isYear) {     //尚未有 span 標頭
                                 //此為以下的 javascript 所宣告的 various 變數 的值
                                 String uperId = uperFather + String.valueOf(yid);yid++;
                                 various = various + "a";   //變數名稱 每換一年都加個 a... 避免 ID 相同
                                 out.println("<script type='text/javascript'>var " + various + " = '" + uperId + "';</script>");
               /*以上是動態輸出一段 javascript 主要是宣告一個 span內容 的 id 以便點擊年份時show出所有月份內容 */
                                 out.println("<span onClick='showhide(" + various + ")' >");
                                 out.println("<img src='images/scranch.png' /><a href='#' class='mainItem'>" + d + "</a></span><br />");
                                 //以下這一行為輸出 span 內容
                                 out.println("<span id='" + uperId + "' style='display:none;'><ul>");
                                 isYear = true;  //記得調為 true 代表 年份的 span標頭 HTML已經呈現
                         }
                         if(Integer.valueOf(m) == thismonth) {
                                 if(!isMonth){     //當這個月尚未有 span 標頭時
                                         //此為以下的 javascript 所宣告的 manyious 變數 的值
                                         lowerFather = lowerFather + String.valueOf(mid);mid++;
                                         manyious = manyious + "a";  //變數值 同樣每換一個月就加個 a 避免 ID想同
                                         out.println("<script type='text/javascript'>var " + manyious + " = '" + lowerFather + "';</script>");
                        /*以上是動態輸出一段 javascript 主要是宣告一個 span內容 的 id 以便點擊月份時show出該月所有文章 */ 
                                         out.println("<li><span onClick='showhide(" + manyious + ")' >" + thismonth + "月</span></li>");
                                         out.println("<span id='" + lowerFather + "' style='display:none;'><ul>");
                                         //以下顯示文章連結
                                         out.println("<li><a href='http://localhost:8084/WebByYou/'" + liter.getUid_fk() + "/literary/" + liter.getUid_fk() + "new_" + liter.getTitle() + ".jsp?literID=" + liter.getIid() + ">" + liter.getTitle() + "</a></li>");
                                         isMonth = true;
                                 }else{
                                         //以下顯示文章連結

                                         out.println("<li><a href='http://localhost:8084/WebByYou/'" + liter.getUid_fk() + "/literary/" + liter.getUid_fk() + "new_" + liter.getTitle() + ".jsp?literID=" + liter.getIid() + ">" + liter.getTitle() + "</a></li>");

                                 }
                         }
                         else   //代表目前取得的文章已經不是 這個月的 thismonth
                         {
                                 out.println("</ul></span>");   // 月的 span 內容結尾
                                 thismonth--;
                                 if(thismonth == 0){thismonth = 12;}  //換月
                                 isMonth = false;   //將 isMonth 設為 false 代表皆下來那個月份的 span 標頭尚未輸出
                                 posMenu--;   //陣列指標要減1 因為目前這個聞張因為月份不符所以尚未輸出
                         }
                }
                else   //代表目前取得的文章已經不是 這個年的 thisYear 
                {
                         //以下的 if 很重要，因為換年了, 所以必須判斷剛剛的月份的 span 內容是否已有 HTML 結尾
                         if(isMonth){  
                                out.println("</ul></span>");
                                thismonth--;
                                if(thismonth == 0){thismonth = 12;}
                                isMonth = false;
                        }
                        out.println("</ul></span>");     //年份的 span 內容結尾
                        thisYear--;
                        isYear = false;
                }
        }
         //結束時記得判斷是有有結尾
        if(isMonth){out.println("</ul></span>");}  

        if(isYear){out.println("</ul></span>");}  

}