//删除功能
$(function(){
var del;
$("#dell").click(function(){
$("input:checkbox:checked").each(function(index,element){
del = $("input:checkbox[name='chkItem']:checked").map(function(index,elem) {
return $(elem).val();
}).get().join(',');
})
alert(del);
$.ajax({
url:"http://localhost:8080/MESS/Q001_del_delete",
type:"post",
dataType:"json",
data:{"proNo":del},
success:function(rs){
if(rs.status == 0){
alert(rs.msg);
//为什么就是隐藏不了呢?
$('#TQQ').hide()-----这个就是问题所在就是隐藏不了。。。。。
TSM_QPM_Q001();
}else{
alert(rs.msg);
TSM_QPM_Q001();
}
},
error:function(){
alert("删除加载失败 ");
}
});
});
});
//出现本页面数据就同步显示在表格中
$(function(){
TSM_QPM_Q001();
});
//进行一个函数的调用
function TSM_QPM_Q001(){
$.ajax({
url:"http://localhost:8080/MESS/getData",
type:"get",
datatype:"json",
success:function(res){
var htmlStr ='';
for(var i=0;i < res.length;i++){
var plo = res[i].proNo;
//var wkStationNo = res[i].wkStationNo;
htmlStr += '<tr id="myLine_'+res[i].proNo+'">';
htmlStr += '<td><input type="checkbox" id="TQQ" name="chkItem" value ="'+plo+'"></td>';
htmlStr += '<td>'+res[i].proNo+'</td>';
htmlStr += '<td>'+res[i].wkStationNo+'</td>';
htmlStr += '<td>'+res[i].stGrdNo+'</td>';
htmlStr += '<td>'+res[i].cItemName+'</td>';
htmlStr += '<td>'+res[i].cItemValue+'</td>';
htmlStr += '<td>'+res[i].wkGroup+'</td>';
htmlStr += '<td>'+res[i].wkShift+'</td>';
htmlStr += '<td>'+res[i].delFlage+'</td>';
htmlStr += '<td>'+res[i].c_memd+'</td>';
htmlStr += '<td>'+res[i].c_delsapman+'</td>';
htmlStr += '<td>'+res[i].cDelsapdate+'</td>';
htmlStr += '<td>'+res[i].cTimestamp+'</td>';
htmlStr += '<td>'+res[i].cSampleTime+'</td>';
htmlStr += '<td>'+res[i].cSw01+'</td>';
htmlStr += '<td>'+res[i].cMin+'</td>';
htmlStr += '<td>'+res[i].cMax+'</td>';
htmlStr += '<td>'+res[i].l_interval+'</td>';
htmlStr += '<td>'+res[i].r_interval+'</td>';
//htmlStr += '<a href="javascript:del('+res[i].id+')">删除</a>';
htmlStr += '</tr>';
}
$("#myLine").html(htmlStr);
},
error:function(){
alert("出错了!");
}
});
}
效果图如下:
现在的问题是怎么将图片中的复选框选中然后点删除按钮这条数据就消失了?其实就是隐藏。。后台数据都写好了。。就差这里怎么将选中的数据进行隐藏??
ID要唯一,而且你上面既然知道通过用checkbox选择器,下面还用id选择器干嘛???
$('#TQQ').hide()
=====》
$("input:checkbox:checked").hide()
简单的做法就是,点击删除后,重新刷新下绑定数据方法。
方法1:后台将隐藏的数据去掉;方法二,tr标签设置id,id与checkbox框value对应(注意id是唯一的),点击删除时,通过checked属性获取checkbox的value值列表,再循环依次对对应id的tr进行隐藏。
方法2: htmlStr += '
两种方案
1.可以结合数据库,针对于这个列表所对应数据库的表,可以加个字段叫delFlag,查询列表的sql就查询delflag为0的数据,点击删除,其实就把该条记录的delflag改为1,改完之后返回给前台,判断是否删除成功,如果成功,异步刷新当前页面,即重新查询列表
2.如果就想用js实现,你这个前台框架用的是Bootstrap还是easyui,这个和普通的html删除选中行是不一样的,你这个是不是还是分页啊,分页的话是不是datatables,这个不好说勒,因为不知道你用的什么前台框架
页面上remove选中行,
很简单,首先你这个"my_Line_"+res[i].proNo 这里固定的部分为”my_Line_“,不一样的只是res[i].proNo
$("input:checkbox:checked").each(function(index,element){
var id =$(this).val();//得到了res[i].proNo的值
$("#my_Line_"+id).hide();//如果这个不行就用如下方法
$("#my_Line_"+id").css("display", "none");
})