业务场景:
导出按钮是否显示的条件如下:
1、必须选择开始时间和结束时间
2、根据筛选条件查询必须存在数据
3、当点击提交后并且满足如上两个条件,导出按钮变为可选后,如果用户修改了筛选条件则必须把 导出 按钮设为不可选
实现的方式有两种:
1、form表单提交 controller层响应一个页面
页面:
<script>
$(function () {
<%-- DOM加载完成后 获取download隐含域中的值 如果是1则显示导出按钮 1 是controller层通过逻辑判断后返回的 --%>
const value = $('#download').val();
if(value != "" && value == 1) {
$('#downloadBtn').attr('disabled',false);
}
});
<%-- 监听input标签中的change事件 当值发生改变时则把 导出 按钮设为不可选择 --%>
function changeVal() {
$('#downloadBtn').attr('disabled',true);
}
</script>
<%-- 这里设置隐含域 存放controller层存到request请求域中的值 --%>
<div>
<input type="hidden" name="type" value="${type}" />
<input type="hidden" name="beginDate" value="${beginDate}" />
<input type="hidden" name="endDate" value="${endDate}" />
<input id="download" onchange="showBtn()" type="hidden" name="download" value="${download}"/>
</div>
<%-- 这里有一个form为了发送请求 --%>
<form action="/findUserAll2" method="post">
<label>
用户类型:
<select id="type" onchange="changeVal()" name="type">
<option value="0">请选择</option>
<option value="1">普通用户</option>
<option value="2">尊享用户</option>
<option value="3">VIP</option>
<option value="4">VVIP</option>
</select>
</label>
<label>
<p>开始时间:<input onchange="changeVal()" type="text" id="beginDate" name="beginDate" /></p>
</label>
<label>
<p>
结束时间:<input onchange="changeVal()" type="text" id="endDate" name="endDate" />
<button id="downloadBtn" disabled="disabled">导出</button>
</p>
</label>
<button>提交</button>
</form>
controller层:
@RequestMapping("findUserAll2")
public String findUserAll2(HttpServletRequest request,@Param("type") String type,@Param("beginDate") String beginDate,@Param("endDate") String endDate){
log.info("type:"+type+";beginDate:"+beginDate+";endDate:"+endDate);
List<User> userAll = userService.findUserAll(type, beginDate, endDate);
//当开始时间和结束时间不为空且 根据查询条件获取的数据size大于0 时 把页面的download属性的值设为1 存入request作用域中
if (beginDate != null && beginDate.trim().length()>0 && endDate != null && endDate.trim().length()>0 && userAll.size()>0) {
request.setAttribute("download","1");
}
request.setAttribute("type",type);
request.setAttribute("beginDate",beginDate);
request.setAttribute("endDate",endDate);
request.setAttribute("userAll",userAll);
return "twoPage";
}
2、ajax请求 controller层仅响应数据
页面:
<script>
$(function () {
//当点击提交按钮时获取筛选条件中的值 并发送ajax请求
$('#submitBut').click(function () {
const type = $('#type').val();
const beginDate = $('#beginDate').val();
const endDate = $('#endDate').val();
$.ajax({
url:'findUserAll',
type:'post',
dateType:'json',
data:{
type:type,
beginDate:beginDate,
endDate:endDate
},
success: function (result) {
alert(result.length);
if(result.length>0 && endDate != "" && beginDate != ""){
// 当从后台获取的数据length大于0 并且 本次请求的开始时间和结束时间 不为空时 把隐含域中 download的值 设为1 并手动调用一下onChange事件(必须这么操作)
$('#download').val("1").change();
}else {
$('#download').val("0").change();
}
},
error: function (e) {
alert(e);
}
})
});
});
//调用的onchange事件 获取隐含域中的值 把导出 按钮 设为 可选或者不可选
function showBtn() {
const value = $('#download').val();
console.log(value);
if(value == 1){
//可选
$('#downloadBtn').attr('disabled',false);
}else {
$('#downloadBtn').attr('disabled',true);
}
}
//监听 input 筛选条件中 onchange事件 当值发生改变时 则把 导出 按钮设为不可选
function changeVal() {
$('#downloadBtn').attr('disabled',true);
}
</script>
<%-- 设置隐含域 --%>
<div>
//因为ajax请求后 设置了新值 并且调用了onchange事件 所以必须在隐含域中设置onchange属性滴调用自定义函数 showBtn()
<input id="download" onchange="showBtn()" type="hidden" name="download" value="0"/>
</div>
<%-- 筛选条件 --%>
<label>
用户类型:
<select id="type" onchange="changeVal()" name="type">
<option value="0">请选择</option>
<option value="1">普通用户</option>
<option value="2">尊享用户</option>
<option value="3">VIP</option>
<option value="4">VVIP</option>
</select>
</label>
<label>
<p>开始时间:<input onchange="changeVal()" type="text" id="beginDate"></p>
</label>
<label>
<p>
结束时间:<input onchange="changeVal()" type="text" id="endDate">
<button id="downloadBtn" disabled="disabled">导出</button>
</p>
</label>
<button id="submitBut">提交</button>
controller层:
@RequestMapping("findUserAll")
@ResponseBody
public List<User> findUserAll(HttpServletRequest request,@Param("type") String type,@Param("beginDate") String beginDate,@Param("endDate") String endDate){
log.info("type:"+type+";beginDate:"+beginDate+";endDate:"+endDate);
List<User> userAll = userService.findUserAll(type, beginDate, endDate);
return userAll;
}
如果这个两个方式 均实测正常
代码已上传到git 地址:https://github.com/ganguixu/springboot_jsp.git