Question

我是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”）

Answer 1

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

参见此处：http://tabulator.info/docs/4.2/update

Answer 2

解决了它的摘要

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>

getData不反映在制表器表上所做的更改

2 个答案: