下面是我写的tapestry组件的源代码,欢迎大家使用
它实现了类似根据所选省过滤其下级市,选市过滤县的功能,大家只要正确构造idynamicpropertyselection就可以实现N级的关联下拉框操作,欢迎大家使用
public abstract class DynamicPropertySelection extends AbstractFormComponent {
public abstract DynamicPropertySelection getParent();;
public abstract IDynamicPropertySelectionModel getModel();;
public abstract Object getValue();;
public abstract void setValue(Object value);;
public abstract boolean isDisabled();;
private String selfId = null;
private IScript script = null;
protected void finishLoad(); {
IEngine engine = getPage();.getEngine();;
IScriptSource source = engine.getScriptSource();;
IResourceLocation specLocation = getSpecification();.getLocation();
.getResourceLocation();;
String scriptPath = "DynamicPropertySelection.script";
IResourceLocation scriptLocation = specLocation
.getRelativeLocation(scriptPath);;
script = source.getScript(scriptLocation);;
}
protected void renderComponent(IMarkupWriter writer,
IRequestCycle requestCycle); {
IForm form = getForm(requestCycle);;
this.selfId = form.getElementId(this);;
if (form.isRewinding();); {
if (isDisabled();); {
return;
}
String optionValue = requestCycle.getRequestContext();.getParameter(
selfId);;
Object value = optionValue;
setValue(value);;
return;
}
writer.begin("select");;
writer.attribute("name", selfId);;
if (isDisabled();); {
writer.attribute("disabled", true);;
}
renderInformalParameters(writer, requestCycle);;
if (getParent(); == null); {
writer.println();;
String key = (String); getModel();.getKeys();.get(0);;
IPropertySelectionModel propertySelectionModel = getModel();
.getPropertySelectionModel(key);;
for (int i = 0; i < propertySelectionModel.getOptionCount();; i++); {
Object option = propertySelectionModel.getOption(i);;
writer.begin("option");;
writer.attribute("value", propertySelectionModel.getValue(i););;
if (propertySelectionModel.getValue(i);.equals(getValue(););); {
writer.attribute("selected", "selected");;
}
writer.print(propertySelectionModel.getLabel(i););;
writer.end();;
writer.println();;
}
}
writer.end();;
Body body = Body.get(requestCycle);;
Map symbols = new HashMap();;
symbols.put("dps", this);;
script.execute(requestCycle, body, symbols);;
}
public String getParentId(); {
return getParent(); == null ? null : getParent();.getId();;
}
public String getSelfId(); {
return this.selfId;
}
public String getSelfModelName(); {
return getSelfId(); + "_selectModels";
}
public String getLessChar(); {
return "<";
}
public String getScriptModel(); {
StringBuffer stringBuffer = new StringBuffer();;
String selectModelsName = getSelfModelName();;
stringBuffer.append("var ");.append(selectModelsName);.append(
" = new Array(");.append(getModel();.getPropertySelectionCount(););
.append(");;\n");;
Iterator iter = getModel();.getKeys();.iterator();;
int j = 0;
while (iter.hasNext();); {
String key = (String); iter.next();;
IPropertySelectionModel propertySelectionModel = getModel();
.getPropertySelectionModel(key);;
stringBuffer.append("var optionModels = new Array(");.append(
propertySelectionModel.getOptionCount(););.append(");;\n");;
for (int i = 0; i < propertySelectionModel.getOptionCount();; i++); {
stringBuffer.append("optionModels[");.append(i);.append(
"] = new OptionModel('");.append(
propertySelectionModel.getValue(i););.append("','");
.append(propertySelectionModel.getLabel(i););.append(
"');;\n");;
}
stringBuffer.append(selectModelsName);.append("[");.append(j++);
.append("] = new SelectModel('");.append(key);.append(
"',optionModels);;\n");;
}
return stringBuffer.toString();;
}
}
js文件
function OptionModel(value,text); {
this.value = value;
this.text = text;
}
function SelectModel(key,optionModels); {
this.key = key;
this.optionModels = optionModels;
}
function updateSelectOptions(selectObject,optionModels,selected); {
while(selectObject.length > 0); {
selectObject.remove(selectObject.length - 1);;
}
for(var i = 0 ;i < optionModels.length ; i ++); {
var oOption = document.createElement("OPTION");;
oOption.value = optionModels[i].value;
oOption.text = optionModels[i].text;
if(oOption.value == selected); {
oOption.selected = true;
}
selectObject.add(oOption);;
}
selectObject.fireEvent("onchange");;
}
script文件
<script>
<include-script resource-path="DynamicPropertySelection.js"/>
<input-symbol key="dps" class="DynamicPropertySelection" required="yes"/>
<set key="form" expression="dps.form.name"/>
<set key="parentId" expression="dps.parentId"/>
<set key="selfId" expression="dps.selfId"/>
<set key="selfValue" expression="dps.value"/>
<set key="selfModelName" expression="dps.selfModelName"/>
<set key="lessChar" expression="dps.lessChar"/>
<let key="parentSelect">
document.${form}.${parentId}
</let>
<let key="selfSelect">
document.${form}.${selfId}
</let>
<body>
${dps.scriptModel}
<if expression="parentId != null">
function cmd_${parentId}_onchange();{
${parentSelect}.onchange = cmd_update_${selfId};
cmd_update_${selfId}();;
}
function cmd_update_${selfId}();{
var parentValue = ${parentSelect}(${parentSelect}.selectedIndex);.value;
for(var i = 0 ; i ${lessChar} ${selfModelName}.length; i ++); {
var key = ${selfModelName}[i].key;
if(key == parentValue); {
updateSelectOptions(${selfSelect},${selfModelName}[i].optionModels, '${selfValue}');;
break;
}
}
}
</if>
</body>
<initialization>
<if expression="parentId != null">
cmd_${parentId}_onchange();;
</if>
</initialization>
</script>
public interface IDynamicPropertySelectionModel {
public List getKeys();;
public int getPropertySelectionCount();;
public IPropertySelectionModel getPropertySelectionModel(String key);;
}
分享到:
相关推荐
总的来说,自动完成下拉框是现代Web应用中的重要组件,对于提升用户输入效率和满意度有着显著作用。了解其工作原理,掌握不同编程语言和框架下的实现方式,对IT开发者来说是非常有价值的技能。如果你正在开发一个...
在前端开发中,有时我们需要实现一个具有多层级选择功能的下拉框,这在数据结构复杂、分类层次较多的情况下尤其常见。zTree.js 是一款强大的 jQuery 插件,专门用于构建这种多级树状结构,它能很好地解决这类问题。...
本案例中的"自定义下拉框组件(已封装)"是一个经过精心设计和优化的UI元素,它不仅包含了基本的下拉框功能,还融入了特定的样式,使其更加符合现代网页的审美需求。下面我们将深入探讨这个组件的设计原理、使用方法...
资源名称:使用Javascript实现下拉框的动态控制 内容简介: 使用Javascript实现下拉框的动态控制 一、前言 下拉框是常用的一种web页面控件。它很简单实用,便于 操作者从…组选项...
**Chosen 搜索下拉框组件详解** Chosen 是一个流行的JavaScript库,专门设计用于美化和增强HTML中的`<select>`元素。这个插件的主要目标是解决原生`<select>`标签在显示大量选项时的用户体验问题,以及提供搜索功能...
jQuery多层级加强版的select下拉框,完成了Select的功能,但是功能上比Select更高级,具备4级子项内容的选择,另外是外观样式上也与传统的Select下拉框有些区别,这款效果来自国外网站,跟随源码包中的效果演示即可...
【jQuery无限层级下拉框】是一种交互式的网页元素,它允许用户从一系列级联的下拉菜单中选择值,这些菜单可以无限扩展,通常用于表示层次结构的数据,例如地区、组织结构或产品分类。实现这一功能的核心是利用jQuery...
《基于Layui+Form组件实现省市区级联下拉框选择详解》 在Web开发中,用户界面的交互性和易用性至关重要。一个常见的需求是实现省市区级联选择,用户可以根据地理位置逐级选择所在区域。Layui,一个优秀的前端框架,...
"可输入的下拉框组件"是一个常见的UI元素,广泛应用于各种Web应用和桌面软件中。这样的组件结合了传统的下拉框与搜索输入框的功能,极大地提高了用户在大量数据选择时的便捷性。 首先,我们来理解一下“下拉框”的...
"layui组件之树形下拉框"是Layui框架中的一个重要组件,用于在下拉菜单中展示层级结构的数据,常用于选择组织结构、地区分类等具有树状关系的场景。 ### layui组件简介 Layui是一个轻量级的前端框架,它包含了基础...
微信小程序下拉框组件是微信小程序开发中常见的一种组件,用于实现下拉菜单的交互功能。它可以帮助用户从列表中选择特定的选项,并且可以在选择后对数据进行处理。本文将详细解析微信小程序下拉框组件的使用方法,并...
- **应用**:在多层级的数据结构或者分类明确的选项中,分组能提高用户体验,使查找目标更为便捷。 3. **下拉框联动** - **概念**:两个或多个下拉框之间的数据依赖,当用户在一个下拉框中做出选择时,另一个...
在IT行业中,"省市县级联下拉框...总的来说,"省市县级联下拉框"是Web开发中的一个实用功能,涉及前端交互、后端数据处理和用户体验设计等多个方面。正确实现并优化这一功能,可以显著提升用户的操作便捷性和满意度。
在这个“SSH2 三级联下拉框”的项目中,我们将探讨如何在SSH2框架中实现一个功能丰富的三级联动下拉列表框。 首先,Struts2作为前端控制器,负责处理HTTP请求并转发到相应的业务逻辑。它提供了一种灵活的Action机制...
1. **树形结构**:与传统的线性下拉框不同,该组件呈现为层次结构,使用户能够更直观地浏览和选择嵌套选项,特别适用于有层级关系的数据展示,如部门结构、地区分类等。 2. **单选与多选兼容**:组件不仅支持传统的...
在网页设计中,省市级联下拉框是一种常见的交互元素,用于用户选择所在省份和城市,常用于地址输入或者区域筛选等功能。这种级联效果通过JavaScript实现,能够提高用户体验,使得用户在选择时更为便捷。 实现省市级...
灵活:数据源、下拉框内显示的列、列名、可搜索关键字等可自由定义 方便:可输可选/支持键盘操作/模糊过滤/自动完成匹配 标准:通过继承combobox实现,可单独使用,也可嵌入datagridview使用 感谢“随风飘散”
1. **文本框(Textfield)**:Tapestry的Textfield组件用于接收用户的单行文本输入。通过属性绑定,它可以将用户的输入与模型对象的特定字段关联起来。例如,`<t:Textfield value="username" />` 将创建一个文本框,...
在需要用户选择多个选项的场景中,CheckBoxList非常实用。 3. **结合使用**:为了实现多选下拉框的效果,我们可以使用Dropdownlist展示主要选项,然后在用户展开下拉列表时显示一个嵌入的CheckBoxList。当用户选择...