`
raymond.chen
  • 浏览: 1436961 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

自定义标签:联动下拉框(一)

阅读更多

     该标签主要实现以下功能:当父下拉框的当前值发生变化时,会自动更新子下拉框的数据项。该标签也可以作为一般的下拉框来使用。以下列出详细的说明及其源代码:

 

一、标签属性说明

<cjm:chainSelect isTopSelect="true" name="org" entityName="Organization" keyField="orgId" 
	descField="name" childSelectName="uid" orderBy="orgId asc" allowEmpty="false"/>
		
<cjm:chainSelect name="uid" entityName="User" keyField="username" descField="fullname"
	params="org.orgId=#PARENT_KEY#"/>

         name:下拉框名称。
         isTopSelect:指定是否是顶层下拉框,即联动是否从该下拉框开始。可选值为true 或 false,默认值为false。
         entityName:指定下拉框数据的实体名称。
         keyField:指定与下拉框KEY值绑定的字段。
         descField:指定与下拉框DESC值绑定的字段。
         orderBy:指定下拉框数据的排序字段。如orgId asc等。
         params:指定下拉框数据过滤的参数键值对。格式:参数名1=参数值1&参数名2=参数值2&参数名3=参数值3等。被联动的下拉框引用父下拉框的当前值需要用"#PARENT_KEY#"来表示。
         childSelectName:指定被联动的下拉框的名称。没有被联动的下拉框时,不需要设置该属性。
         allowEmpty:指定下拉框是否允许空值。可选值为true 或 false。默认值为true。
         cdata:指定控件的其他属性。比如,class、style等。

 

二、标签源代码

public class ChainSelectTag extends BaseBodyTagSupport {
	private String name;
	private String isTopSelect;
	private String entityName;
	private String keyField;
	private String descField;
	private String orderBy;
	private String params;
	private String childSelectName;
	private String allowEmpty;
	private String cdata;
	
	......
	
	public int doEndTag() throws JspException {
		String currentValue = "";
		try{
			currentValue = CommonUtil.trim(getValueStack().findString(name));
			
			//去掉两端的 & 符号
			params = CommonUtil.trim(params);
			if(CommonUtil.isNotEmpty(params)){
				while(params.startsWith("&")){
					params = params.substring(1);
				}
				while(params.endsWith("&")){
					params = params.substring(0, params.length()-1);
				}
				params = TagUtil.translateVariables(params, getValueStack());
			}
			
			allowEmpty = CommonUtil.trim(allowEmpty);
			if(CommonUtil.isEmpty(allowEmpty)) allowEmpty = "true"; //默认为true
			
		}catch(Exception ex){
			throw new JspException(ex);
		}
		
		Map dataModel = new HashMap();
		dataModel.put("name", CommonUtil.trim(name));
		dataModel.put("currentValue", CommonUtil.trim(currentValue));
		dataModel.put("isTopSelect", CommonUtil.trim(isTopSelect));
		dataModel.put("entityName", CommonUtil.trim(entityName));
		dataModel.put("keyField", CommonUtil.trim(keyField));
		dataModel.put("descField", CommonUtil.trim(descField));
		dataModel.put("orderBy", orderBy);
		dataModel.put("params", CommonUtil.trim(params));
		dataModel.put("childSelectName", CommonUtil.trim(childSelectName));
		dataModel.put("allowEmpty", allowEmpty);
		dataModel.put("cdata", cdata);
		
		try{
			String ret = render(pageContext.getServletContext(), dataModel, "taglib/ChainSelect.ftl");
			pageContext.getOut().println(ret);
			
		}catch(Exception ex){
			throw new JspException(ex);
		}
		
		return EVAL_PAGE;
	}
}

 

三、标签模板源代码

<#assign paramStr = "">
<#if params?has_content>
	<#assign paramList = params?split("&")>
	<#list paramList as p>
		<#assign paramStr = paramStr + "_CHAIN_PARAM_" + p>
		<#if p_index lt (paramList?size-1)>
			<#assign paramStr = paramStr + "&">
		</#if>
	</#list>
</#if>
<select name="${name}" entityName="${entityName?if_exists}" keyField="${keyField?if_exists}" descField="${descField?if_exists}" orderBy="${orderBy?if_exists}" currentValue="${currentValue?if_exists}" params="${paramStr}" allowEmpty="${allowEmpty}" ${cdata?if_exists} <#if childSelectName?has_content> childSelectName="${childSelectName?if_exists}"</#if>></select>
<#if isTopSelect?if_exists == "true">
	<script language="javascript">
		addInitChainSelectEvent('chainSelect("${name}", "${paramStr}")');
	</script>
</#if>

 

1
0
分享到:
评论
1 楼 lipulvp 2011-11-22  
把完整的Java代码贴出来学习一下吧

相关推荐

    js 自定义的联动下拉框

    联动下拉框是指在选择一个下拉框的某个选项后,另一个下拉框会自动根据所选的值变更选项内容。在JavaScript中,通过编程可以实现更加灵活和美观的下拉框,而不仅仅是使用HTML的标准控件。 首先,传统的HTML下拉框在...

    js三级联动下拉框

    在Web开发中,三级联动下拉框是一种常见的用户交互方式,主要用于提供多级数据选择的功能,比如省份、城市、区县的选择等场景。该功能通过JavaScript实现,使得当前级下拉框的选择能够动态地改变下一级下拉框的内容...

    jQuery联动下拉框表单美化.zip

    "jQuery联动下拉框表单美化"就是一个专注于提升表单视觉效果和交互性的解决方案。这个项目是基于jQuery库以及一个名为Selector.js的插件来实现的,它能够帮助开发者轻松地创建动态、响应式的下拉菜单,从而增加表单...

    省市县三级联动下拉框

    标题 "省市县三级联动下拉框" 涉及到的是在Web开发中常见的一个功能需求,即在用户界面设计时实现省、市、县(区)三个层级的下拉菜单选择,通常用于地址填写或者区域筛选等场景。这种联动效果意味着当用户在一级...

    Jquery实现下拉框、多级联动

    在复杂的交互场景中,多级联动下拉框能够帮助用户更有效地导航和筛选信息。本教程将深入探讨如何使用jQuery来实现这样的功能,特别是在HTML结构、CSS样式以及JavaScript事件处理方面的应用。 首先,我们要理解HTML...

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

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

    jQuery解析xml文件,实现省市县三级联动下拉框

    首先,XML(Extensible Markup Language)是一种用于存储和传输结构化数据的标准格式,它允许开发者定义自定义的标签来组织数据。在本例中,XML文件可能包含如下结构: ```xml 省份1 城市11 县/区111 .....

    jsp实现连动下拉框

    %&gt;` 标签定义一个 MyDbBean 类的对象 bean。 - 创建两个下拉框,第一个下拉框加载表 A 的数据,第二个下拉框根据第一个下拉框的选择加载表 B 的数据。 - 使用 `onChange` 事件触发 JavaScript 代码,实现连动效果...

    Asp.net二级下拉框无刷新联动

    在Asp.net开发中,有时候我们需要实现一个功能,即二级下拉框的无刷新联动。这个功能常见于数据层级关系的展示,例如省份与城市、类别与子类别的选择等。用户在一级下拉框中选择一个选项时,二级下拉框会自动更新...

    省市联动三级下拉框.zip

    在前端开发中,省市联动下拉框通常通过JavaScript库或插件来实现,如jQuery、Vue.js、React.js等。这个“distpicker-master”很可能是一个基于jQuery的库,因为“distpicker”是jQuery Distpicker的简称,这是一个轻...

    C#中国地区三级联动下拉菜单

    标题 "C#中国地区三级联动下拉菜单" 描述了一个常见的网页开发问题,即在C# ASP.NET项目中实现中国地区的三级联动下拉菜单时遇到的编码问题。开发者通常会从网上找到JavaScript代码来实现这一功能,但在将.js文件...

    下拉框年月日3级联动

    在提供的文件中,有两个资源:"jQuery年月日三级联动(生日)[无法初始化值]"和"js年月日三级联动下拉框选择日期插件"。这表明实现这一功能可能依赖于jQuery,一个广泛使用的JavaScript库,它简化了DOM操作和事件处理...

    Ajax 四级导航菜单ASP+Access动态版

    Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...

    jquery 实现的下拉框模拟

    1. **HTML 结构**:创建基本的 HTML 元素,如一个隐藏的输入字段(用于存储用户选择)和一个可点击的按钮或标签,作为下拉框的触发器。 ```html 请选择 &lt;ul class="options" style="display:none;"&gt; &lt;!-- 下拉...

    jQuery模拟select下拉框三级城市联动代码.zip

    4. 更新下拉框:根据当前选中的省份和城市,筛选出对应的区县列表,然后使用jQuery的`.html()`方法动态更新下拉框的选项。 5. 动画效果:为了提高用户体验,你还可以添加一些过渡动画,比如淡入淡出或者滑动效果,...

    jQuery多级联动美化版Select下拉框插件.zip

    多级联动通常指的是两个或多个下拉框之间存在关联关系,当用户在一个下拉框中选择某个选项时,其他下拉框会根据预设的规则动态更新其选项。这种功能在数据层级结构复杂或者需要筛选特定范围的场景中非常实用,例如...

    javascript经典特效---下拉框的新特性.rar

    4. 多选下拉框:利用`&lt;select multiple&gt;`属性,可以创建一个允许多选的下拉框。通过JavaScript可以处理多选的逻辑,例如限制可选选项数量,或获取所有选中的选项值。 5. 模拟下拉框:JavaScript库如jQuery和Vue.js...

    jQuery制作简洁的多级联动Select下拉框

    2. 多级联动Select下拉框:多级联动是指一个表单中的多个下拉选择框根据用户的选择动态变化。通常,第一个下拉框(如省)的选择会影响第二个下拉框(如市)的选项,以此类推。这种功能可以极大地减少用户选择时的...

    jQuery下拉框二级三级城市联动插件.zip

    本资源"jQuery下拉框二级三级城市联动插件.zip"提供了一个实现多级联动下拉框功能的jQuery插件,适用于网页上的地区选择,如省份、城市、区县等。这种功能常见于电子商务网站、地图服务或者任何需要用户输入详细地址...

    为dwz扩展树形下拉框

    这可能是扩展实现中的一部分,比如一个JavaScript文件,包含了树形下拉框的具体实现逻辑,或者是包含此类组件的CSS样式文件。文件名暗示着它可能直接与DWZ中的树形下拉框组件相关。 总结来说,为DWZ扩展树形下拉框...

Global site tag (gtag.js) - Google Analytics