手工实现Dojo配合Struts的级联选项功能

级联选项功能，很多时候当我们的分类有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显示在页面上。思路就是这样，可能大家看不明白，但自己理清了思路要实现这样的功能也不是什么难事。