Question

有没有一种方法可以仅在事件中更新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”。我已经在docs中找到了：

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

但是据我了解，那是为了更新整个数据集，而我并不打算这样做。我曾尝试在change事件中创建一个字符串对象并将其手动输入到对象中，但是Tabulator不喜欢它显然是字符串并给出以下错误的事实：

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

这是tableData的示例：

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>

制表器中的更新列

1 个答案: