DWZ關聯菜單

  關聯菜單，即組合框Combo box，在DWZ文檔中對組合框combox的是這樣描述的：

       在傳統的select 用class 定義：class=”combox”, html 擴充：保留原有屬性name,  增加了屬性：ref。

ref 屬性則是為了做級聯定義的，ref所指向的則是目前combox值改變成引起關聯的下一級combox，ref用下一級combox的id屬性來指派。注意：一般combox沒必要設定id屬性，隻要級聯時需要設定子級id等于父級ref，不同navTab和dialog中combox元件id必須唯一

以下是級聯示例：

<select class="combox" name="province" ref="combox_city" refUrl="city.do?code={value}">

      <option value="all">所有省市</option>

      <option value="bj">北京</option>

      <option value="sh">上海</option>

</select>

<select class="combox" name="city" id="combox_city" ref="combox_area" refUrl=" area.do?code={value}">

      <option value="all">所有城市</option>

</select>

<select class="combox" name="area" id="combox_area">

      <option value="all">所有區縣</option>

</select>

 
      

伺服器端傳回json格式：      

[

      ["all", "所有城市"],

      ["bj", "北京市"]

] 
      
    
根據以上可以看出，combox的工作模式是這樣的，當一級菜單的某個選項選中時，就會執行相應的refUrl=“X.action"，通過伺服器傳回json格式的頁面後，并根據一級菜單中定義的ref="XXX"來尋找二級菜單中id=“XXX”,将傳回的json頁面放入二級菜單中，與此同時，如果還有三級菜單的話，由于二級菜單的資料的改變，二級菜單中也會執行其相應的refUrl，随後伺服器同樣傳回json格式頁面，尋找與ref比對的id三級菜單進行關聯..以此類推。      
   

具體使用一個商品類型分類的表做測試如下：

商品分類表中，主要資訊包括主鍵id、商品id，父id（即商品的所屬關系），及商品名稱，具體表結構如下：

1、首頁中定義一個擷取該表資訊的連結：

<li>

<a href="comykind_load.action?pager.currentPage=1" target="navTab" rel="comdkind" >商品類型關聯</a>

</li> 
      

 2、點選商品類型關聯後，進入的頁面代表即為combox元件的核心：      

<select class="combox" name="father" ref="combox_son" 

                                      refUrl="<%=basePath%>/admin/son.action?code={value}">

      <option value="all">所有類型</option>
      <s:iterator value="comy_kinds" var="c">
      <option value="${c.kind_id}">${c.kind_name}</option>
      </s:iterator>

</select>

<select class="combox" name="son" id="combox_son" ref="combox_grandson" 

                                  refUrl="<%=basePath%>/admin/grandson.action?code={value}">

      <option value="all">所有子類型</option>

</select>

<select class="combox" name="grandson" id="combox_grandson">

      <option value="all">所有孫類型</option>

</select>
      
    
對上述代碼分析如下：      
    
  
             

   
3、上圖展示了combox元件的流程，進過伺服器處理傳回的頁面如下(頁面為json格式）：      
    
<!--二級關聯，子類型代碼son.jsp-->

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags"  prefix="s" %>
[
<s:if test="comy_kinds.size>0"> 
 <s:iterator value="comy_kinds" var="c" > 
  ["${c.kind_id}", "${c.kind_name}"],
 </s:iterator>
</s:if>
<s:else>
    ["", "無"]
</s:else>
] 

<!--三級關聯，孫類型的代碼grandson.jsp頁面與此一樣，不再贅述-->
      
    
4、檢視測試結果如下：