在本JavaScript 教程中，我们将看到如何使用tabulator js。在这个tabulator js 示例或tabulator js 教程中，我们将看到如何使用 tabulator js 立即创建交互式表格。
什么是制表器js？
tabulator js是一个 javascript 库，我们可以使用它在几秒钟内创建交互式表格，而无需太多编码。它非常易于使用且功能齐全，是一个交互式表格 javascript 库。
我们可以从任何 HTML 表格、JavaScript 数组、AJAX 数据源或 JSON 格式的数据创建具有视觉吸引力的表格。
制表器js示例
现在，我们将看到一个tabulator js 示例，在这里我们将从JavaScript 数组创建一个表。
在这里，我们要做的第一件事是创建一个 HTML 文件。
准备好 HTML 文件后，我们要做的第一件事就是引用tabulator.min.css和tabulator.min.js文件。
在这里，我使用 CDN 文件路径来引用 js 和 css 文件，如下所示：
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>接下来，我们可以创建如下所示的 JavaScript 数组：
var tabledata = [{
playerid: 1,
playername: "Virat Kohli",
price: "17",
team: "RCB",
joiningdate: "01/01/2020"
}, {
playerid: 2,
playername: "Rohit Sharma",
price: "15",
team: "MI",
joiningdate: "02/01/2020"
}, {
playerid: 3,
playername: "MS Dhoni",
price: "15",
team: "CSK",
joiningdate: "03/01/2020"
}, {
playerid: 4,
playername: "Shreyas Iyer",
price: "7",
team: "RCB",
joiningdate: "04/01/2020"
}, {
playerid: 5,
playername: "KL Rahul",
price: "11",
team: "KXIP",
joiningdate: "05/01/2020"
}, {
playerid: 6,
playername: "Dinesh Karthik",
price: "7",
team: "KKR",
joiningdate: "06/01/2020"
}, {
playerid: 7,
playername: "Steve Smith",
price: "12",
team: "RR",
joiningdate: "07/01/2020"
}, {
playerid: 8,
playername: "David Warner",
price: "12",
team: "SRH",
joiningdate: "08/01/2020"
}, {
playerid: 9,
playername: "Kane Williamson",
price: "3",
team: "SRH",
joiningdate: "09/01/2020"
}, {
playerid: 10,
playername: "Jofra Archer",
price: "7",
team: "RR",
joiningdate: "10/01/2020"
}, {
playerid: 11,
playername: "Andre Russell",
price: "9",
team: "KKR",
joiningdate: "11/01/2020"
}, {
playerid: 12,
playername: "Chris Gayle",
price: "2",
team: "KXIP",
joiningdate: "12/01/2020"
},
];一旦数据源准备好，现在我们可以使用 tabulator js 代码将数据绑定到 html div 标签。所以在这里我创建了一个具有如下 id 的 div：
<div id="players"></div>
下面是如何使用上述数组数据创建交互式表的代码。
var table = new Tabulator("#players", {
height: 220,
data: tabledata,
layout: "fitColumns",
pagination: "local",
paginationSize: 5,
tooltips: true,
columns: [{
title: "Player Name",
field: "playername",
sorter: "string",
width: 150,
headerFilter: "input"
}, {
title: "Player Price",
field: "price",
sorter: "number",
hozAlign: "left",
formatter: "progress",
},
{
title: "Team",
field: "team",
sorter: "string",
hozAlign: "center",
editor: "select",
headerFilter: true,
headerFilterParams: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}
}, {
title: "Joining Date",
field: "joiningdate",
sorter: "date",
hozAlign: "center"
},
],
rowClick: function(e, row) {
alert("Row " + row.getData().playerid + " Clicked!!!!");
},
});让我们了解以下几点：
- new Tabulator(“#players”,{ : 这里#players 是表格将呈现的 HTML div id。
- height: 220：这里可以定义表格的高度，如果加载更多记录，则会出现滚动条。
- data: tabledata：这里我们需要传递数据，这里是JavaScript数据数组名。
- 布局：“fitColumns”：表格布局将适合页面。
- pagination: “local” 和 paginationSize: 5：我们需要实现分页的这些参数。要启用分页，我们需要将其设置为 local 和 paginationSize。
- 工具提示： true：当您将鼠标悬停在表中的任何列时将其设置为 true 后，将显示数据。
columns: [{
title: "Player Name",
field: "playername",
sorter: "string",
width: 150,
headerFilter: "input"
}columns 参数非常重要。您可以从数据源添加要在表中显示的列。以下是它将采用的参数：
- 标题：这将是表列显示名称
- field : 来自数据源的数据源字段
- sorter：如果您尝试对文本字段进行排序，那么我们必须提及string。同理，整数类型的字段写“ number ”，DateTime类型的字段写“ date ”。
- headerFilter: “input”: 如果你想在标题下面有一个过滤器选项，你可以为字符串类型写输入。
同样，如果你想对下拉列表使用过滤器，我们必须像下面这样写：
headerFilter: true,
headerFilterParams: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}如果要从表中获取选定的行值，可以使用如下所示：
row.getData().playerid：这里的 playerid 是列名。
rowClick: function(e, row) {
alert("Row " + row.getData().playerid + " Clicked!!!!");
},完整的 HTML 和 JavaScript 代码如下所示。整个 .html 文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator Example</title>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="players"></div>
<script type="text/javascript">
var tabledata = [{
playerid: 1,
playername: "Virat Kohli",
price: "17",
team: "RCB",
joiningdate: "01/01/2020"
}, {
playerid: 2,
playername: "Rohit Sharma",
price: "15",
team: "MI",
joiningdate: "02/01/2020"
}, {
playerid: 3,
playername: "MS Dhoni",
price: "15",
team: "CSK",
joiningdate: "03/01/2020"
}, {
playerid: 4,
playername: "Shreyas Iyer",
price: "7",
team: "RCB",
joiningdate: "04/01/2020"
}, {
playerid: 5,
playername: "KL Rahul",
price: "11",
team: "KXIP",
joiningdate: "05/01/2020"
}, {
playerid: 6,
playername: "Dinesh Karthik",
price: "7",
team: "KKR",
joiningdate: "06/01/2020"
}, {
playerid: 7,
playername: "Steve Smith",
price: "12",
team: "RR",
joiningdate: "07/01/2020"
}, {
playerid: 8,
playername: "David Warner",
price: "12",
team: "SRH",
joiningdate: "08/01/2020"
}, {
playerid: 9,
playername: "Kane Williamson",
price: "3",
team: "SRH",
joiningdate: "09/01/2020"
}, {
playerid: 10,
playername: "Jofra Archer",
price: "7",
team: "RR",
joiningdate: "10/01/2020"
}, {
playerid: 11,
playername: "Andre Russell",
price: "9",
team: "KKR",
joiningdate: "11/01/2020"
}, {
playerid: 12,
playername: "Chris Gayle",
price: "2",
team: "KXIP",
joiningdate: "12/01/2020"
},
];
var table = new Tabulator("#players", {
height: 220,
data: tabledata,
layout: "fitColumns",
pagination: "local",
paginationSize: 5,
tooltips: true,
columns: [{
title: "Player Name",
field: "playername",
sorter: "string",
width: 150,
headerFilter: "input"
}, {
title: "Player Price",
field: "price",
sorter: "number",
hozAlign: "left",
formatter: "progress",
},
{
title: "Team",
field: "team",
sorter: "string",
hozAlign: "center",
editor: "select",
headerFilter: true,
headerFilterParams: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}
}, {
title: "Joining Date",
field: "joiningdate",
sorter: "date",
hozAlign: "center"
},
],
rowClick: function(e, row) {
alert("Row " + row.getData().playerid + " Clicked!!!!");
},
});
</script>
</body>
</html>运行 HTML 文件后，您可以看到输出如下所示：
