jsp代码块
<table class="layui-table" id="iTable">
<thead>
<tr>
<th>全选 <input type="checkbox" name="checkall" /></th>
<th>运营商</th>
</tr>
</thead>
<tbody>
<!-- 开始循环 -->
<c:choose>
<c:when test="${not empty varList}">
<c:forEach items="${varList}" var="var" varStatus="vs">
<tr>
<td><input type="checkbox" name="ckb" value="${var.Dev_ID}"></td>
<td>${var.ISP_Name}</td>
<td>
<button class="my-btn my-btn-primary my-edit"
onclick="update('${var.Mac_Addr}' ,'${var.Dev_ID}' ,this)">
<i class="layui-icon-download-circle" ></i> 升级
</button>
</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
</c:otherwise>
</c:choose>
</tbody>
</table>
1、全选勾中，或者全部取消
//全选
$(document).ready(function () {
$('input[name="checkall"]').on("click",function(){
if($(this).is(':checked')){
$('input[name="ckb"]').each(function(){
$(this).prop("checked",true);
});
}else{//取消
$('input[name="ckb"]').each(function(){
$(this).prop("checked",false);
});
}
});
});
2、获取选中的列表ID
var checkids = [];
var data = [];
$("input[name='ckb']:checked").each(function(i){//选中的设备列表
checkids[i] = $(this).val();
});
3、解析后台model绑定传回来的json数据
3.1 后台代码块
ModelAndView mv = this.getModelAndView();
List<Map<String, Object>> varList = null;
调用数据库获取数据
JSONArray jsonArray = JSONArray.parseArray(JSON.toJSONString(varList));//转换json
mv.setViewName("xxxxx/xxxx_list");
mv.addObject("jsonArray", jsonArray);
return mv;
3.2 前端解析后台数据
//用eval 将java对象转换为javascript对象
var devArray = eval('${jsonArray}'); //后台传回来的数据，
for(var i in checkids){
for(var j in devArray){
var dev = devArray[j];
if(checkids[i]==dev.Dev_ID){//根据选中的ID筛选出数据
//ajax异步循环下发
//。。。。
//。。。。
break;
}
}
}
4、批量下发成功后设置按钮为不可用
$("#iTable").find(":checkbox:checked").each(function(){
var reldevid = result.pmd.devid;//ajax成功返回的ID
var id = $(this).val();
if(reldevid==id){
$(this).parents('tr').children(":last").children(":last").attr("disabled", true); $(this).parents('tr').children(":last").children(":last").removeClass('my-btn my-btn-primary my-edit');
$(this).parents('tr').children(":last").children(":last").addClass(' my-btn my-btn-disabled my-edit');
}
});
5、单点下发按钮设置不可用
function update(devmac,devid,obj) {
$(obj).attr("disabled", true);
$(obj).removeClass('my-btn my-btn-primary my-edit');
$(obj).addClass(' my-btn my-btn-disabled my-edit');
}
