《DWZ笔记五》联动菜单

 

《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必须唯一

以下是级联示例：

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

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

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

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

</select>

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

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

</select>

<selectclass="combox"name="area"id="combox_area">

      <optionvalue="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>

<ahref="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}">

      <optionvalue="all">所有类型</option>
      <s:iteratorvalue="comy_kinds"var="c">
      <optionvalue="${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}">

      <optionvalue="all">所有子类型</option>

</select>

<selectclass="combox"name="grandson"id="combox_grandson">

      <optionvalue="all">所有孙类型</option>

</select>

对上述代码分析如下：

 
3、上图展示了combox组件的流程，进过服务器处理返回的页面如下(页面为json格式）：

<!--二级联动，子类型代码son.jsp-->

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

<!--三级联动，孙类型的代码grandson.jsp页面与此一样，不再赘述-->

4、查看测试结果如下：