`
wuwenyu
  • 浏览: 4032 次
  • 性别: Icon_minigender_1
  • 来自: 南通
文章分类
社区版块
存档分类
最新评论

动态级联下拉框构件

阅读更多
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");

具体原理同于二级下拉列表框,实际可以讲一个三级下拉列表框拆成两个二级下拉列表框。
2
1
分享到:
评论
2 楼 Asia1752 2011-04-13  
无法应用呀,代码中找不到
BaseContainerTag

DynSelect extends BaseContainerTag 中的BaseContainerTag 这个类在代码在哪
1 楼 小甜甜弟弟 2010-05-06  
DynSelect extends BaseContainerTag 中的BaseContainerTag 这个类在代码在哪

相关推荐

    好用简单的可编辑级联下拉框

    "好用简单的可编辑级联下拉框"就是一个旨在提升用户体验的组件,它将传统的静态下拉框与级联选择功能相结合,并引入了编辑能力,使得用户在选择过程中能够更加灵活和高效。 首先,我们要理解什么是“可编辑下拉框”...

    数据库动态级联下拉框

    asp读取access数据库数据,在html页面动态生成多级级联的下拉框,摆脱静态级联下拉框数据变更烦恼。

    ajax+servlet两级动态级联下拉框

    在Web开发中,实现动态级联下拉框是一种常见的需求,尤其在数据筛选或表单填写时。本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX(异步JavaScript和XML)技术和Servlet进行交互,以实现在选择第...

    级联下拉框效果 jquery

    级联下拉框(Cascading Dropdown)是一种常见的前端交互设计,它允许用户在选择一个选项后,根据所选选项动态加载并显示下一个下拉框的内容。这种效果在多级分类、地区选择、产品配置等场景中十分常见。在本教程中,...

    超简单的级联下拉框例子

    总的来说,这个“超简单的级联下拉框例子”展示了如何在不使用数组的情况下,通过动态DOM操作和简洁的代码实现级联下拉框功能。这样的实现方式有利于代码的可读性和维护性,同时也提供了良好的用户体验。通过深入...

    excel 级联下拉框用法

    在本教程中,我们将深入探讨如何在Excel中创建级联下拉框,并通过提供的`excle动态级联.xls`示例文件来理解其实现方法。 1. **什么是级联下拉框** 级联下拉框是由两个或多个相互关联的下拉列表组成,当用户在第一...

    Android城市级联下拉框(自定义Spinner)

    在Android开发中,有时...总之,实现Android城市级联下拉框(自定义Spinner)需要对Spinner的基本使用、事件监听、数据更新以及界面定制有深入了解。通过不断实践和优化,我们可以创建出用户体验优秀的级联选择组件。

    layui-级联下拉框-可配置开启多选-HTML源码

    级联下拉框是一种常见的UI组件,它允许用户在一个下拉框的选择基础上动态加载并显示另一个相关的下拉框,这种联动效果在数据筛选、地区选择等场景中非常常见。 1. HTML基础: HTML(HyperText Markup Language)...

    省份-市-区及镇街道级联下拉框加载

    内部为四级的级联下拉框,分别为省份,市,县及区和镇及街道四级下拉框;(适用任何语言的纯HTML)详细截图可访问:https://blog.csdn.net/weixin_43972758/article/details/86510419 进行查询。

    仿美团网团购搜索级联下拉框DEMO

    本DEMO——“仿美团网团购搜索级联下拉框”专注于提供一个类似美团网的多级选择搜索功能,这在Android应用开发中是一项常见的需求。这个DEMO通过实现级联下拉框,为用户提供了更高效、更直观的筛选和查找服务。 1. ...

    jQuery实现级联下拉框实战(5)

    级联下拉框允许用户在一个下拉框中做出选择后,根据所选内容动态更新下一个下拉框的选项。这种功能提高了用户体验,使得数据筛选更加直观和便捷。 首先,我们需要创建HTML结构。在提供的代码清单1.1中,可以看到一...

    AJAX级联下拉框源码

    AJAX级联下拉框是一种常见的前端交互设计,它利用Ajax技术实现在用户选择一个下拉选项时,动态地更新另一个相关联的下拉框内容。这种功能在数据关联、筛选和表单填写中非常常见,例如省份和城市的选择,类别和子类别...

    用Struts+hibernate+SQLServer2000写的级联下拉框程序

    总结起来,这个项目展示了如何结合Struts的控制层、Hibernate的数据持久化层以及SQLServer2000的数据库服务,实现一个动态的、基于用户选择的级联下拉框功能。对于学习Java Web开发和实践MVC架构的人来说,这是一个...

    省市地区 局部刷新 级联下拉框

    在ASP.Net开发中,"省市地区 局部刷新 级联下拉框"是一个常见的需求,它涉及到前端用户界面的交互以及后端数据的动态加载。局部刷新技术可以提高用户体验,因为它仅更新页面的特定部分,而不是整个页面,这在处理...

    使用jquery写的级联下拉框

    使用jquery写的级联下拉框,使用jquery写的级联下拉框

    级联下拉框(支持火狐和IE)

    级联下拉框是一种常见的用户界面元素,常用于在网页或应用程序中提供多级选择功能。在.NET框架中,实现这种交互通常涉及到HTML、CSS、JavaScript(如jQuery)以及服务器端的技术,例如ASP.NET。本示例可能是一个...

    无限极级联下拉框的封装

    在网页开发中,级联下拉框(Cascading Dropdown)是一种常见的交互设计,它用于在两个或更多下拉框之间建立关联,当用户在一个下拉框中选择一个选项时,其他下拉框的选项会根据所选内容动态更新。在本案例中,我们将...

    ajax实现可配置无刷新级联下拉框

    级联下拉框允许用户在一个下拉框中选择一个选项后,根据所选的选项动态更新另一个下拉框的选项。Ajax 技术可以实现这种功能,而无需每次更改时都重新加载整个页面,从而提高应用性能。 Ajax(Asynchronous ...

    使用JQuery实现漂亮的三级级联下拉框

    三级级联下拉框则是指三个互相联动的下拉菜单,当用户在一个下拉框中选择一个选项时,其他关联的下拉框会根据所选选项动态更新其内容。在本教程中,我们将探讨如何使用JavaScript库JQuery来实现这样的功能。 首先,...

Global site tag (gtag.js) - Google Analytics