在复选框中更改管理面板上的角色

Question

在显示的控制器中，它显示所有用户及其属性（？），例如姓名、姓氏、电话和角色。当我在复选框中选择角色并按“potvrdi”（提交）时，如何使它提交到数据库？我必须使用jquery，ajax吗？ 谢谢

控制器

public function action(Request $request)
    {
        if ($request->ajax()) {
            $query = $request->get('query');
            if ($query != '') {
                $data = User::where('surname', 'like', '%'.$query.'%')
                    ->orWhere('name', 'like', '%'.$query.'%')
                    ->orWhere('phone', 'like', '%'.$query.'%')
                    ->orderBy('id')
                    ->get();
            } else {
                $data = User::orderBy('id')
                    ->get();
            }
            return json_encode($this->generateUserTable($data));
        }
    }

    public function generateUserTable($data)
    {
        $total_row = $data->count();
        $output = "";
        if ($total_row > 0) {
            foreach ($data as $row) {
                $roleNames = '';
                $userRoles = $row->roles()->pluck('id')->toArray();
                // var_dump($userRoles);
                $checked = '';
                foreach (Role::all() as $roles1) {
                    if (in_array($roles1->id, $userRoles)) {
                        $checked = 'checked="checked"';
                    }
                    $roleNames .= $roles1->role != null ? $roles1->role.' '.'<input type="checkbox" '.$checked.' name="role" value="'.$roles1->id.'" class="checkbox" id="checkboxId">'.' ' : '';
                }
                $output .= '
                    <tr>
                        <td>'.$row->surname.'</td>
                        <td>'.$row->name.'</td>
                        <td>'.$row->phone.'</td>
                        <td>'.$roleNames.'</td>
                        <td><button type="button" id="potvrdi" class="potvrdi-button btn btn-primary" data-id="'.$row->id.'">
                        <div class="potvrdi">Potvrdi</div>
                        </button></td>
                        <td><button type="button" id="rowId" class="remove-button btn btn-danger" data-id="'.$row->id.'">
                        <div class="close">&#120;</div>
                        </button></td>
                    </tr>
                ';
            }
        } else {
            $output = '
                <tr>
                    <td align="center" colspan="5">Nema podataka</td>
                </tr>
            ';
        }
        return array(
            'table_data'  => $output,
            'total_data'  => $total_row,
        );
    }

编辑：

部分html在generateUserTable中$output之后的控制器中

用js查看

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">
                <h2>{{ $modal }}</h2>
            </div>
            <div class="modal-footer">
                <button type="button" class="rem-mod btn btn-secondary" data-dismiss="modal">Zatvori</button>
                <button type="button" class="bck-mod test btn btn-danger" data-dismiss="modal">Obriši korisnika</button>
            </div>
        </div>
    </div>
</div>
<!-- users and search bar -->
<div class="container">
    <div class="panel panel-default">
    <div class="panel-heading">Pretraži korisnike</div>
        <div class="panel-body">
            <div class="form-group">
                <input type="text" name="search" id="search" class="form-control" placeholder="Pretraži korisnike" />
            </div>
            <div class="table-responsive">
                <h3 align="center">Broj korisnika: <span id="total_records"></span></h3>
                <table id="users" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Prezime</th>
                            <th>Ime</th>
                            <th>Telefon</th>
                            <th>Rola</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                <tbody>

                </tbody>
                </table>
            </div>
        </div>    
    </div>
</div>

从数据库中获取数据

<script>   
    $(document).ready(function(){
        fetch_user_data();
        function fetch_user_data(query = ''){
            $.ajax({
                url:"{{ route('live_search.action') }}",
                method:'GET',
                data:{query:query},
                dataType:'json',
                success:function(data)
                {
                    $('tbody').html(data.table_data);
                    $('#total_records').text(data.total_data);
                }
            })
        }

        $(document).on('click', '.potvrdi-button', function(){
            post_user_role();
            var id = $(this).data('id');
            function post_user_role(id){
                $.ajax({
                    url:"{{ route('live_search.action') }}",
                    method:"GET",
                    data:{id:id},
                    dataType:'json',
                    success:function(data)
                    {
                        $('tbody').html(data.table_data);
                        $('#total_records').text(data.total_data);
                    }
                })
            }
        })

        $(document).on('keyup', '#search', function(){
            var query = $(this).val();
            fetch_user_data(query);
        });

模态js

        $('#users').on('click', '.remove-button', function(){
            var id = $(this).data('id');
            $(".test").attr('data-id', id);
            $("#deleteModal").modal("show");
        });

        $(document).on('click', '.bck-mod', function(){
            var id = $(this).data('id');
            $.ajax({
                //url:"{{ route('live_search.destroy') }}",
                url:"/live_search/destroy",
                method:"get",
                data:{id:id},
                dataType:'json',
                success:function(data)
                {
                    $('tbody').html(data.table_data);
                    $('#total_records').text(data.total_data);
                },
                error: function(data)
                {
                    console.log(data);
                }
            })
        });
    });
</script>

Answer 1

我为您准备了样品fiddle。我为您的用户表使用了虚拟值，也使用了选择而不是复选框，但您应该遵循相同的方法。

$(document).on('click', '.potvrdi-button', function(e) {
    var value = $(this).closest('tr').find('select[name="role"]').val();
    $.ajax({
      url: "{{ route('live_search.action') }}",
      method: "GET",
      data: {
        value: value
      },
      dataType: 'json',
      success: function(data) {
        $('tbody').html(data.table_data);
        $('#total_records').text(data.total_data);
      }
    })

  })

Answer 2

检查您的方法。现在它是一个GET。您可能希望它成为 POST。检查你的 laravel 路由器以确保它响应 POST 方法。