//后台代码
@RequestMapping("switchDate")
@ResponseBody
public String switchDate(IotControlDeviceData iotControlDeviceData, HttpServletResponse response) {
List<IotControlDeviceData> iotControlDeviceDataList = iotControlDeviceDataService.findByGnAndPoolId(iotControlDeviceData);
AjaxJson j = new AjaxJson();
j.put("iotControlDeviceDataList", iotControlDeviceDataList);
return renderString(response, j);
}
//页面
<li class="off-on-button" id="feedingMachineStatus">
<c:forEach items="${iotControlDeviceDataList}" var="list">
<c:if test="${list.devno == 3}">
<!-- <li class="off-on-button" id="feedingMachineStatus"> -->
<%-- <p class="${flag0}" onclick='butt("${deviceDo.slaveId}","${flagT}","${deviceDo.deviceId}","${fishLogPoolSet.name}")'></p> --%>
<c:set var="flag0" value="off-on on" />
<c:if test="${list.state == false}">
<c:set var="flag0" value="off-on" />
</c:if>
<p class="${flag0}" onclick='butt("${list.id}","${list.iotStting.fishLogPoolSet.id}","${list.gatewaysn}","${list.devno}")'></p>
<p>${list.iotStting.name}</p>
<!-- </li> -->
</c:if>
</c:forEach>
</li>
</ol>
<a class="set-param" href="">设置<br />参数</a>
</div>
<div class="content-right-bottom">
<div id="oxygenatorStatus">
<c:forEach items="${iotControlDeviceDataList}" var="list">
<c:if test="${list.devno == 1 || list.devno == 2}">
<div class="feeding off-on-button" >
<c:set var="flag1" value="off-on on" />
<c:if test="${list.state == false}">
<c:set var="flag1" value="off-on" />
</c:if>
${list.iotStting.name}<span class="${flag1}" onclick='butt("${list.id}","${list.iotStting.fishLogPoolSet.id}","${list.gatewaysn}","${list.devno}")' ></span>
</div>
</c:if>
</c:forEach>
//js
<script type="text/javascript">
var indexbs ;
function butt(id,fishLogPoolSetId,gatewaysn,devno) {
$.ajax({
async : false,
url : "${ctx}/controlswitch/iotControlDeviceData/switch?id=" + id,
type : "POST",
dataType : "json",
beforeSend : function() {
// 显示loading提示
indexbs = top.layer.load();
},
success : function(data) {
layui.use('layer', function(){
var layer = layui.layer;
top.layer.alert(data.msg,{
offset:'rb',
btn: ['确定'],
yes: function(index, layero){
layer.close(index); //如果设定了yes回调，需进行手工关闭
setTimeout(function(){
$.ajax({
dataType:"json",
type:'POST',
url:"${ctx}/aquacultureManagement/switchDate",
data : {"iotStting.fishLogPoolSet.id":fishLogPoolSetId,"gatewaysn": gatewaysn},
success: function(data2){
var tbody = "";
if(devno == 3){
$.each(data2.body.iotControlDeviceDataList,function(n,list) {
var trs = "";
var flag0 = "off-on on";
if(list.devno == 3){
if(list.state == false){
flag0 = "off-on";
}
trs += '<p class="'+flag0+'" onclick="butt("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></p>'
+'<p>'+list.iotStting.name+'</p>';
tbody += trs;
}
});
$('#feedingMachineStatus').empty().append(tbody);
}else{
$.each(data2.body.iotControlDeviceDataList,function(n,list) {
var trs = "";
var flag1 = "off-on on";
if(list.devno == 1 || list.devno == 2){
if(list.state == false){
flag1 = "off-on";
}
trs += '<div class="feeding off-on-button" >'+list.iotStting.name
+'<span class="'+flag1+'" onclick="butt("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></span>'
+'</div>';
tbody += trs;
}
});
$('#oxygenatorStatus').empty().append(tbody);
}
}
});
}, 3000);
},
cancel: function(index, layero){
layer.close(index); //如果设定了yes回调，需进行手工关闭
setTimeout(function(){
$.ajax({
dataType:"json",
type:'POST',
url:"${ctx}/aquacultureManagement/switchDate",
data : {"iotStting.fishLogPoolSet.id":id,"gatewaysn": gatewaysn},
success: function(data2){
var tbody = "";
if(devno == 3){
$.each(data2.body.iotControlDeviceDataList,function(n,list) {
var trs = "";
var flag0 = "off-on on";
if(list.devno == 3){
if(list.state == false){
flag0 = "off-on";
}
trs += '<p class="'+flag0+'" onclick="butt("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></p>'
+'<p>'+list.iotStting.name+'</p>';
tbody += trs;
}
});
$('#feedingMachineStatus').empty().append(tbody);
}else{
$.each(data2.body.iotControlDeviceDataList,function(n,list) {
var trs = "";
var flag1 = "off-on on";
if(list.devno == 1 || list.devno == 2){
if(list.state == false){
flag1 = "off-on";
}
trs += '<div class="feeding off-on-button" >'+list.iotStting.name
+'<span class="'+flag1+'" onclick="butt("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></span>'
+'</div>';
tbody += trs;
}
});
$('#oxygenatorStatus').empty().append(tbody);
}
}
});
}, 3000);
}
})
});
},
complete : function() {
layer.close(indexbs);
}
});}
</script>从后台返回的data2是个json ,$.each(data2.body.iotControlDeviceDataList,function(n,list) {,each里面应该是你返回的集合,
var 一个变量trs,把要循环的代码赋给trs,又在外层var了一个tbody把trs赋值给tbody,因为如果不在外部在var一个tbody内部变量外部无法调用,然后通过.empty()清除原有代码,.append(tbody)把循环出来的代码给赋给他
上面用的是layui的弹窗,
"是转义符代表的是引号