如何解决CRUD背包Laravel更新Ajax过滤器后，图形会更新
请避免给我负面评论，谢谢
在Laravel Backpack管理员中，当我们单击“日期范围”过滤器时，它正在过滤表数据，效果很好，但是我希望Graph在更改Ajax过滤器时也能被更改。
据我所知，CrudConTroller中的ajax日期范围过滤器代码：
$this->crud->addFilter([
'type' => 'date_range','name' => 'created_at','label' => 'Date range'
],false,function ($value) { // if the filter is active,apply these constraints
$dates = json_decode($value);
$this->crud->addClause('where','created_at','>=',$dates->from);
$this->crud->addClause('where','<=',$dates->to . ' 23:59:59');
});
图形出现在小部件中，即刀片模板文件：list.blade.php。
$widgets['before_content'][] = [
'type' => 'div','class' => 'row','content' => [ // widgets
[
'type' => 'chart','wrapperClass' => 'mt-4 col-md-12',// 'class' => 'col-md-12','controller' => \App\Http\Controllers\Admin\Charts\UserChartController::class,'content' => [
'header' => 'New Users',// optional
'body' => 'This chart should make it obvious',// optional
]
],],]
解决方法
有许多解决方案，您可以使用php生成图形而不是模板。请参阅中的相关部分。文档。
然后使用request参数过滤图形的数据。我会尝试举一个例子。
,我也需要这个确切的东西。颇为不客气，但我所做的是从date_range过滤器创建一个新的过滤器，而不是仅刷新数据表，而是刷新了整个页面。
是的。如果将其放在resources/views/vendor/backpack/crud/filters/date_range_refresh.blade.php中，则可以使用date_range_refresh代替date_range作为过滤器类型，并获得所需的结果：
{{-- Date Range Backpack CRUD filter --}}
<li filter-name="{{ $filter->name }}"
filter-type="{{ $filter->type }}"
filter-key="{{ $filter->key }}"
class="nav-item dropdown {{ Request::get($filter->name)?'active':'' }}">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ $filter->label }} <span class="caret"></span></a>
<div class="dropdown-menu p-0">
<div class="form-group backpack-filter mb-0">
<div class="input-group date">
<div class="input-group-prepend">
<span class="input-group-text"><i class="la la-calendar"></i></span>
</div>
<input class="form-control pull-right"
id="daterangepicker-{{ $filter->key }}"
type="text"
@if ($filter->currentValue)
@php
$dates = (array)json_decode($filter->currentValue);
$start_date = $dates['from'];
$end_date = $dates['to'];
$date_range = implode(' ~ ',$dates);
$date_range = str_replace('-','/',$date_range);
$date_range = str_replace('~','-',$date_range);
@endphp
placeholder="{{ $date_range }}"
@endif
>
<div class="input-group-append daterangepicker-{{ $filter->key }}-clear-button">
<a class="input-group-text" href=""><i class="la la-times"></i></a>
</div>
</div>
</div>
</div>
</li>
{{-- ########################################### --}}
{{-- Extra CSS and JS for this particular filter --}}
{{-- FILTERS EXTRA CSS --}}
{{-- push things in the after_styles section --}}
@push('crud_list_styles')
<!-- include select2 css-->
<link rel="stylesheet" type="text/css" href="{{ asset('packages/bootstrap-daterangepicker/daterangepicker.css') }}" />
<style>
.input-group.date {
width: 320px;
max-width: 100%; }
.daterangepicker.dropdown-menu {
z-index: 3001!important;
}
</style>
@endpush
{{-- FILTERS EXTRA JS --}}
{{-- push things in the after_scripts section --}}
@push('crud_list_scripts')
<script type="text/javascript" src="{{ asset('packages/moment/min/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('packages/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script>
function applyDateRangeFilter{{$filter->key}}(start,end) {
if (start && end) {
var dates = {
'from': start.format('YYYY-MM-DD'),'to': end.format('YYYY-MM-DD')
};
var value = JSON.stringify(dates);
} else {
//this change to empty string,because addOrUpdateUriParameter method just judgment string
var value = '';
}
var parameter = '{{ $filter->name }}';
// behaviour for ajax table
var ajax_table = $('#crudTable').DataTable();
var current_url = ajax_table.ajax.url();
var new_url = addOrUpdateUriParameter(current_url,parameter,value);
// replace the datatables ajax url with new_url and reload it
new_url = normalizeAmpersand(new_url.toString());
ajax_table.ajax.url(new_url).load();
// add filter to URL
crud.updateUrl(new_url);
// mark this filter as active in the navbar-filters
if (URI(new_url).hasQuery('{{ $filter->name }}',true)) {
$('li[filter-key={{ $filter->key }}]').removeClass('active').addClass('active');
}
else
{
$('li[filter-key={{ $filter->key }}]').trigger('filter:clear');
}
// ---------------------------------------------------------------
// THIS is where it's different from the regular date_range filter
// ---------------------------------------------------------------
// When the filter is changed,refresh the page,// so that the NPS widget up-top get reloaded.
document.location.reload();
}
jQuery(document).ready(function($) {
var dateRangeInput = $('#daterangepicker-{{ $filter->key }}').daterangepicker({
timePicker: false,ranges: {
'Last Year': [moment().startOf('year').subtract(1,'year'),moment().endOf('year').subtract(1,'year')],'Last Month': [moment().subtract(1,'month').startOf('month'),moment().subtract(1,'month').endOf('month')],'Last Week': [moment().subtract(1,'week').startOf('week'),'week').endOf('week')],'This Year': [moment().startOf('year'),moment().endOf('year')],'This Month': [moment().startOf('month'),moment().endOf('month')],'This Week': [moment().startOf('week'),moment().endOf('week')]
},@if ($filter->currentValue)
startDate: moment("{{ $start_date }}"),endDate: moment("{{ $end_date }}"),@endif
alwaysShowCalendars: true,autoUpdateInput: true
});
dateRangeInput.on('apply.daterangepicker',function(ev,picker) {
applyDateRangeFilter{{$filter->key}}(picker.startDate,picker.endDate);
});
$('li[filter-key={{ $filter->key }}]').on('hide.bs.dropdown',function () {
if($('.daterangepicker').is(':visible'))
return false;
});
$('li[filter-key={{ $filter->key }}]').on('filter:clear',function(e) {
// console.log('daterangepicker filter cleared');
//if triggered by remove filters click just remove active class,no need to send ajax
$('li[filter-key={{ $filter->key }}]').removeClass('active');
// ---------------------------------------------------------------
// THIS is where it's different from the regular date_range filter
// ---------------------------------------------------------------
// When the filter is changed,// so that the NPS widget up-top get reloaded.
document.location.reload();
});
// datepicker clear button
$(".daterangepicker-{{ $filter->key }}-clear-button").click(function(e) {
e.preventDefault();
applyDateRangeFilter{{$filter->key}}(null,null);
})
});
</script>
@endpush
{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}
这不漂亮...但是...这是一个解决方案?
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
