更新制表器中的列
Mat*_*att 5 javascript tabulator
有没有办法只更新事件中制表符表中的列？
var table = new Tabulator("#example-table", {
data: tableData,
// autoColumns: true,
layout: "fitColumns",
movableColumns: true,
columns: [{
title: "countyname",
field: "countyname"
}, //link column to name property of user object
{
title: "2016",
field: "2016"
}
],
});
具体来说，我试图在更改事件中将字段和标题从“2016”更改为“2017”。我在文档中找到了这个：
table.updateData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}]);
但据我了解，这是更新整个数据集，我不打算这样做。我尝试在更改事件中创建一个字符串对象并将其手动输入到该对象中，但是 Tabulator 不喜欢它显然是一个字符串这一事实，并给出了以下错误：
tabulator.min.js:3 Data Loading Error - Unable to process data due to invalid data type
Expecting: array
Received: string
Data: 2017
这是表数据的示例：
//define some sample data
const tableData1 = [{
countyname: "Canada",
2016: "2016",
},
{
countyname: "India",
2016: "2016",
},
];
const tableData2 = [{
countyname: "Canada",
2017: "2017",
},
{
countyname: "India",
2017: "2017",
},
];
const columns1 = [{
title: "countyname",
field: "countyname"
}, //link column to name property of user object
{
title: "2016",
field: "2016"
}
];
const columns2 = [{
title: "countyname",
field: "countyname"
}, //link column to name property of user object
{
title: "2017",
field: "2017"
}
];
//create Tabulator on DOM element with id "example-table"
const table = new Tabulator("#example-table", {
data: tableData1,
layout: "fitColumns",
movableColumns: true,
columns: columns1
});
function changeYear() {
table.setColumns(columns2);
table.setData(tableData2);
}<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<button onclick="changeYear()">Change Year</button>
</body>
</html>