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

前端之家收集整理的这篇文章主要介绍了手工实现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显示页面上。思路就是这样,可能大家看不明白,但自己理清了思路要实现这样的功能也不是什么难事。

原文链接:https://www.f2er.com/dojo/291881.html

猜你在找的Dojo相关文章