我有一个表,其中的数据根据某些特定字段进行分组。我正在使用Tabulator.JS将JSON数据转换为表。分组属性正在按要求工作,但结果显示该组中的项目数。我需要禁用此项计数功能。
我已经使用Tabulator的“ groupBy”功能对数据进行了分组。我不确定是否应该编写自定义函数来显示组标题,或者是否有内置功能来禁用项目计数。
我使用以下功能加载制表符。
function reloadTabulator() {
ScheduleTable = new Tabulator("#ClassScheduleDiv", {
placeholder: "No Content",
layout: "fitColumns",
columns: [
{ title: "Start Time", field: "StartTime", sorter: "number" },
{ title: "Class Name", field: "ClassName", sorter: "string" },
{ title: "Instructor", field: "StaffName", sorter: "string" },
{ title: "Availabilty", field: "Availability", sorter: "string",
formatter: GetBookNowButton },
{ title: "Duration", field: "Duration", sorter: "string" }
],
groupBy: ["ClassStartDate"],
groupStartOpen: [true]
});
}
我使用table.setData(Dataset)函数将数据设置为表,如下所示:
ScheduleTable.setData(MyJSON);
电流输出: Current Output Image
预期输出: Expected Output Image
答案 0 :(得分:0)
.tabulator-row>span {
display: none;
}
const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982",
gender: 'male'
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982",
gender: 'female'
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980",
gender: 'male'
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999",
gender: 'male'
},
];
const columns = [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150
},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{
title: "Favourite Color",
field: "col"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}, {
title: "Gender",
field: "gender"
}
];
const table = new Tabulator("#example-table", {
placeholder: "No Content",
data: tabledata1, //load row data from array
layout: "fitColumns",
movableRows: true,
groupBy: ["ClassStartDate"],
groupStartOpen: [true],
columns: columns
});
const removeArrow = function() {
table.setColumns(col2);
}
$('#removeArrow').click(function() {
removeArrow();
});
.tabulator-row>span {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="example-table"></div>
</body>
</html>