近几天,公司疯狂加班,然后补做了很多功能,很多东西虽然是自己熟悉的,但是却不会上手,动手实践能力仍需加强,对此对一些代码记录,留待学习和总结。
简单描述功能
首先,根据城市下拉选择框选择城市,然后级联下拉线路,级联下拉城市所对应的所有线路。
前台post请求后台,将前台下拉的城市和线路下拉值传递给后台,后台通过前天传的城市和下拉进行接口查询,通过接口的方式查到所需的值。
具体实现
前台JSP、JS、后台action 源码
设置下拉select的id值,设置其id=city,name=’city’,因为要根据城市的下拉去做线路下拉的级联下拉,所以当城市改变的时候,线路也要随之更改为该城市所对应的线路,给select添加refreshLine()事件来触发。
<div class="count-hd">
<label>城市</label>
<select id="city" name="city" onchange="refreshLine()">
<option value="1">北京市</option>
<option value="2">天津市</option>
<option value="3">上海市</option>
<option value="4">澳大利亚市</option>
<option value="5">北欧市</option>
</select>
<button class="btn btn-info" onclick="retrieve()">查询</button>
</div>
refreshLine()事件JS源码:
function refreshLine() {
//根据城市的id值,获取其下拉的值,定义一个code来传值
//根据id,取得页面的值,需要在其id前加#
var code = $('#city option:selected').val();//Jquery获取选中的值
var lineDrop = $('#lineDrop');
var lineDrop1 = $('#lineDrop1');
var temp_html;
//post请求数据,$.post('url',{'参数1':XXX,'参数2':XXX},'成功加载后执行函数:function(result)')
$.post('/gj/gj/application/gjOnlineApplication.do?action=getLineListByCode',{'code':code},function(result){
//遍历获取到数据
var lineInfo = $.each(result.lineName,function(i, lineInfo){
temp_html+="<option value='"+lineInfo.uuid+"'>"+lineInfo.lineName+"</option>";
});
//将信息显示在页面之中
lineDrop.html(temp_html);
lineDrop1.html(temp_html)
})
}
gjOnlineApplication后台中获取城市所对应的所有下拉信息;
首先需要将前天传来的值接收到,添加code对象,添加其set和get方法。
//前台传递过来的城市下拉值
private String code;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
然后在获取城市对应的所有线路信息。
public String getLineListByCode() {
QueryParamList params = new QueryParamList();
params.addParam("cityCode",code);
List<GjBusLine> lists = gjBusLineService.retrieve(params, null, null, null, null);
List<Map<String,Object>> lineList = new ArrayList<Map<String, Object>>();
for(int i=0;i<lists.size();i++){
//定义一个map类型数据,先将数据put进map之中,然后将线路信息添加至list之中;
Map<String,Object> map = new HashMap<String, Object>();
//将线路的主键给下拉的label
map.put("uuid",lists.get(i).getUuid() );
//将线路的名称给下拉的value
map.put("lineName", lists.get(i).getLineName());
//将该条线路信息添加至list之中
lineList.add(map);
}
//将lineName值取到,然后返回给前台
result.put("lineName",lineList);
//返回json形式的数据
return "resultData";
}
该action类为数据接口,里面涉及到许多接口,其数据是以json形式返回,其形式:
@Namespace("/gj/application")
@ParentPackage("framework-default")
@Action(value = "/gjOnlineApplication", results = {@Result(name="input",location="gjonlineapplication.jsp"),
@Result(name="resultData",type = "json", params = {"root", "result" })})
//上面action当中,定义了后台的地址以及返回的结果。
public class GjOnlineApplicationAction extends GjCommonAction {
//根据前台的action地址进入action
@Override
public String execute() throws Exception {
if("getLineListByCode".equals(action)){
return this.getLineListByCode();
}
return super.execute();
}
}
线路名称的select添加id,因为要获取到下拉的值,通过id来获取其值。这里还有一个onchange()事件,是当选择下拉以后,调用后台接口,返回一个该线路的信息,比如该线路的长度等。
<div class="tab-pane item-list">
<div class="item-list-title">
<span class="tit"><i class="decorate"></i>公共汽电车运营线路长度</span>
<span class="line"></span>
</div>
<div class="item-list-body">
<div class="input-group">
<label>线路名称:</label>
<select id="lineDrop1" onchange="lineDrop1()">
</select>
</div>
<div class="input-group">
<label>线路长度(km):</label>
<input name="upMiler" onchange="yyxlcd()" type="text">
</div>
<div class="input-group">
<label>线路宽度(km):</label>
<input name="downMiler" onchange="yyxlcd()" type="text">
</div>
<div class="input-group">
<label>计算结果(长宽比例):</label>
<input name="yyxlcd" type="text" disabled>
</div>
</div>
<div class="item-list-bottom">
<p>这里是相关计算说明。</p>
</div>
</div>
根据线路名称,获取线路的信息,通过线路下拉的onchange()事件来触发:
function lineDrop1(){
//通过id获取线路下拉的值
var lineDrop1 = $('#lineDrop1 option:selected').val();
//通过name值来获取线路长度信息
//后面还可拼接,类似and方式,eg:$('input[name='xxx'][type=text][type=checkbox]'),无需加#
var upMiler1 = $('input[name=upMiler][type=text]');
//通过name值获取线路宽度信息
var downMiler1 = $('input[name=downMiler][type=text]');
//定义计算结果的text,计算比例
var upDownMiler1 = $('input[name=upDownMiler][type=text]');
$.post('/gj/gj/application/gjOnlineApplication.do?action=getBusLineUp',{'lineDrop1':lineDrop1},function(result){
//获取后台的值.val(result.BusLineUp)
upMiler1.val(result.BusLineUp);
downMiler1.val(result.BusLineDown);
upDownMiler1.val(Number(upMiler1.val())+Number(downMiler1.val()));
$('input[name=yyxlcd][type=text]').val((Number(upMiler1.val())+Number(downMiler1.val())+Number(upDownMiler1.val()))/2);
})
}
后台action,首先需要定义lineDrop1来接收线路下拉传递的值。
//线路下拉传递的值
private String lineDrop1;
public String getLineDrop1() {
return lineDrop1;
}
public void setLineDrop1(String lineDrop1) {
this.lineDrop1 = lineDrop1;
}
然后根据前台post请求的action方法,通过接口获取值。
//线路信息
public String getBusLineUp(){
GjBusLine gjBusLine = gjBusLineService.retrieve(lineDrop1);
BigDecimal a=GisCaclUtil.getBusLineUp(gjBusLine.getLineCode());
BigDecimal b=GisCaclUtil.getBusLineDown(gjBusLine.getLineCode());
//将线路长度添加至json格式的数据中
result.put("BusLineUp", a);
//将线路宽度添加至json格式的数据中
result.put("BusLineDown", b);
//返回json格式的数据
return "resultData";
}
这时候,通过前天的方法即可获取到值:
$.post('/gj/gj/application/gjOnlineApplication.do?action=getBusLineUp',{'lineDrop1':lineDrop1},function(result){
//获取线路长度的值
upMiler1.val(result.BusLineUp);
//获取线路宽度的值
downMiler1.val(result.BusLineDown);
//计算结果
$('input[name=yyxlcd][type=text]').val((Number(upMiler1.val())+Number(downMiler1.val())+Number(upDownMiler1.val()))/2);
})
//这里之前遇到一个问题,后台接口传值可能速度很慢,然后前台直接就会执行计算结果那个函数,这时候因为没有线路的长度和宽度,所以无法计算结果,会显示NaN;添加一个定时器即可解决问题。
window.setTimeout("xlwmd()",1000);
function yyxlcd (){
upMiler = upMilerDom.val();
downMiler = downMilerDom.val();
$('input[name=yyxlcd][type=text]').val((Number(upMiler)+Number(downMiler)+Number(upDownMiler))/2);
}
功能测试
想要查看action执行的结果,如何操作呢?
首先登录该程序或项目,然后在浏览器地址栏输入该action地址:
//无传递参数
http://localhost:8080/gj/gj/simulation/gjOnlineApplication.do?action=getLineListByCode
//传递参数
http://localhost:8080/gj/gj/simulation/gjOnlineApplication.do?action=getLineListByCode&code=2&linecode=1
至此,该部分所有功能均已实现。
要做一个爱学习,并勤于记录的程序员,有时候,发现很多东西,是没有接触过,所以不会,也有很多东西不会,是因为做的太少所以不会,所以,经常去浏览各大博客,亦或对已经写过的代码做一记录,慢慢会积累起来的。
不积跬步无以至千里,不积小流无以成江河!!!!!!!