效果如上,系统中的下拉列表可以统一到一个表中。后然系统中再定义标签从改表中取值。这样下拉列表控制比较方便而且也很简洁! 这种实现方式比较简单就不做什么介绍,但是我觉得上图所示的添加方式比较好。所以介绍一下。 上图的选项列表可以根据你的数据长度进行自动加大。每保存一次增加三条。 以下介绍一下字典表的实现方式: 页面代码:
<body>
<br />
<br />
<s:form action="selectOptions" method="post" name="optionForm">
<table align="center" style="width:90%" class="window_box_table" border="0" cellpadding="0" cellspacing="0" >
<tr>
<th>选项组ID</th>
<th>选项组名称</th>
</tr>
<tr>
<td align="center"><input type="text" name="optionGroup.groupId" value="${optionGroup.groupId}"/></td>
<td align="center"><input type="text" name="optionGroup.groupName" value="${optionGroup.groupName}"/></td>
</tr>
</table>
<table align="center" style="width:90%" class="window_box_table" border="0" cellpadding="0" cellspacing="0" >
<tr class="window_bar">
<th colspan="18">选项列表</th>
</tr>
<tr class="window_th">
<td><!-- input type="checkbox" id="swithCheckbox" οnclick="selectAllSwithF()" --></td>
<td>选项ID</td>
<td>选项名称</td>
<td>顺序号</td>
</tr>
<yn:queryForList id="options" sql="from SelectOptions as s where s.groupId='${optionGroup.groupId }' order by displayOrder asc"/>
<c:forEach var="option" items="${options}" varStatus="status">
<tr>
<td>
<input type="checkbox" checked="checked" name="checkBox" οnclick="toggleDeleteId(this,${status.count-1}, ${option.id })"/>
<input type="hidden" name="deleteId" value=""/>
<input type="hidden" name="id" value="${option.id}"/>
</td>
<td>
<input type="text" name="selectOptions(${option.id }).optionValue" value="${option.optionValue}"/>
</td>
<td>
<input type="text" name="selectOptions(${option.id }).optionLabel" value="${option.optionLabel}"/>
</td>
<td>
<input type="text" name="selectOptions(${option.id }).displayOrder" value="${option.displayOrder}"/>
</td>
</tr>
</c:forEach>
<c:forEach begin="1" end="3" varStatus="status">
<tr>
<td>
<input type="checkbox" name="newSelectOptions[${status.count - 1 }].id" value="0"/>
</td>
<td>
<input type="text" name="newSelectOptions[${status.count - 1 }].optionValue"/>
</td>
<td>
<input type="text" name="newSelectOptions[${status.count - 1 }].optionLabel"/>
</td>
<td>
<input type="text" name="newSelectOptions[${status.count - 1 }].displayOrder"/>
</td>
</tr>
</c:forEach>
<tr>
<td colspan="10" align="center">
<input type="submit" name="method:saveOptionGroup" value="保存" class="button"/>
<input type="reset" value="重置" class="button"/>
<input type="button" value="选项列表" class="button" οnclick="window.location='selectOptions.do'"/>
<input type="submit" name="method:gotoGroupEditForm" value="新增" class="button" οnclick="document.optionForm.groupId.value=''"/>
<br />
根据需要填写各选项的值,对于需要的选项,选中其前面的复选框,否则勾除,然后点击保存。
</td>
</tr>
</table>
</s:form>
<script>
function toggleDeleteId(box,no,optionid){
if(box.checked)
document.getElementsByName("deleteId")[no].value = '';
else
document.getElementsByName("deleteId")[no].value = optionid;
}
</script>
</body>
后台处理方法: @CreateIfNull( value = true ) private List<SelectOptions> selectOptions; @Element( value = com.ynstudio.model.SelectOptions.class ) private List<SelectOptions> newSelectOptions; 上面两个属性是利用Struts的自动封装完成的。
public String saveOptionGroup() throws Exception {
HttpServletRequest request = getRequest();
optionGroupManager.save(optionGroup);
//修改
if(selectOptions != null){
for(SelectOptions option : selectOptions){
if(option.getDisplayOrder() == null){
option.setDisplayOrder(10);
}
selectOptionsManager.save(option);
}
}
//删除
String[] deleteIds = request.getParameterValues("deleteId");
if (deleteIds != null){
for (int i = 0; i < deleteIds.length; i++) {
String deleteIdStr = deleteIds[i];
if("".equals(deleteIdStr)){
continue;
}
SelectOptions option = selectOptionsManager.get(Integer.valueOf(deleteIdStr));
selectOptionsManager.delete(option);
}
}
//新增
if(newSelectOptions != null)
for(SelectOptions newOption : newSelectOptions){
if(newOption.getId() != null){
newOption.setId(0);
newOption.setGroupId(optionGroup.getGroupId());
if(newOption.getDisplayOrder() == null){
newOption.setDisplayOrder(10);
}
selectOptionsManager.save(newOption);
}
}
OptionUtil.clearCache();
return "groupEditForm";
}