html - Tabulator IE 11 兼容性问题，多个制表器未在同一 html 页面上打开
问题描述
我们在 IE11 上面临制表器的问题，在我们的应用程序中，我们有仪表板，我们试图在单击每张卡时显示多个制表器表。
添加polyfill脚本后，我们只能查看一个表格，但我们无法查看其他表格，我们无法在 IE11 的同一 html 页面上看到多个制表符，这在 chrome/Mozilla 中也可以正常工作。我们尝试重新排列脚本，但仍然是同样的问题，并且控制台或日志上没有错误。
我们附加了包含所有代码的仪表板 html 页面。
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title th:text="#{label.Title}"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/bootstrapupdate.min.css}"/>
<link rel="stylesheet" th:href="@{/css/font.css}"/>
<link rel="stylesheet" th:href="@{/css/select2.min.css}"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" th:src="@{/js/jquery3.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap4.3.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery1.12.4.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/select2.min.js}"></script>
<script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script>
<script type="text/javascript" th:src="@{/js/moment.js}"></script>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/css/tabulator.css}"/>
<script> var jqv3 = jQuery.noConflict(); </script>
</head>
<body id="page-top" >
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-md-12 mb-4" style="margin-bottom: 2px !important;">
<h1 class="h3 text-gray-800 headerText" style="float:left; font-size: 19px;"><label class="inline mb" th:text="#{label.Buyer}"></label> <label class="inline mb" th:text="#{label.Dashboard}"></label></h1>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2 zoom box active" style="cursor: pointer;" id="onloadId">
<div class="card-body card-link" data-toggle="collapse" href="#collapseDraft" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Draft</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.draftCount}"></div>
<img th:src="@{/img/draft.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-success shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapsePublish" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Published</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.publishedCount}"></div>
<img th:src="@{/img/publish.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-query shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseInquery" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-query text-uppercase mb-1">In Query Stage</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.inQueryCount}"></div>
<img th:src="@{/img/query.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-response shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseInresponse" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-response text-uppercase mb-1">In Response Stage</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.inResponseCount}"></div>
<img th:src="@{/img/inresponse.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseShortlist" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Shortlisted</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.shortlistedCount}"></div>
<img th:src="@{/img/shortlist.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-danger shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseSelect" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Selected</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.selectedCount}"></div>
<img th:src="@{/img/selected.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card border-left-info shadow h-100 py-2 zoom box" style="cursor: pointer;">
<div class="card-body card-link" data-toggle="collapse" href="#collapseClosed" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
<div class="row no-gutters align-items-center">
<div class="col-md-12 mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Closed</div>
</div>
<div class="col-md-12">
<div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.closedCount}"></div>
<img th:src="@{/img/closed.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
</div>
<div class="col-sm-12 text-right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="collapseDraft" class="collapse show" data-parent="#accordion">
<div class="card-body">
<div class="content" id="draftTable"></div>
</div>
</div>
<div id="collapsePublish" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="content" id="publishTable"></div>
</div>
</div>
<div id="collapseInquery" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="content" id="inQueryTable"></div>
</div>
</div>
<div id="collapseInresponse" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="content" id="inResponseTable"></div>
</div>
</div>
<div id="collapseShortlist" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="shortlistTable"></div>
</div>
</div>
<div id="collapseSelect" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="selectedTable"></div>
</div>
</div>
<div id="collapseClosed" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="closedTable"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<script type="text/javascript" th:src="@{/js/vendor-portal.min.js}"></script>
<script th:inline="javascript">
//draftTable Start Dashboard
var tabledata = [];
var draftRfxObj = [[${draftRfx}]];
if(draftRfxObj == "{}"){
draftRfxObj = tabledata;
}else{
draftRfxObj = JSON.parse(draftRfxObj);
}
var publishedRfxObj = [[${publishedRfx}]];
if(publishedRfxObj == "{}"){
publishedRfxObj = tabledata;
}else{
publishedRfxObj = JSON.parse(publishedRfxObj);
}
var inQueryRfxObj = [[${inQueryRfx}]];
if(inQueryRfxObj == "{}"){
inQueryRfxObj = tabledata;
}else{
inQueryRfxObj = JSON.parse(inQueryRfxObj);
}
var inResponseRfxObj = [[${inResponseRfx}]];
if(inResponseRfxObj == "{}"){
inResponseRfxObj = tabledata;
}else{
inResponseRfxObj = JSON.parse(inResponseRfxObj);
}
var shortlistedRfxObj = [[${shortlistedRfx}]];
if(shortlistedRfxObj == "{}"){
shortlistedRfxObj = tabledata;
}else{
shortlistedRfxObj = JSON.parse(shortlistedRfxObj);
}
var selectedRfxObj = [[${selectedRfx}]];
if(selectedRfxObj == "{}"){
selectedRfxObj = tabledata;
}else{
selectedRfxObj = JSON.parse(selectedRfxObj);
}
var closedRfxObj = [[${closedRfx}]];
if(closedRfxObj == "{}"){
closedRfxObj = tabledata;
}else{
closedRfxObj = JSON.parse(closedRfxObj);
}
var allRfxForBuyerObj = [[${allRfxForBuyer}]];
if(allRfxForBuyerObj == "{}"){
allRfxForBuyerObj = tabledata;
}else{
allRfxForBuyerObj = JSON.parse(allRfxForBuyerObj);
}
var table = new Tabulator("#draftTable", {
height:310,
data:draftRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"show",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", formatter:"textarea", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Planned Publish Date", field:"plannedPublishedDate", widthGrow:2},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
],
initialSort:[
{column:"plannedPublishedDate", dir:"asc"},
],
});
//draft Table End Dashboard
//Publish Table Start Dashboard
var table = new Tabulator("#publishTable", {
height:310,
data:publishedRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"show",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Planned Publish Date", field:"plannedPublishedDate", widthGrow:2},
{title:"Actual Publish Date", field:"actualPublishedDate", widthGrow:2},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:1},
],
initialSort:[
{column:"actualPublishedDate", dir:"asc"},
],
});
//Publish Table End Dashboard
//In Query Table Start Dashboard
var table = new Tabulator("#inQueryTable", {
height:310,
data:inQueryRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"show",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"Query Start Date", field:"queryResolutionStartDate", widthGrow:2},
{title:"Query End Date", field:"queryResolutionEndDate", widthGrow:2},
{title:"Query Raised", field:"queryRaised", widthGrow:2},
{title:"Query Resolved", field:"queryResolved", widthGrow:2},
],
initialSort:[
{column:"queryResolutionStartDate", dir:"asc"},
],
});
//In Query Table End Dashboard
//inResponseTable Start Dashboard
var tabledata = [];
var table = new Tabulator("#inResponseTable", {
height:310,
data:inResponseRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"hide",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"Voucher Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"Response Start Date", field:"inResponseStartDate", widthGrow:2},
{title:"Response End Date", field:"inResponseEndDate", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
],
initialSort:[
{column:"inResponseStartDate", dir:"asc"},
],
});
//inResponseTable Table End Dashboard */
//shortlist Table Start Dashboard
var tabledata = [];
var table = new Tabulator("#shortlistTable", {
height:310,
data:shortlistedRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"hide",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
{title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
{title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
],
initialSort:[
{column:"shortlistingDate", dir:"asc"},
],
});
//shortlist Table End Dashboard
//selected Table Start Dashboard
var tabledata = [];
var table = new Tabulator("#selectedTable", {
height:310,
data:selectedRfxObj,
layout:"fitColumns",
pagination:"local",
responsiveLayout:"hide",
placeholder:"Currently No Records Available.",
paginationSize:8,
columns:[
{title:"Title", field:"title", widthGrow:2},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
{title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
{title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
{title:"Date of Selection", field:"selectionDate", widthGrow:2},
],
initialSort:[
{column:"selectionDate", dir:"asc"},
],
});
//selected Table End Dashboard
//Closed Table Start Dashboard
var tabledata = [];
var table = new Tabulator("#closedTable", {
height:310,
data:closedRfxObj,
layout:"fitColumns",
pagination:"local",
placeholder:"Currently No Records Available.",
paginationSize:8,
responsiveLayout:"hide",
columns:[
{title:"Title", field:"title", widthGrow:1},
{title:"Rfx Id", field:"rfxHeaderId",visible:false,},
{title:"RFX Number", field:"voucherNo", widthGrow:1, formatter:"link", formatterParams:{
url : function(cell){
var row = cell.getRow();
return "/erfx/findbyId/" + row.getData().rfxHeaderId},
target:"_self",
urlField:"status"
}},
{title:"Created By", field:"createdBy", widthGrow:2},
{title:"Raised By", field:"raisedBy", widthGrow:2},
{title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
{title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
{title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
{title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
{title:"Date of Selection", field:"selectionDate", widthGrow:2},
{title:"Closure Date", field:"closureDate", widthGrow:1},
],
initialSort:[
{column:"closureDate", dir:"asc"},
],
});
//Closed Table End Dashboard
</script>
<script th:inline="javascript">
$(document).ready(function(){
$('.box').click(function(){
if($('.active').length){
$('.active').not($(this)).removeClass('active').addClass('box');
}
$(this).removeClass('box').addClass('active');
});
});
</script>
</body>
</html>
解决方案
我可以识别您的代码有两个问题。
首先是您在同一个table变量上创建所有表（即第二个表正在替换同一个变量上的第一个表），虽然这不会停止表的工作，但这是不好的做法，也意味着没有办法在创建它们后调用它们的任何函数，这使我进入第二点。
表格未显示的原因可能是因为表格在创建时被隐藏。由于 DOM 的工作方式，表格必须在创建时可见，以便 Tabulator 计算表格的布局方式。
大多数现代浏览器都允许访问 ES8 功能，resizeObserver告诉 Tabulator 其包含的元素何时更改了可见性或调整了大小，这允许它在需要时重新绘制自己。不幸的是，像 IE 这样的旧浏览器没有这个，这意味着 Tabulator 不知道它何时可见。
这意味着当表格可见时，您需要在表格上调用重绘函数：
table.redraw();
这就是为什么您需要将所有表声明为单独的变量，以便您可以根据需要在每个表上调用重绘函数。
如果出于某种原因将它们全部存储在单独的变量中是一个问题，那么如果您使用的是 Tabulator 4.5 或更高版本，您可以使用以下代码通过 CSS 选择器查找表格：
var table = Tabulator.prototype.findTable("#example-table")
推荐阅读
- c# - 如何同步 ListView 中的选定项目和选中项目？
- android - org.gradle.api.ProjectConfigurationException：配置项目“：app”时出现问题
- python - 模型字段在第一次保存时不会更新
- amazon-web-services - AWS API 网关可以调用多个 lambda 函数吗？
- testing - 尝试通过 Selenium Grid 运行多个测试场景时出现连接错误
- git - Github 子模块自动分支切换
- java - 在长时间失去焦点后尝试恢复后崩溃
- unit-testing - 如何有条件地拆除 Tasty 中的测试平台资源？
- javascript - 如何将 Viewbag 数据中的 List 放入视图中的 javascript API 标记？
- ios - 如何通过引用将对象从一个类传递到另一个类？