grid-column-selector.blade.php
2.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<div class="dropdown pull-right column-selector">
<button type="button" class="btn btn-sm btn-instagram dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-table"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<ul>
@foreach($columns as $key => $label)
@php
if (empty($visible)) {
$checked = 'checked';
} else {
$checked = in_array($key, $visible) ? 'checked' : '';
}
@endphp
<li class="checkbox icheck">
<label>
<input type="checkbox" class="column-select-item" value="{{ $key }}" {{ $checked }}/> {{ $label }}
</label>
</li>
@endforeach
</ul>
</li>
<li class="divider"></li>
<li class="text-right" style="width: 170px!important;white-space: nowrap">
<button class="btn btn-sm btn-default column-select-reverse">{{ __('reverse') }}</button>
<button class="btn btn-sm btn-default column-select-all">{{ __('admin.all') }}</button>
<button class="btn btn-sm btn-primary column-select-submit">{{ __('admin.submit') }}</button>
</li>
</ul>
</div>
<style>
.column-selector {
margin-right: 10px;
}
.column-selector .dropdown-menu {
padding: 10px;
height: auto;
max-height: 500px;
overflow-x: hidden;
}
.column-selector .dropdown-menu ul {
padding: 0;
}
.column-selector .dropdown-menu ul li {
margin: 0;
}
.column-selector .dropdown-menu label {
width: 100%;
padding: 3px;
}
</style>
<script>
$('.column-select-submit').on('click', function () {
var defaults = @json($defaults);
var selected = [];
$('.column-select-item:checked').each(function () {
selected.push($(this).val());
});
if (selected.length == 0) {
return;
}
var url = new URL(location);
if (selected.sort().toString() == defaults.sort().toString()) {
url.searchParams.delete('_columns_');
} else {
url.searchParams.set('_columns_', selected.join());
}
$.pjax({container:'#pjax-container', url: url.toString()});
});
$('.column-select-all').on('click', function () {
$('.column-select-item').iCheck('check');
return false;
});
$('.column-select-reverse').on('click', function () {
$('.column-select-item').iCheck('uncheck');
return false;
});
$('.column-select-item').iCheck({
checkboxClass:'icheckbox_minimal-blue'
});
</script>