getData 不反映对 Tabulator 表所做的更改答案

【问题标题】：getData does not reflect changes made on the Tabulator tablegetData 不反映对 Tabulator 表所做的更改
【发布时间】：2019-03-25 12:34:05
【问题描述】：

我是 JavaScript 和 Tabulator 的新手，我被困在这个地方，感谢您的帮助。

我已将数据加载到制表器表上并对其进行了一些更改（添加新列、删除列等），这些更改会反映在表上，但是当我使用 table.getData() 时更新的数据不会反映（反映旧数据）。我需要这个来使用其他一些地方。我哪里错了？

这里是示例代码。

tabulatorTable = new Tabulator("#dfTable", {
selectable:true,
data:dataJson,
layout:"fitColumns",      //fit columns to width of table
responsiveLayout:"hide",  //hide columns that dont fit on the table
tooltips:true,            //show tool tips on cells
addRowPos:"top",          //when adding a new row, add it to the top of 
//table
history:true,             //allow undo and redo actions on the table
pagination:"local",       //paginate the data
paginationSize:20,         
movableColumns:true,      //allow column order to be changed
resizableRows:true,       //allow row order to be changed

columns:[
        {title:"YearsExperience", field:"YearsExperience", editor:"number"},
        {title:"Salary", field:"Salary", sorter:"number"}
        ]

});

tabulatorTable.addColumn({formatter:"rownum", title:"id"}); **// Adding new column to the table**
console.log(tabulatorTable.getData()); **// Does not reflect the newly added column**

预期的 Json 文件包含添加的列数据（标题 - “id”）

【问题讨论】：

标签： javascript tabulator

【解决方案1】：

您不能仅通过向网格中添加一列来修改数据。此外，您添加的列是“rownum”格式化程序，并且未绑定到字段，那么它知道要添加什么键？您将需要显式修改表上的数据。

请看这里：http://tabulator.info/docs/4.2/update

【讨论】：

【解决方案2】：

解决了看sn-p

tabulatorTable.addColumn({
  formatter: "rownum",
  field: "id",
  title: "id"
});

const dataJson = [{
    'YearsExperience': 2,
    'Salary': 40000
  },
  {
    'YearsExperience': 3,
    'Salary': 50000
  },
]


const tabulatorTable = new Tabulator("#dfTable", {
  selectable: true,
  data: dataJson,
  layout: "fitColumns", //fit columns to width of table
  responsiveLayout: "hide", //hide columns that dont fit on the table
  tooltips: true, //show tool tips on cells
  addRowPos: "top", //when adding a new row, add it to the top of 
  //table
  history: true, //allow undo and redo actions on the table
  pagination: "local", //paginate the data
  paginationSize: 20,
  movableColumns: true, //allow column order to be changed
  resizableRows: true, //allow row order to be changed
  columns: [{
      title: "YearsExperience",
      field: "YearsExperience",
      editor: "number"
    },
    {
      title: "Salary",
      field: "Salary",
      sorter: "number"
    }
  ]

});

tabulatorTable.addColumn({
  formatter: "rownum",
  field: "id",
  title: "id"
}); // Adding new column to the table**
console.log(tabulatorTable.getData()); // Does not reflect the newly added column**

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js"></script>
<div id="dfTable"></div>

【讨论】：