js 批量删除功能

其实批量删除就是cehckbox 属性，首先解释 点击全选 CheckAll(this); 

function CheckAll(event){

    var checked = event.checked; //把选中这个属性赋值给一个变量

    $('#ptagTbody input[type:"checkbox"]').prop('checked', checked);  //把ptagTbody这个id下面的所有checkbox的input都选中

}

 

第二个批量删除函数 batchDelete();

function batchDelete() {
    var ptag_ids = new Array(); //定义一个数组存储id

     // 循环获取选中的checkbox
    $("#ptagTbody input[type='checkbox']:checked").each(function() {
        if (!isNaN($(this).val())) {
            ptag_ids.push($(this).val()); // 把值push进入数组里面
        }
    });
    if(ptag_ids.length ==0){
        alert('请选择至少一条记录删除');
        return false;
    }

     //调用删除函数
    deletePtag(ptag_ids);
}

 

function deletePtag(ptag_ids){
     if(confirm("您确定要删除单条或者多条标签记录吗？删除后无法恢复,请谨慎操作！")){
         $.ajax({
             type : "post",
             url : "{:U('batchDeletePtag')}",
             data : { "ptag_ids" : ptag_ids.toString() },  //数组.toString();转成字符串，号隔开的
             dataType : "json",
             success : function(data) {
                 console.info(data);
                 if(data["code"] > 0 ){
                     $("#chek_all").prop("checked", false);//成功后把全选按钮设置成不选中，其他下面刷新了，要不要都可以的
                     alert(data.msg);
                     location.reload();
                 }else{
                     alert(data.msg);
                 }
             }
         });
     }
}

 

 

html:

<table class="table table-bordered table-hover" id="ptagTbody">
<thead>
<tr>
<th width="50"><input onclick="CheckAll(this)" type="checkbox" id="chek_all" style="margin-top:-2px;"><span style="margin-left:5px;">全选</span></th>
<th>小标签</th>
<th>所属大标</th>
<th>录入时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<notempty name="list">
<foreach name="list" item="vo" key="k">
<tr>
<td><input type="checkbox" name="mid" value="{$vo.id}"></td>
<td class="ptag{$vo.id}">{$vo.mtag_name}</td>
<td>
<eq name="vo.ptag_name" value="11">
<span style="color:red"> 未录入大标!</span>
<else/>
{$vo.ptag_name}
</eq>
</td>
<td>
{:date('Y-m-d H:i:s', $vo['time'])}
</td>
<td>
<a href="javascript:;" onClick="deletem({$vo.id})" data-id="1" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
</td>
</tr>
</foreach>
<else/>
<tr><td colspan="11"><h2 style="height:80px;line-height:80px;color:red;text-align:center;font-size:28px;">无记录！ </h2></td></tr>
</notempty>
</tbody>
</table>

 

js:

<script type="text/javascript">

function batchDelete() {
var ptag_ids = new Array();
$("#ptagTbody input[type='checkbox']:checked").each(function() {
if (!isNaN($(this).val())) {
ptag_ids.push($(this).val());
}
});
if(ptag_ids.length ==0){
alert('请选择至少一条记录删除');
return false;
}
deletePtag(ptag_ids);
}

//全选
function CheckAll(event){
var checked = event.checked;
$("#ptagTbody input[type='checkbox']").prop("checked",checked);
}

//多个批量删除
function deletePtag(ptag_ids){
if(confirm("您确定要删除单条或者多条标签记录吗？删除后无法恢复,请谨慎操作！")){
$.ajax({
type : "post",
url : "{:U('batchDeletePtag')}",
data : { "ptag_ids" : ptag_ids.toString() },
dataType : "json",
success : function(data) {
console.info(data);
if(data["code"] > 0 ){
$("#chek_all").prop("checked", false);
alert(data.msg);
location.reload();
}else{
alert(data.msg);
}
}
});
}
}

//单个删除
function deletem(id) {
if(confirm("您确定要删除吗？删除后无法恢复,请谨慎操作！")){
$.ajax({
type : "post",
url : "{:U('deletem')}",
data : { "id" : id },
dataType : "json",
success : function(data) {
if(data["code"] > 0 ){
alert(data.msg);
location.reload();
}else{
alert(data.msg);
}
}

});
}
}
</script>