AJAX全选、反选、全不选、删除、批量删除、即点即改

这里是用的laravel框架

首先是前台模板：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script language="JavaScript" src="{{ URL::asset('/') }}Common/jquery123.js"></script>
</head>
<body>
测试页面
<table border="1">
    <tr>
        <td>选择</td>
        <td>ID</td>
        <td>内容</td>
        <td>删除</td>
        <td>修改</td>
    </tr>
    @foreach($res as $v)
        <tr cid="{{$v['id']}}">
            <td><input type="checkbox" name="smallBox" value="{{$v['id']}}"/></td>
            <td>{{$v['id']}}</td>
            <td><span class="con">{{$v['content']}}</span></td>
            <td><a href="javascript:void(0)" class='del'>删除</a></td>
            <td><a href="save?id={{$v['id']}}">修改</a></td>
        </tr>
    @endforeach
</table>
<input type="button" value="全选" id="selectAll"/>
<input type="button" value="反选" id="selectNo"/>
<input type="button" value="不选" id="selectNoAll"/>
<input type="button" value="批删" id="delAll"/>
</body>
</html>
<script>
    $(function(){
//        全选
        $("#selectAll").click(function () {
            $("input[name='smallBox']").attr('checked',true);
        });
//        反选
        $("#selectNo").click(function(){
            $("input[name='smallBox']").each(function(){
                $(this).attr("checked",!$(this).attr("checked"))
            })
        })
//        全不选
        $("#selectNoAll").click(function () {
            $("input[name='smallBox']").attr('checked',false);
        });
//      AJAX删除
        $(".del").click(function(){
            var _this = $(this);
            var id = _this.parents('tr').attr('cid');
//            alert(id);
            var url = "del";
            var data = {id:id};
            $.get(url,data,function(data){
                if(data==1){
                    _this.parents('tr').remove();
                }else{
                    alert("删除失败");
                }
            })
        })
//      AJAX批量删除
        $("#delAll").click(function(){
            var sid = [];
            $("input[name='smallBox']:checked").each(function () {
                sid.push($(this).val());
            });
//            alert(sid);return false;
            var url = "delAll";
            var data = {sid:sid};
            $.get(url,data,function(data){
//                window.print(data);return false;
                if(data==1){
                    $("input[name='smallBox']:checked").each(function () {
                        $(this).parents('tr').remove();
                    });
                }else{
                    alert("删除失败");
                }
            })
        })
//        即点即改
        $(document).on("click",".con",function(){
//          获取要修改的内容
            var con = $(this).html();
//          把要修改的内容的地方换成input框
            $(this).parent().html("<input name='content' value='"+con+"'/>");
//          事件委托
            $(document).on("blur","input[name='content']",function(){
                var _this = $(this);
//              获取新输入的值
                var content = $(this).val();
                var id = $(this).parents('tr').attr('cid');
                var url = "update";
                var data = {id:id,content:content}
                $.get(url,data,function(){
                        _this.parent().html('<span class="con">'+content+'</span>');
                })
            })
        })
    })
</script>

接下来是后台处理

<?php

namespace App\Http\Controllers;

use DB;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Http\Request;

class TestController extends Controller{
    public function show(){
        return view('home/form');
    }

    public function add(Request $qequest){
        $content = $qequest->input('content');
//        echo $content;die;
        $arr = DB::table('liuyan')->insert(['content'=>$content]);
        if($arr){
            return redirect('select');
        }
    }

    public function select(){
        $res = DB::table('liuyan')->get();
        return view('home/select',['res'=>$res]);
    }

    public function del(Request $qequest){
        $id = $qequest->input('id');
//        echo $id;
        $res = DB::table('liuyan')->delete(['id'=>$id]);
        if($res){
            echo 1;
        }else{
            echo 0;
        }
    }

    public function delAll(Request $qequest){
        $id = $qequest->input('sid');
        foreach($id as $v){
            $res = DB::table('liuyan')->delete(['id'=>$v]);
        }
        if($res){
            echo 1;
        }else{
            echo 0;
        }
    }

    public function update(Request $request){
        $id = $request->input('id');
        $content = $request->input('content');
        $res = DB::table('liuyan')->where('id',$id)->update(['content'=>$content]);
        if($res){
            echo 1;
        }else{
            echo 0;
        }
    }
}

AJAX全选、反选、全不选、删除、批量删除、即点即改

猜你喜欢