laravel结合jQuery全选、全不选、批量删除

最新推荐文章于 2022-06-08 13:51:29 发布

沉默的熊猫仔

最新推荐文章于 2022-06-08 13:51:29 发布

阅读量255

点赞数 4

文章标签：腾讯云阿里云云计算

本文链接：https://blog.csdn.net/weixin_54804804/article/details/117353459

版权

1.前端jQuery ajax传值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table class="table">
    <tr>
        <th>选择</th>
        <th>序号</th>
        <th>姓名</th>
        <th>用户名</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>Vip</th>
        <th>操作</th>
    </tr>
    @foreach($data as $k=>$v)
        <tr>
            <td><input type="checkbox" name="check" value="{{$v->id}}"></td>
            <td>{{$v->id}}</td>
            <td>{{$v->name}}</td>
            <td>{{$v->user}}</td>
            <td>{{$v->email}}</td>
            <td>{{$v->tel}}</td>
            <td>{{$v->state==0?'普通会员':'Vip会员'}}</td>
            <td>
                <a href="del/{{$v->id}}">删除</a>
                <a href="up/{{$v->id}}">详情</a>
            </td>
        </tr>
    @endforeach
</table>
{{ $data->links() }}
<button type="button" class="btn btn-primary" id="getAll">全选</button>
<button type="button" class="btn btn-primary" id="notAll">全选取消</button>
<button type="button" class="btn btn-primary" id="delAll">批量删除</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#getAll").click(function () {//全选
        var ck=$("input[name='check']");
        for (i=0;i<ck.length;i++){
            ck[i].checked=true;
        }
    })

    $("#notAll").click(function () {//全不选
        var ck=$("input[name='check']");
        for (i=0;i<ck.length;i++){
            ck[i].checked=false;
        }
    })


    $("#delAll").click(function () {
        var ck=$("input[name='check']:checked");//获取被选择的文本框
        var arr=[];//定义一个空数组
        ck.each(function (res) {//遍历选择的文本框增加到新数组里面
            // console.log(res);
           arr.push($(this).val());
        })
    var id=arr.join(',');//转为join格式
    $.ajax({
        url:"http://www.user.com/ajaxdel",
        type:'post',
        data:{"id":id},
        dataType:"json",
        success:function (res) {
        if (res.code==200){
           $("input[name='check']:checked").parent().parent().remove();//无刷新删除
         }
         }
        })
    })
</script>

简洁全选全不选

$(".selectAll").click(function () {
    if (this.checked) {
        $(".row_check").prop('checked', true);
    } else {
        $(".row_check").prop('checked', false);
    }
})

2.model（模型）层方法

public static function ajaxDel($id)//model层批量删除
{
    return self::whereIn("id", $id)->delete();//whereIn选择多个
}

3.controller（控制器）方法

public function ajaxDel(Request $request)
{
    $id = $request->input('id');//获取ajax传过来的ID
    $obj = explode(',', $id);//explode把字符串转化成数组
    $res = UserModel::ajaxDel($obj);//调用model方法
    if ($res) {
        $arr['code'] = 200;
        $arr['info'] = 'ok';
        return json_encode($arr);
    } else {
        $arr['code'] = 500;
        $arr['info'] = 'NO';
        return json_encode($arr);
    }
}