级联选项功能,很多时候当我们的分类有2层以上的时候,就需要引入级联选项了。下面我说说我自己手工实现的一个dojo+Struts的级联选项。
首先需要有页面部分:
<script type="text/javascript" src="../../../dojos/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");//导入包
var a;//变量,用于转换一下页面元素的值。
var b;//变量,用于转换一下页面元素的值。注:这2个变量好像必须要设置一个,不然当使用dojo.byId().value获取元素值得时候是无法直接给另一个元素赋值的。
function getSubcategoryMethod() {//获取子分类的函数
a = dojo.byId("selectedCgId").value;//获取选择的父分类ID
dojo.byId("cgvalue").value = a;//给显示的元素赋值,用于在页面上能看到结果
dojo.io.bind({//这个就是dojo的Ajax函数了
encoding : 'UTF-8',//编码方式
url : '../../../cascadeCategory.do',//请求地址
method : 'POST',//传递方法
handler : function(type,data,evt) {//代理函数
if (type == 'error') {//当服务器错误的时候输出资源文件中的信息
dojo.byId('subcategorySelect').innerHTML = '<bean:message key="exception.002"/>';
} else {
dojo.byId('subcategorySelect').innerHTML = data;//将输出后台数据
}
},
content : {
selectedCgId : dojo.byId("selectedCgId").value//传输的参数和值
}
});
};
function changeValueMethod(){//这个方法很重要,当后台的Action将数据传输到前台时,dojo可以完全获取,如果是HTML标签,也能输出效果。我就是利用了这个特性
b = dojo.byId("selectedScgId").value;//将子分类的选择ID保存到变量
dojo.byId("scgvalue").value = b;//将变量的值显示在页面元素上
}
</script>
注:上面的是脚本部分
<td>
<%
List<Categories> lc = (List<Categories>) request.getSession()
.getAttribute("lc");
%>
//这里只是一个循环显示父类的下拉列表,注意这个地方有个问题,就是Struts的迭代标签好像不支持集合类型有不同的情况,不如 List<categories>下面有Set<Subcategoies>这样的集合,好像无法循环迭代出来,只能通过用脚本 的方式循环。
<select id="selectedCgId" onchange="getSubcategoryMethod()">
<%
for (Categories c : lc) {
%>
<option value="<%=c.getId()%>" label="<%=c.getName()%>" />
<%
}
%>
</select>
<div id="subcategorySelect"></div>//这个用于显示自分类的下拉列表
</td>
<td>
<input type="text" id="cgvalue">//输出父分类的ID
</td>
<td>
<input type="text" id="scgvalue">//输出子分类的ID
</td>
下面是action部分了
public class CascadeCategoryAction extends BaseAction {
public ActionForward execute(ActionMapping mapping,ActionForm form,
HttpServletRequest request,HttpServletResponse response)
throws IOException,ServiceException {
Integer cgId = Integer.parseInt(request.getParameter(
"selectedCgId").toString().trim());//获取父分类的ID
Categories c = this.serviceManager.findCategoryById(cgId);//查询出子分类的集合
StringBuilder data = new StringBuilder();//通过stringbuilder对象组合字符串
data.append("<select id='selectedScgId' onchange='changeValueMethod();return false'>");核心的地方在这里,通过调用js函数实现获取用户的选择
for (Iterator i = c.getSubcategorieses().iterator();i.hasNext();){
Subcategories s = (Subcategories)i.next();
data.append("<option value='"+s.getId()+"' label='"+s.getName()+"' />");
}
data.append("</select>");
response.getWriter().write(data.toString());//最后将生成的下拉列表传给dojo接收
return null;
}
}
总结一下:大体思路就是,利用dojo的ajax功能将用户选择的父分类ID传输给Action,后台的Action获取到父分类ID后查询数据 库,获取子分类的集合,通过stringbuilder组合字符串,动态生成下拉列表,生成的字符串直接传给dojo接收,显示在页面上,当用选择子分类 的时候触发js函数,将用户选择的子ID显示在页面上。思路就是这样,可能大家看不明白,但自己理清了思路要实现这样的功能也不是什么难事。