我正在尝试使用laravel和ajax使用复选框更新多行。您能告诉我这是怎么回事吗?谢谢。这是代码:
affectation.blad.php
<div class="container">
<h3>PHP Laravel 5.6 - How to update multiple row with checkbox using Ajax? - HDTuto.com</h3>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<div class="form-group col-md-3 ">
<select class="form-control" id="app">
<option v-for="chantier in chantiers" :value="chantier.id" >@{{ chantier.chantier }}</option>
</select>
</div>
<button class="btn btn-success update-all" data-url="">Update All</button>
<button style="margin: 5px;" class="btn btn-danger btn-xs delete-all" data-url="">Delete All</button>
<table class="table table-bordered">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>nom & prenom</th>
<th>cin</th>
<th>matricule</th>
<th>chantier</th>
</tr>
@if($salaries->count())
@foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->nom }} {{ $salarie->nom }}</td>
<td>{{ $salarie->cin }}</td>
<td>{{ $salarie->matricule }}</td>
<td>{{ $salarie->chantier->chantier }}</td>
</tr>
@endforeach
@endif
</table>
</div>
控制器功能全部更新
public function updateMultiple(Request $request){
Salarie::find($request->ids)->Update(['chantier_id'=>request('chantier_id')])->whereIn('id', request('ids'));
return response()->json(['status'=>true,'message'=>"Category update successfully."]);
}
路线
Route::get('affectation', 'SalarieController@index');
Route::put('update-multiple-category', ['as'=>'category.multiple-update','uses'=>'SalarieController@updateMultiple']);
这是用于全部选中并编辑的javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#check_all').on('click', function(e) {
if($(this).is(':checked',true))
{
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked',false);
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#check_all').prop('checked',true);
}else{
$('#check_all').prop('checked',false);
}
});
$('.update-all').on('click', function(e) {
var idsArr = [];
$(".checkbox:checked").each(function() {
idsArr.push($(this).attr('data-id'));
});
if(idsArr.length <=0)
{
alert("Please select atleast one record to update.");
} else {
if(confirm("Are you sure, you want to update the selected salaries?")){
var strIds = idsArr.join(",");
$.ajax({
url: "{{ route('category.multiple-update') }}",
type: 'post',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: 'ids='+strIds,
success: function (data) {
if (data['status']==true) {
$(".checkbox:checked").each(function() {
$(this).parents("tr").children("td:last-child").text($('#app').children("option:selected"). text());
});
alert(data['message']);
} else {
alert('Whoops Something went wrong!!');
}
},
error: function (data) {
alert(data.responseText);
}
});
}
}
});
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
onConfirm: function (event, element) {
element.closest('form').submit();
}
});
});
</script>
此代码用于用vuejs填充选择选项chantier:
<script src="{{asset('js/Vue.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
'url' => url('/')
]) !!};
</script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'i am nothing',
chantiers:[]
},
methods:{
getChantiers:function(){
axios.get(window.Laravel.url+'/getchantiers')
.then(response => {
this.chantiers = response.data;
})
.catch(error=>{
console.log('errrrrreur',error);
})
}
},
created:function(){
this.getChantiers();
}
});
</script>
当我单击全部更新按钮时,它在图片中给了我这个错误 Error