如何解决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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。