在传统的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、查看测试结果如下: