更新制表符中的列

Question

有没有办法只更新制表符中的列table？

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”。我在 docs:

中找到了这个

table.updateData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}]);

但据我了解，这是更新整个数据集，我不打算这样做。我尝试在更改事件中创建一个字符串 object 并将其手动输入 object，但 Tabulator 不喜欢它显然是一个字符串这一事实并给出此错误：

tabulator.min.js:3 Data Loading Error - Unable to process data due to invalid data type 
Expecting: array 
Received:  string 
Data:      2017

这是 table数据的示例：

Answer 1

//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>

更新制表符中的列

Update Columns in Tabulator

javascript

tabulator