laravel - 数据表自定义工具栏不适用于 Select2 CSS
问题描述
这是代码
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- problem lays here -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: "{{ route('users.index') }}",
dom: '<l<"toolbar">f>rtip',
initComplete: function(){
$("div.toolbar").html('<div style="float:left;margin-left:4px;"><select class="form-control select2bs4 select2-hidden-accessible trash_all" style="width:140px;height:32px;margin-left:10px;" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19">Bulk Actions</option><option data-select2-id="38" value="trashAll">Trash</option></select></div><div style="float:left;margin-left:20px;"><select onchange="window.location = this.options[this.selectedIndex].value" class="form-control select2bs4 select2-hidden-accessible download-doc" style="width:140px;height:32px;margin-left:10px;padding-bottom:5px"" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19" value="{{route('users.index')}}">Download</option><option data-select2-id="38" value="{{route('users.pdf')}}">PDF</option><option data-select2-id="39" value="{{route('users.excel')}}">XLS</option><option data-select2-id="39" value="{{route('users.word')}}">Doc</option></select></div>');
},
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'roles', name: 'roles'},
{data: 'status', name: 'status'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$("div.toolbar").css("float", "left");
$('#roles').select2({
ajax: {
url: '{{ url('searchrole') }}',
processResults: function(data){
return {
results: data.map(function(item){return {id: item.id, text: item.name} })
}
}
}
});
当我删除此代码时
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
但是,当我让上面的代码存在时,自定义工具栏元素就消失了。我应该让它存在,因为如果我删除上面的代码,select2 将不起作用。
解决方案
您可以通过执行以下操作来显示这些选择控件:
(1) 再次取消注释您的select2.min.css
资源。
(2) 从您的代码中删除此类:select2-hidden-accessible
. 它出现在您的initComplete
函数中的 2 个位置,并导致您的控件被隐藏。
(您可能需要进行其他调整,具体取决于该 HTML 代码块中的其余类如何与 select2 CSS 交互。)
推荐阅读
- javascript - React build 无法正确加载字体
- ios - SwiftUi 水平滚动视图,带有来自 Api 的数据
- jsonschema - OpenAPI 规范使用 allOf 覆盖继承的属性
- c# - 无论如何要求 EF Core 对相关数据使用两个查询而不是 1 或 N+1?
- spring - 使用mockito的resttemplatebuilder错误处理程序的junit空指针异常
- javascript - 电子表格未由 openById() 打开
- python - 用于更正损坏的日期值的脚本
- elasticsearch - 弹性搜索查询过滤和排序日期
- javascript - 当整数为负数时停止运行 onclick 函数
- python-3.x - 当我运行 pipwin 时,我得到“创建进程失败”。无论我尝试什么 pipwin 命令都会发生这种情况,并且 pipwin 已经安装