动态级联下拉框构件

3 3动态级联下拉框构件
3.1 设计背景
动态下拉列表框指的是在页面输入或选中某一个条件后，页面通过局部刷新机制向后台请求符合条件的数据，使用返回的数据来填充另一个空白下拉框。产生这个需求的背景有两点：
1. 是增加可用性，可以动态改变一个下拉框中的数据，而不是静态的使用几个下拉框来表示一些互斥的数据，使页面臃肿并且难于操作。
2. 是减少页面的数据量，提高性能，由于电信业务的特点，经常会有几千条的数据充斥一个下拉框，例如，代理商表，数据来源表等，如果在页面初始化时，就将这些数据传到页面上，对网络造成了相当的负担，同时对操作员的机器也提出了苛刻的要求，其直接结果就是，页面极为缓慢，甚至不能显示出来。
3.2 设计思路
下面是动态级联下拉框组件的使用方式：
<kt:dyselect securityId="aa.bb.cc.dd">
省：<kt:select id="a0" securityId="aa.bb.cc.dd" url="/componentTag/test" slave="a1" ds="${list2}" var="v" >
<kt:option value="${v}" text="${v}"/>
</kt:select>
市：<kt:select id="a1" securityId="aa.bb.cc.dd" url="/componentTag/test"/>
</kt:dyselect>
在上面的页面中，将自定义的下拉列表框嵌套在容器标签kt:dyselect中，当用户在选择id为a0能触发事件的的select标签时，系统会向url发送请求，系统会根据请求返回的数据填充id为a1的select标签，这些对用户来说时透明的，用户只需要在标签kt:select中配置主下拉框的id，从下拉框的id，和url。
这样设计的好处是：
1. 降低了组件实现的复杂性
2. 很容易实现多重的级联下拉列表分析。
3.3 标签属性说明
表格 32 1标签属性表
属性名 是否可以为空 默认值 说明
id 否 给出该组件的唯一标识
securityId 否 权限标识
url 否 向服务器发送请求地址
slave 否 需要填充数据的下拉列表框id
ds 是 迭代数据源，一般第一个下拉列表框拥有
Var 是 false 迭代变量和上面搭配使用
3.4 使用实例
实例一
1. 目标构造一组双级联的select组件，效果如图：

图 32 1双级联的下拉选择框效果图（一）

图 32 2双级联的下拉选择框效果图（二）
2. 在页面上引入js文件：
<script type="text/javascript"
src="<%=request.getContextPath() %>/js/doublecombo-1.0.js"></script>
3. 用户自定义html select标签，注意主从的两个select标签需要有id属性。
4. 服务器端action，构造数据
注意，在向后台发送请求时，默认请求中带有参数query其值是主选择框的值，和需要slave填充的下拉列表框的id，实现可以参考下面的实现：
String query=req.getParameter("query");
String slaveSelect=req.getParameter("slave");
ComboData cb=new ComboData();

if("nanjing".equals(query)){
cb.addOption(slaveSelect, "nanda", "nanda");
cb.addOption(slaveSelect, "dongnan", "dongnan");
cb.addOption(slaveSelect, "nanhang", "nanhang");
}
在构造后台数据时我们提供了方便的对象：
ComboData comboData = new ComboData();
添加数据：
cb.addOption(slaveSelect, "nanda", "nanda");

最后输出xml流：
PrintWriter out=res.getWriter();
out.write(cb.transformToJSON());
对象ComboData提供下面几个主要方法：
 public void addOption(String selectId， String value， String text) —— 这个方法使用在一对多个下拉列表之间的关联， selectId 是所关联的从select html组件的id，value是option的值，text是option显示的文本，具体实例见后面；
 public String transformToXml(String encoding) —— 转换内部数据结构为xml格式，参数encoding为xml流的编码。
实例二
目标构造一组三级关联的select组件；
效果：

图 32 3三级联的下拉选择框效果图（一）

图 32 4三级联的下拉选择框效果图（二）

图 32 5三级联的下拉选择框效果图（三）
由于考虑到效率问题，省份控制市级，市级再控制学校。
引入js文件
<script type="text/javascript"
src="<%=request.getContextPath() %>/js/doublecombo-1.0.js"></script>
用户自定义html select标签，注意三个select标签需要有id属性，例如：
<kt:dyselect securityId="aa.bb.cc.dd">
省：<kt:select id="s0" securityId="aa.bb.cc.dd" url="/componentTag/test" slave="s1" ds="${list}" var="v" >
<kt:option value="${v}" text="${v}"/>
</kt:select>
市：<kt:select id="s1" securityId="aa.bb.cc.dd" url="/componentTag/test" slave="s2"/>
校：<kt:select id="s2" securityId="aa.bb.cc.dd" url="/componentTag/test" />
</kt:dyselect>

ComboData使用了方法public void addOption(String selectId， String value， String text)。其中，selectId为所控制的不同的从select组件的id，而这些id是由参数slaveSelect得到的：
String[] selectId = request.getParameter("slaveSelect");

具体原理同于二级下拉列表框，实际可以讲一个三级下拉列表框拆成两个二级下拉列表框。