【发布时间】：2020-02-17 23:35:19
【问题描述】：
我将 Laravel-5.8 用于我的 Web 应用程序。在其中，我有一个使用数据表制作的索引视图刀片，该数据表源自这两个动态输入表：
class AppraisalGoal extends Model
{
protected $table = 'appraisal_goals';
protected $primaryKey = 'id';
protected $fillable = [
'goal_type_id',
'appraisal_identity_id',
'employee_id',
'company_id',
'is_published',
'is_approved',
'weighted_score',
'employee_comment',
'line_manager_comment',
'goal_title',
'appraisal_doc',
'appraisal_start_date',
'appraisal_end_date',
];
public function goaltype()
{
return $this->belongsTo('App\Models\Appraisal\AppraisalGoalType','goal_type_id');
}
public function employee()
{
return $this->belongsTo('App\Models\Hr\HrEmployee','employee_id');
}
public function appraisalidentity()
{
return $this->belongsTo('App\Models\Appraisal\AppraisalIdentity','appraisal_identity_id');
}
public function appraisalgoaldetail(){
return $this->hasMany('App\Models\Appraisal\AppraisalGoalDetail');
}
}
class AppraisalGoalDetail extends Model
{
protected $table = 'appraisal_goal_details';
protected $fillable = [
'name',
'company_id',
'appraisal_goal_id',
'kpi_description',
'appraisal_doc',
'activity',
'start_date',
'end_date',
];
public function appraisalgoal()
{
return $this->belongsTo('App\Models\Appraisal\AppraisalGoal');
}
}
控制器
public function index()
{
$userEmployee = Auth::user()->employee_id;
$goals = AppraisalGoal::where('employee_id', $userEmployee)->get();
return view('appraisal.appraisal_goals.index')->with('goals', $goals);
}
目前，我有这个索引视图刀片：
来源于：
<div class="card-body">
<div class="table-responsive">
<table class=" table table-bordered table-striped table-hover datatable">
<thead>
<tr>
<th width="10">
#
</th>
<th>
Goal Type
</th>
<th>
Goal Title
</th>
<th>
Goal Description
</th>
<th>
Weight
</th>
<th>
Published
</th>
<th>
Approved
</th>
<th>
Line Manager's Comments
</th>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Date Added
</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach($goals as $key => $goal)
<td>
{{$key+1}}
</td>
<td>
{{$goal->goaltype->name ?? '' }}
</td>
<td>
{{$goal->goal_title ?? '' }}
</td>
<td>
{{$goal->goal_description ?? '' }}
</td>
<td>
{{$goal->weighted_score ?? '' }}
</td>
<td>
@if ($goal->is_published)
<span class="badge bg-success">Published</span>
@else
<span class="badge bg-danger">Pending</span>
</a>
@endif
</td>
<td>
@if ($goal->is_approved)
<span class="badge bg-success" >Approved</span>
@else
<span class="badge bg-danger">Pending</span>
@endif
</td>
<td>
{{$goal->line_manager_comment ?? '' }}
</td>
<td>
{{Carbon\Carbon::parse($goal->start_date)->format('d-m-Y') ?? '' }}
</td>
<td>
{{Carbon\Carbon::parse($goal->end_date)->format('d-m-Y') ?? '' }}
</td>
<td>
{{Carbon\Carbon::parse($goal->created_at)->format('d-m-Y') ?? '' }}
</td>
<td>
@if($goal->is_published == 0)
<a class="btn btn-xs btn-success" data-toggle="modal" data-target="#confirm-publish{{ $goal->id }}" data-original-title="Close">
<span style="color:white;">Publish</span>
</a>
@else
<span class="badge bg-danger">Published</span>
@endif
@can('appraisal_goal_show')
<a class="btn btn-xs btn-primary" href="{{ route('appraisal.appraisal_goals.show', $goal->id) }}">
{{ trans('global.view') }}
</a>
@endcan
@can('appraisal_goal_edit')
<a class="btn btn-xs btn-info" href="{{ route('appraisal.appraisal_goals.edit', ['id'=>$goal->id]) }}">
{{ trans('global.edit') }}
</a>
@endcan
@can('appraisal_goal_delete')
<a class="btn btn-xs btn-danger" data-toggle="modal" data-target="#confirm-delete{{ $goal->id }}" data-original-title="Close">
<span style="color:white;">{{ trans('global.delete') }}</span>
</a>
@endcan
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
数据表脚本
<script>
$(function() {
let copyButtonTrans = '{{ trans('global.datatables.copy') }}'
let csvButtonTrans = '{{ trans('global.datatables.csv') }}'
let excelButtonTrans = '{{ trans('global.datatables.excel') }}'
let pdfButtonTrans = '{{ trans('global.datatables.pdf') }}'
let printButtonTrans = '{{ trans('global.datatables.print') }}'
let colvisButtonTrans = '{{ trans('global.datatables.colvis') }}'
let languages = {
'en': 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/English.json'
};
$.extend(true, $.fn.dataTable.Buttons.defaults.dom.button, { className: 'btn' })
$.extend(true, $.fn.dataTable.defaults, {
language: {
url: languages.{{ app()->getLocale() }}
},
columnDefs: [
{
orderable: false,
searchable: false,
targets: -1
}],
select: {
style: 'multi+shift',
selector: 'td:first-child'
},
order: [],
scrollX: true,
pageLength: 100,
dom: 'lBfrtip<"actions">',
buttons: [
]
});
$.fn.dataTable.ext.classes.sPageButton = '';
});
</script>如何重新编写代码以使索引视图刀片看起来如下所示：
谢谢
【问题讨论】：