查看: 558|回复: 0

[PHP学习] PHP jQuery+Ajax结合写批量删除功能

发表于 2018-3-31 08:00:03

为了美观,我还是引入了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. <script type="text/javascript">
  2. $("#cq").click(function(){
  3. $(".cq").prop("checked",$(this).prop("checked"));
  4. })
  5. </script>
复制代码

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

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

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

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

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

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

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

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



回复

使用道具 举报