Struts 2 學習筆記（十二）：表單標籤深度解析——Tooltip、Combobox、日期時間選擇、雙級聯動下拉框

深入剖析 Struts 2 表單標籤的進階特性與常見坑點，涵蓋 Tooltip 配置、Combobox、日期時間選擇器、雙級聯動下拉框等核心組件。

Tooltip 提示框：理想與現實的落差

標籤提供 tooltip 與 tooltipConfig 屬性，初以為滑鼠懸停輸入框即顯示 JS Tip 層，實測卻是在輸入框前加圖標，需滑鼠懸停圖標才顯示。若不加 tooltipConfig="#{'jsTooltipEnabled':'true'}"，僅用 alt/title 實現。啟用 JS Tooltip 後，alt/title 也會彈出，產生重疊。且必須加 <s:head/>，否則報 Dojo 錯誤（即使 jsTooltipEnabled=false 亦然）。

TooltipConfig 子屬性配置三種方式

1. OGNL 方式：tooltipConfig="#{'tooltipBgColor':'#FF0000','tooltipFontSize':'20px'}"
2. <s:param> 子標籤（純文字）：<s:param name="tooltipConfig">tooltipWidth = 150 | tooltipAboveMousePointer = false</s:param>
3. <s:param> + OGNL：<s:param name="tooltipConfig" value="#{'tooltipStatic':'true','tooltipSticky':'true'}"/>

實測多個樣式屬性（如 tooltipBgColor、tooltipFontSize）均無效，JS Tip 層始終為土黃底黑字，原因待查。完整屬性列表參考官方 Wiki。

Struts 2.0.6 Dojo Bug 修復

使用 <s:head theme="ajax"/> 時頁面報錯：Could not load 'dojo.widget.html.Tooltip'。原因是模板檔案引用舊類名。修復方法：修改 struts2-core-2.0.6.jar 中：

• template/simple/form-close.ftl
• template/ajax/form-close.ftl

將 dojo.widget.html.Tooltip 替換為 dojo.widget.Tooltip。此 Bug 在 2.1.0 已修復（WW-1895）。

必填欄位標記：required 與 requiredposition

required="true" 在標籤前加紅色星號（*），requiredposition="left|right" 控制星號相對 Label 位置。

複選框列表：<s:checkboxlist>

根據 list 集合顯示一組 checkbox。關鍵屬性：

• listKey：集合物件屬性作為 value
• listValue：集合物件屬性作為 label
• 若集合為 Map，listKey/listValue 分別對應 key/value

範例：

<s:checkboxlist name="a" list="{'a','b','c'}"/>
<s:checkboxlist name="b" list="#{'a':'1','b':'2'}" listKey="key" listValue="value"/>
<s:checkboxlist name="c" list="#books" listKey="name" listValue="author"/>

生成 HTML 採用 <label for="..."> 寫法，點擊文字即可勾選。

Combobox：<s:combobox>

實為「輸入框 + 下拉框」，下拉框選擇時填入輸入框。下拉框無 name 屬性，不產生請求參數。同樣使用 list/listKey/listValue。

日期時間選擇器：<s:datetimepicker>

前所未有的標籤，屬性：

• type="date|time"：日期或時間（不可同時具備）
• toggleType="plain|wipe|explode|fade"：動畫效果
• displayFormat：顯示格式（如 yyyy-MM-dd）

優點：不被下拉框遮擋。缺點多：時間顯示「上午:30」而非「11:30」；月份切換三角箭頭操作習慣不符中文用戶（下箭頭跳到下個月）；整體成熟度不足，不如成熟 JS 日曆控件。

<s:head> 資源引用

引入 CSS/JS，如 <s:head theme="ajax"/> 啟用 Ajax 資源，debug 屬性開啟除錯。

雙級聯動下拉框：<s:doubleselect>

第一個下拉框：name/list/listKey/listValue；第二個：doubleName/doubleList/doubleListKey/doubleListValue。doubleList 中的 top 代表第一個下拉框所選值。

三元運算子寫法

<s:doubleselect name="group" list="{'one','two'}" doubleName="detail"
  doubleList="top=='one'?{'apple','pear'}:{'blue','red'}"/>

三個以上選項用巢狀三元運算子

<s:doubleselect name="group" list="{'one','two','three'}" doubleName="detail"
  doubleList="top=='one'?{'apple','pear'}:(top=='two'?{'blue','red'}:{'pine','willow'})"/>

Map 預定義 Key-List 集合（推薦）

<s:set name="bs" value="#{'one':{'apple','pear'},'two':{'blue','red'},'three':{'pine','willow'}}"/>
<s:doubleselect name="group" list="#bs.keySet()" doubleName="detail" doubleList="#bs[top]"/>

注意事項

• 所有選項值會放入頁面 JS 變數，**選項過多不適合**用此標籤，改用 Ajax 方案
• 首個下拉框只有兩項時，頁面載入時兩框緊貼，改變選項後才出現間距（Bug）；三項以上無此問題

單級下拉框：<s:select>

同樣支援 listKey/listValue、size（顯示行數）、multiple（多選）。doubleselect 第二個框對應 doubleSize/doubleMultiple。