PHP jQuery+Ajax结合写批量删除功能

xiaoxiao2021-02-27  136

好东西要与大家分享    本人已经亲自试过   非常实用

这篇文章主要介绍了PHP jQuery+Ajax结合写批量删除功能的相关资料,需要的朋友可以参考下

为了美观,我还是引入了bootstrap的模态框,我引入的是自己的数据库 library中的一张表 名为:maninfo表 是一张个人信息表

 表的加载我就不写了,比较简单,  大概写一下需要的按钮和html部分就可以了

1 <button type="button" class="btn btn-primary"  id="plscdz" >批量删除</button>

全选:

1 <input type="checkbox" id="cq"/>

遍历出来的复选框为

1 <input type="checkbox" value="{$v[0]}" class="cq"/>

首先是全选按钮点击之后可以把遍历的复选框全部选中

1 2 3 4 5 <script type="text/javascript">  $("#cq").click(function(){ $(".cq").prop("checked",$(this).prop("checked")); }) </script>

 这里我只写了一个简单的模态框

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div class="modal fade" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">           <div class="modal-dialog">             <div class="modal-content">               <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">                   ×                 </button>                 <h4 class="modal-title" id="myModalLabel">                   提示                 </h4>               </div>               <div id="qrnr1" class="modal-body">                 您将删除选中的图书!               </div>               <div class="modal-footer">                 <button id="qxplsc" type="button" class="btn btn-default" data-dismiss="modal">取消删除</button>                 <button id="qrplsc" type="button" class="btn btn-primary">确认批量删除</button>               </div>             </div><!-- /.modal-content -->           </div><!-- /.modal -->         </div>       </div>

这样前端的内容就完成了,这样就开始写js部分了,我全部用的是jquery

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 var chk = "";   var check2 = "";   //判断多个复选框中的某一个是否被实现   function checked(){     var count = 0;     var checkx = $("#cq");     if(checkx.checked)     {       check2=1;//选中全选按钮     }     else     {       check2=0;//没选中全选按钮     }     var checkArry = $(".cq");     for (var i = 0; i < checkArry.length; i++)     {       if(checkArry[i].checked == true)       {         //选中的操作         count++;       }     }     if( count == 0 )     {       chk=0;//没有选中项     }     else     {       chk=1;//有选中项     }     //alert(chk);   }   function plscdzxx()   {     //批量删除     $("#plscdz").click(function(){       checked();       if(chk==1 || check2==1){// 提交         $('#myModal12').modal('show');         $("#nqrplsc").click(function(){/*给确认删除按钮加事件*/           $('#myModal12').modal('hide');           //找选中的主键值,用循环遍历选中的主键值           var cq =$(".cq");           var plstr ="";           for(var i=0;i<cq.length;i++)           {             if(cq.eq(i).prop("checked"))             {               plstr+=cq.eq(i).val()+"','";             }           }           plstr= plstr.substr(0,plstr.length-3); //分隔符占3个字符,截取字符串,去掉最后的"','",这样正好匹配SQL语句           $.ajax({             async:false,             url:"plscdz.php",             data:{plstr:plstr},             dataType:"TEXT",             type:"POST",             success:function(data){               if(data.trim()=="OK")               {                 alert("删除成功");                 nload();  //在这里要重新加载一遍页面               }               else               {                 alert("删除失败");               }             }           });         });       }       else if(chk==0)       {         // 不提交         //alert(chk);         alert("请选择您要删除的内容");       }     })   }

ajax会连接到批量删除的处理页面 ,下面就是批量删除的处理页面了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php session_start(); include("DBDA.class.php"); $db = new DBDA(); if(!empty($_POST["plstr"])) {   $plstr = $_POST["plstr"];   $sql = "delete from maninfo where id in ('{$plstr}')";   if($db->Query($sql,0))   {     echo "OK";   }   else   {     echo "NO";   } }

写到这儿 如果您要是自己尝试的话,可能不运行,这就需要把批量删除的方法给调一下,前面有加载的方法的话,那就直接把批量删除的方法写到加载方法里面调用就可以了

以上所述是小编给大家介绍的PHP jQuery+Ajax结合写批量删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

原文链接:http://www.cnblogs.com/xiaodouding/archive/2017/05/19/6868415.html

转载请注明原文地址: https://www.6miu.com/read-14217.html

最新回复(0)