Laravel根据数据表中的值在模式弹出窗口中显示复选框状态

问题描述

我在Laravel中有数据表，并且有一些结果，每条记录都有“编辑”按钮。这是桌子的图片。

“编辑”按钮将打开模式对话框，我可以在其中更改特定的记录数据。

这是我的HTML模式代码：

<div class="modal fade" id="ajaxModel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelheading"></h4>
            </div>
            <div class="modal-body">
                <form id="CurrenciesForm" name="CurrenciesForm" class="form-horizontal">
                    <input type="hidden" name="currency_id" id="currency_id">
                    <div class="form-group">
                        <label class="col-sm-12 control-label">Name of currency</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter name of currency" value="" required="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-12 control-label">Currency code</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="code" name="code" placeholder="Enter currency code" value="" required="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-6 control-label inline">Is this base currency?</label>
                        <input type="checkBox" class="form-control inline" id="base" name="base" value="true" unchecked>
                    </div>

                    <div class="col-sm-offset-2 col-sm-10">
                     <button type="submit" class="btn btn-primary btn-sm" id="saveBtn" value="create">Save
                     </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

这是JS代码：

$(function () {

      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('Meta[name="csrf-token"]').attr('content')
          }
    });

    var table = $('.data-table').DataTable({
        processing: true,serverSide: true,ajax: "",columns: [
            {data: 'name',name: 'name'},{data: 'code',name: 'code'},{data: 'is_base_currency',name: 'is_base_currency'},{data: 'action',name: 'action',orderable: false,searchable: false},],columnDefs: [
            {
                targets: [-1,-2,-3],className: 'dt-body-center'
            }
        ]
    });

    $('#createNewCurrency').click(function () {
        $('#saveBtn').val("create-Customer");
        $('#currency_id').val('');
        $('#CurrenciesForm').trigger("reset");
        $('#modelheading').html("Create New Customer");
        $('#ajaxModel').modal('show');
    });

    $('body').on('click','.editCurrency',function () {
      var currency_id = $(this).data('id');
      console.log(document.getElementById('base').value);
      $.get("currencies" +'/' + currency_id +'/edit',function (data) {
          $('#modelheading').html("Edit Customer");
          $('#saveBtn').val("edit-user");
          $('#ajaxModel').modal('show');
          $('#currency_id').val(data.id);
          $('#name').val(data.name);
          $('#code').val(data.code);
          $('#base').prop('checked',data.base);
          
      })
   });

    $('#saveBtn').click(function (e) {
        e.preventDefault();
        $(this).html('Save');
        
        $.ajax({
          data: $('#CurrenciesForm').serialize(),url: "",type: "POST",dataType: 'json',success: function (data) {

              $('#CurrenciesForm').trigger("reset");
              $('#ajaxModel').modal('hide');
              table.draw();

          },error: function (data) {
              console.log('Error:',data);
              $('#saveBtn').html('Save');
          }
      });
    });

    $('body').on('click','.deleteCurrency',function () {

        var currency_id = $(this).data("id");
        
        var txt;
        var r = confirm("Are you sure you want to delete?");
        if (r == true) {
            $.ajax({
            type: "DELETE",url: "currencies"+'/'+currency_id,success: function (data) {
                table.draw();
            },error: function (data) {
                console.log('Error:',data);
            }
        });
        } else {
            event.preventDefault();
        }

        
    });

  });
</script>

这些也是控制器功能：

public function index(Request $request)
    {

        if ($request->ajax()) {
            $data = Currency::latest()->get();
            return Datatables::of($data)
                    ->addColumn('action',function($row){
                           $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editCurrency">Edit</a>';
                           $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteCurrency" onclick="return confirm("Are you sure?")">Delete</a>';
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }

        return view('administration.currencies');
    }

public function store(Request $request)
    {
        if($request->base != 'true' || $request->base != 'on'){
            $base = '';
        } 
        Currency::updateOrCreate(['id' => $request->currency_id],['name' => $request->name,'code' => $request->code,'is_base_currency' => $request->base]);        

                return response()->json(['success'=>'Currency saved successfully!']);
    }

public function edit($id)
    {
        $Currency = Currency::find($id);
        return response()->json($Currency);
    }

我对复选框字段有疑问。每当我打开模式对话框进行编辑时，字段的名称和代码都会传递给模式对话框，而字段“基础”却不会。我想将其传递给模式复选框（如果值是“ true”，我希望选中该复选框）。保存工作正常，我可以更改任何数据和复选框，保存也可以（如果选中复选框，它将在数据库中保存“ true”），但是我无法在模式弹出窗口中显示当前值。

我还希望能够在“基础”列中的值“是”中的表中显示数据库中的值为“ true”的地方，但是由于通过数据表填充了该表，因此我不确定如何执行此操作。

解决方法

要选中此复选框，请使用以下代码

$('#base').prop('checked',(data.base == 'true' ? true : false));

要修改表列的值，可以使用Yajra数据表的editColumn方法，如下所示

 $data = Currency::latest()->get();
 return Datatables::of($data)
         ->addColumn('action',function($row){
                 $btn = 'id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editCurrency">Edit';
                 $btn = $btn.' id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteCurrency" onclick="return confirm("Are you sure?")">Delete';
                 return $btn;
         })
         ->editColumn('base',function ($row) {
             return $row->base == 'true' ? 'Yes' : 'No';
         })
         ->rawColumns(['action','base'])
         ->make(true);

datatables laravel laravel modal-dialog