多个制表器未在同一html页上打开的制表器IE 11兼容性问题
我们在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>
1 个答案:
答案 0 :(得分：0)
我可以识别出您的代码中的两个问题。
第一个是您要在同一个table变量上创建所有表（即第二个表将替换同一变量上的第一个表），而这不会停止工作表是一种不好的做法，这也意味着在创建函数后就无法对其调用任何函数，这使我想起第二点。
之所以没有显示表格，可能是因为表格在创建时被隐藏了。由于DOM的工作方式，表在创建时必须可见，以便Tabulator计算表的布局方式。
大多数现代浏览器都允许访问ES8功能， resizeObserver 可以告诉Tabulator包含元素的可见性已更改或已调整大小，从而可以在何时重新绘制自身需要。不幸的是，像IE这样的旧版浏览器没有此功能，这意味着Tabulator何时显示还是不知道。
这意味着您需要在表格上显示 重绘 函数：
table.redraw();
这就是为什么需要声明所有表以分隔变量的原因，以便可以根据需要在每个表上调用redraw函数。
如果出于某种原因将它们全部存储在单独的变量中是一个问题，那么如果您使用Tabulator 4.5或更高版本，则可以使用以下代码通过CSS选择器查找表：
var table = Tabulator.prototype.findTable("#example-table")
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？