当我尝试在 iPad 上打开页面时,制表符不会初始化并显示。即使在官方网站上。任何人都可以帮忙解决这个问题吗?谢谢你。
尝试不同版本的 tabulator 和 js。
在 Android 设备上看起来很正常。有没有什么技巧可以在 iPad 上正确执行此操作,因为我用 Tabulator 编写了一个项目,即将完成。今天我在 iPad 上尝试过,但很困惑。
谢谢你。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<title>Таблицы Bootstrap во вкладках</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid" style="width: 100%; padding-top:55px; padding-left: 0px; padding-right: 0px; height: inherit">
<div id="UsersTableContainer" class="row-fluid" style="height: inherit"></div>
</div>
<script type="text/javascript">
var rowdata;
var table = new Tabulator("#UsersTableContainer", {
pagination:"local",
paginationSize:40,
paginationSizeSelector:[5, 15, 20, 30, 40, 50, 100, 200],
movableColumns:true,
paginationCounter:"rows",
resizableRows:true,
autoResize:true,
placeholder:"Нет данных",
layout:"fitColumns",
responsiveLayout:true,
selectableRows:true,
selectableRowsRangeMode:"click",
columns:[
{title:"username", field:"username",responsive:0, hozAlign:"left", width: 200, formatter:"textarea", headerFilter:"input"},
{title:"logon", field:"logon", hozAlign:"left",responsive:0, width: 200, formatter:"textarea", headerFilter:"input",},
{title:"post", field:"post", hozAlign:"left",responsive:0, width: 500, formatter:"textarea", headerFilter:"input"},
{title:"ord", field:"ord", hozAlign:"left", formatter:"textarea", headerFilter:"input", headerFilterPlaceholder:"..."},
{title:"visible", field:"visible", hozAlign:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
{title:"access", field:"access", hozAlign:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
{title:"deleted", field:"deleted", hozAlign:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
{title:"ИД portal_id", field:"portal_id", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
{title:"list_id", field:"list_id", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
{title:"Users read", field:"count_users_read", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
{title:"Users write", field:"count_users_write", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
],
});
</script>
</body>
</html>
iPad,尤其是较旧的型号,可能会出现影响网页布局的视口问题。 Tabulator 的设计依赖于精确的尺寸。确保您的 HTML 中有一个强大的视口元标记。 此更新的行将确保页面在 iPad 上正确缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">