快捷導(dǎo)航

PHP jQuery+Ajax結(jié)合寫(xiě)批量刪除功能

更新時(shí)間：2017年05月19日 10:17:46 作者：霸道小豆丁

這篇文章主要介紹了PHP jQuery+Ajax結(jié)合寫(xiě)批量刪除功能的相關(guān)資料,需要的朋友可以參考下

為了美觀，我還是引入了bootstrap的模態(tài)框，我引入的是自己的數(shù)據(jù)庫(kù) library中的一張表名為：maninfo表是一張個(gè)人信息表

表的加載我就不寫(xiě)了，比較簡(jiǎn)單，大概寫(xiě)一下需要的按鈕和html部分就可以了

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

全選：

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

遍歷出來(lái)的復(fù)選框?yàn)?/p>

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

首先是全選按鈕點(diǎn)擊之后可以把遍歷的復(fù)選框全部選中

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

這里我只寫(xiě)了一個(gè)簡(jiǎn)單的模態(tài)框

<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">
                  &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                  提示
                </h4>
              </div>
              <div id="qrnr1" class="modal-body">
                您將刪除選中的圖書(shū)！
              </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">確認(rèn)批量刪除</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal -->
        </div>
      </div>

這樣前端的內(nèi)容就完成了，這樣就開(kāi)始寫(xiě)js部分了，我全部用的是jquery

var chk = "";
  var check2 = "";
  //判斷多個(gè)復(fù)選框中的某一個(gè)是否被實(shí)現(xiàn)
  function checked(){
    var count = 0;
    var checkx = $("#cq");
    if(checkx.checked)
    {
      check2=1;//選中全選按鈕
    }
    else
    {
      check2=0;//沒(méi)選中全選按鈕
    }
    var checkArry = $(".cq");
    for (var i = 0; i < checkArry.length; i++)
    {
      if(checkArry[i].checked == true)
      {
        //選中的操作
        count++;
      }
    }
    if( count == 0 )
    {
      chk=0;//沒(méi)有選中項(xiàng)
    }
    else
    {
      chk=1;//有選中項(xiàng)
    }
    //alert(chk);
  }
  function plscdzxx()
  {
    //批量刪除
    $("#plscdz").click(function(){
      checked();
      if(chk==1 || check2==1){// 提交
        $('#myModal12').modal('show');
        $("#nqrplsc").click(function(){/*給確認(rèn)刪除按鈕加事件*/
          $('#myModal12').modal('hide');
          //找選中的主鍵值，用循環(huán)遍歷選中的主鍵值
          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個(gè)字符，截取字符串，去掉最后的"','"，這樣正好匹配SQL語(yǔ)句
          $.ajax({
            async:false,
            url:"plscdz.php",
            data:{plstr:plstr},
            dataType:"TEXT",
            type:"POST",
            success:function(data){
              if(data.trim()=="OK")
              {
                alert("刪除成功");
                nload();  //在這里要重新加載一遍頁(yè)面
              }
              else
              {
                alert("刪除失敗");
              }
            }
          });
        });
      }
      else if(chk==0)
      {
        // 不提交
        //alert(chk);
        alert("請(qǐng)選擇您要?jiǎng)h除的內(nèi)容");
      }
    })
  }

ajax會(huì)連接到批量刪除的處理頁(yè)面，下面就是批量刪除的處理頁(yè)面了

<?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";
  }
}

寫(xiě)到這兒如果您要是自己嘗試的話，可能不運(yùn)行，這就需要把批量刪除的方法給調(diào)一下，前面有加載的方法的話，那就直接把批量刪除的方法寫(xiě)到加載方法里面調(diào)用就可以了

以上所述是小編給大家介紹的PHP jQuery+Ajax結(jié)合寫(xiě)批量刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: