日前的项目用到ssh,其中就要用struts2下配合ajax来处理些逻辑,在网络找了好久,先写下记录记录。
做的业务是通过查数据,动态更新年份和月份的下拉单。本来是不用这样的,偏偏甲方那边说可能数据不是连续的(吐一口老血),
应该按照操作员录入的数据来显示!
主要有3个文件,js、struts2的xml配置文件、action类。
action类,分别获取了年份和月份数据。但是因为页面的原因,年份使用了map经过json格式化后的字符串,月份则使用了list形式
package com.teamu.sldyportal.marcket.web;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.LinkedHashMap;
import java.util.List;
import javax.annotation.Resource;
import net.sf.json.JSONObject;
import org.apache.commons.lang.StringUtils;
import com.teamu.core.util.CharacterConst;
import com.teamu.core.web.EasyUIGridAction;
import com.teamu.core.web.EasyUIGridSortAction;
import com.teamu.sldyportal.finance.entity.FinanceDataYear;
import com.teamu.sldyportal.marcket.business.IMarcketBusiness;
import com.teamu.sldyportal.marcket.entity.MarcketDataYear;
public class MarcketYearAction extends
EasyUIGridSortAction<MarcketDataYear, IMarcketBusiness> {
@Resource(name = "marcketBusiness")
private IMarcketBusiness bsMarcket;
private MarcketDataYear mdy = new MarcketDataYear();
private HashMap<String,String> yearMap = new HashMap<String,String>();
private HashMap<String,String> monthMap = new HashMap<String,String>();
private String jsonResult = "";
private List<String> yearList = new ArrayList<String>();
@Override
protected IMarcketBusiness getService() {
return bsMarcket;
}
/**
* 按年份查询营销数据的月份列表
* @return
*/
public String getMonths(){
monthMap = bsMarcket.getMonthsByYear(mdy.getYear());
//将map对象转换成json的字符串,返回默认的 SUCCESS
JSONObject json = JSONObject.fromObject(monthMap);
jsonResult = json.toString();
return SUCCESS;
}
/**
* 为gis数据获取年份
* @return
*/
public String getGisDataYear(){
yearMap = bsMarcket.getYearsYX();
Iterator<String> yearItr = yearMap.keySet().iterator();
while(yearItr.hasNext()){ //这里没有转换json,而是直接把list形式数据回传
yearList.add(yearItr.next());
}
return "getDateYear";
}
}
sturts2.xml
<package name="marcket" extends="json-default">
<result-types>
<result-type name="chart" class="org.apache.struts2.dispatcher.ChartResult"></result-type>
</result-types>
<action name="marcket_month_action_*"
class="com.teamu.sldyportal.marcket.web.MarcketMonthAction" method="{1}">
<result name="index">/page/marcket/indexm.jsp</result>
</action>
<action name="marcket_year_action_*"
class="com.teamu.sldyportal.marcket.web.MarcketYearAction" method="{1}">
<result name="index">/page/marcket/groupindex.jsp</result>
<result name="indexa">/page/marcket/groupTable.jsp</result>
<!-- 回传的年份,在action中如果使用了默认的 return SUCCESS; ,
这里可以添加root属性,属性值是要回传的数据。细节自己google -->
<result type="json">
<param name="noCache">false</param>
<param name="root">jsonResult</param>
</result>
<!-- 回传的月份,是list形式,在action中的方法的返回值是 return "getDateYear"; -->
<result type="json" name="getDateYear">
<param name="noCache">false</param>
<!-- includeProperties是一个过滤器,可以把规定的数据筛选出来,
支持正则表达式。意思是list数组中 yearList[i] 的数据。-->
<param name="includeProperties">
^yearList\[\d+\]
</param>
</result>
</action>
</package>
在js脚本中写好ajax方法和动态生成 html联动下拉单的方法
//根据选择的年份更新月份的显示
function changeSelectYear(year){
getMonthsThisYear("selectMonth",year,$("input[type='radio']:checked").val());
}
//动态获取年份数据
function showYear(dataType){
var url = "";
var str = "";
switch (dataType){
case "":
alert('请选择指标');
break;
case "1":
url = "marcket_year_action_getGisDataYear.do";
break;
case "2":
url = "marcket_year_action_getGisDataYear.do";
break;
case "3":
url = "funds_year_action_getGisDataYear.do";
break;
case "4":
url = "funds_year_action_getGisDataYear.do";
break;
case "5":
url = "finance_year_action_getGisDataYear.do";
break;
case "6":
url = "finance_year_action_getGisDataYear.do";
break;
default:
return;
}
//根据请求类型加载年份数据
$.ajax({
type : "POST",
url : url,
data: "",
dataType: "json",
success : function(data) {
//alert("years \n"+data.yearList.length);
//回传list形式的数据,不知道为什么不能直接写变量名,
//必须用 data.yearList。可能yearList也算是回传的json数据的一个属性
var years = data.yearList;
for(var i=0;i<years.length;i++){
if(years[i] != undefined){
str += "<option value='"+ years[i] +"'>"+ years[i] +"年</option>";
}
}
$("#selectYear").html(str);
}
});
}
//获取某年有数据的月份,并根据下拉列表的id设置
function getMonthsThisYear(id,year,dataType){
var str = "";
var url = "";
var data4url = "";
switch (dataType){
case "":
alert('请选择指标');
break;
case "1":
url = "marcket_year_action_getMonths.do"; data4url="mdy.year=" + year;
break;
case "2":
url = "marcket_year_action_getMonths.do"; data4url="mdy.year=" + year;
break;
case "3":
url = "funds_year_action_getMonths.do"; data4url="fdy.year=" + year;
break;
case "4":
url = "funds_year_action_getMonths.do"; data4url="fdy.year=" + year;
break;
case "5":
url = "finance_year_action_getMonths.do"; data4url="findy.year=" + year;
break;
case "6":
url = "finance_year_action_getMonths.do"; data4url="findy.year=" + year;
break;
default:
return;
}
$.ajax({
type : "POST",
url : url,
data: data4url,
dataType: "json",
success : function(json) {
//回传的json数据是java后台json化处理后的字符串,通过 eval()把它变成json格式,再通过循环处理
var months ;
// key:value 内容形如 {"1":"1","2":"2","3":"3","4":"4"...."12":"12"},
months = eval("("+json+")");
for(var i=1;i<13;i++){
if(months[i] != undefined){//使用 Object[index] 获取遍历的对象
str += "<option value='"+ months[i] +"'>"+ months[i] +"</option>";
}
}
var sltid = "#"+id;
$(sltid).html(str);
}
});
}
在Jsp页面就是写好<select></select>,并设置好id以及 onchange事件就可以了
<select name="selectType" id="selectType" οnchange="changeSelectType();" style="width:50px">
<option value="1" selected="selected">按年</option>
<option value="3">按月</option>
</select><select name="selectYear" id="selectYear" style="width:66px"
οnchange="changeSelectYear(this.options[this.selectedIndex].value);">
</select>
<select name="selectMonth" disabled="disabled" id="selectMonth" style="width:50px">
</select>