Jquery+Struts的<selected>二级联动
2016-07-26 15:34
477 查看
1.问题分析
多级select联动是网页选取多级项目必要的应用方法,一般情况下都是由一级select的选择项动态异步的修改二级select的option内容。为了方便添加内容与后台数据一致性,一般很少采用如博客点击打开链接中所展示的静态标签联动形式。
2.解决策略
整个联动流程如图所示:
1.监听一级select的change事件,并获得用于修改二级select的关键属性
2.在change事件中通过ajax向struts后台发送数据请求,并返回Json形式的数据
3.在ajax的success回调中向二级select添加需要的内容
3.代码说明
web端实现代码(负责一级select的change事件监听与二级select的数据请求、option添加)
后台action方法(负责数据请求和Json化回传)
多级select联动是网页选取多级项目必要的应用方法,一般情况下都是由一级select的选择项动态异步的修改二级select的option内容。为了方便添加内容与后台数据一致性,一般很少采用如博客点击打开链接中所展示的静态标签联动形式。
2.解决策略
整个联动流程如图所示:
1.监听一级select的change事件,并获得用于修改二级select的关键属性
2.在change事件中通过ajax向struts后台发送数据请求,并返回Json形式的数据
3.在ajax的success回调中向二级select添加需要的内容
3.代码说明
web端实现代码(负责一级select的change事件监听与二级select的数据请求、option添加)
$("#Devicetype").change(function(){ var customUrl = "TruevalueInspectionQuery!execute"+$("#Devicetype").val()+"Inspection.action"; $.ajax({ url : customUrl,此处的通过ActionName!methodName.action的url形式调用自定义action执行方法,减少后台执行数据查询的action个数 type : "post", dataType : "text", success : function(data) { obj= $.parseJSON(data)//若返回的是json类型数据而不执行此句,会报"Type error invalid 'in' opreand a"的错误 $("#Inspection option").remove();//<span style="font-family: Arial, Helvetica, sans-serif;">Inspection </span><span style="font-family: Arial, Helvetica, sans-serif;">为要绑定的select,先清除数据 </span> $.each(obj, function (i,item) //Jquery中第一个参数i为索引,第二个参数才是从obj中解析的item,因此第一个参数在回调时不可省略不写 { $("#Inspection").append("<option value=" + item.tag + ">" + item.name + "</option>");//tag与name为回传jsonobject的属性值 }); }, error : function() {alert("网络异常请稍后再试...")} });//end ajax });//end change
后台action方法(负责数据请求和Json化回传)
/** * 用于返回检定项目的检定项的action * <p>该action无默认excute方法,在使用时需要指定具体执行的自定义方法 * @author cyoubo */ public class Ac_TruevalueInspectionQuery extends ActionSupport { private static final long serialVersionUID = 7545375058031908844L; //定义要返回的Json结果,json话过程交由Strut框架自行完成 List<InspectionItem> resultJson; //getter与setter public List<InspectionItem> getResultJson() { return resultJson; } public void setResultJson(List<InspectionItem> resultJson) { this.resultJson = resultJson; } //延迟构造,避免数据冲突 public void prepareresultJson() { if(resultJson==null) resultJson=new ArrayList<InspectionItem>(); resultJson.clear(); } public String executeHDMIInspection() { prepareresultJson(); resultJson.add(new InspectionItem("Consitency", "一致性", "")); return SUCCESS; } public String executeEDMIInspection() { prepareresultJson(); resultJson.add(new InspectionItem("Consisten", "一致性", "")); resultJson.add(new InspectionItem("Spotposition", "光相位", "")); return SUCCESS; } }注意在strut.xml配置文件中,将该action配置为返回json的action
<package name="JsonPackage" extends="json-default"> <action name="Truevaluescan" class="com.dr.truevalue.action.Ac_<span style="font-family: Arial, Helvetica, sans-serif;">Ac_TruevalueInspectionQuery</span><span style="font-family: Arial, Helvetica, sans-serif;">"></span> <span style="white-space:pre"> </span><result type="json"> <!-- 这里指定将被Struts2序列化的属性,该属性在action中必须有对应的getter方法 --> <param name="root">resultJson</param> </result> </action></package>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作