编辑单元格时，它还会更新该行中的另一个单元格答案

【问题标题】：When editing a cell, it also updates another cell within that row编辑单元格时，它还会更新该行中的另一个单元格
【发布时间】：2019-07-05 02:17:43
【问题描述】：

我确信有一个简单的解决方案可以解决这个问题，我已经浏览了 Tabulator 文档和常见问题解答，但我无法解决。编辑单元格时，我需要该行中的另一个单元格以特定值进行更新。 JS Fiddle 中提供的当前测试代码：https://jsfiddle.net/f35p7gyx/。

    {id:1, name:"Oli Bob"},
    {id:2, name:"Mary May"},
    {id:3, name:"Christine Lobowski",},
    {id:4, name:"Brendon Philips"},
    {id:5, name:"Margret Marmajuke"},
    {id:6, name:"Frank Harbours"},
];

new Tabulator("#example-table", {
  data: tabledata,
  columns: [
    {title:"ID", field:"id", editor:"input"},
    {title:"Name", field:"name", editor:"input"},
    {title:"EDN", field:"EDN", sorter:"string", width:100, headerFilter:"input", tooltip:"Orange = not cleared and Green = Cleared",
     cellClick:function(e, cell, formatterParams){
         var e = document.getElementById("myselect");
       var colour = e.options[e.selectedIndex].value;
       if (colour == ""){
         // do nothing
       } else {
         cell.getElement().style.backgroundColor = colour;
         console.log({...cell.getRow().getData(), colourKey: colour});

       }
     }
    }
  ],
});

如果我编辑姓名字段，我需要用“已编辑”填充 EDN 字段。

Tabulator 库在这里http://tabulator.info

【问题讨论】：

标签： jquery tabulator

【解决方案1】：

const orignalTabledata = [{
    id: 1,
    name: "Oli Bob"
  },
  {
    id: 2,
    name: "Mary May"
  },
  {
    id: 3,
    name: "Christine Lobowski",
  },
  {
    id: 4,
    name: "Brendon Philips"
  },
  {
    id: 5,
    name: "Margret Marmajuke"
  },
  {
    id: 6,
    name: "Frank Harbours"
  },
];

const tabledata = [{
    id: 1,
    name: "Oli Bob",
    EDN: ''
  },
  {
    id: 2,
    name: "Mary May",
    EDN: ''
  },
  {
    id: 3,
    name: "Christine Lobowski",
    EDN: ''
  },
  {
    id: 4,
    name: "Brendon Philips",
    EDN: ''
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    EDN: ''
  },
  {
    id: 6,
    name: "Frank Harbours",
    EDN: ''
  },
];

const table = new Tabulator("#example-table", {
  data: tabledata,
  reactiveData: true,
  columns: [{
      title: "ID",
      field: "id",
      editor: "input"
    },
    {
      title: "Name",
      field: "name",
      editor: "input"
    },
    {
      title: "EDN",
      field: "EDN",
      sorter: "string",
      width: 100,
      headerFilter: "input",
    }
  ],
  dataEdited(data) {
    let index;
    for (let i = 0; i < tabledata.length; i++) {
      if (orignalTabledata[i].name !== data[i].name) {
        index = i;
        tabledata[i].EDN = 'edited';
      } else {
        tabledata[i].EDN = '';
      }
    }
  }
});

<!DOCTYPE html>
<html>

<head>
  <!-- Tabulator CDN -->
  <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>


</body>

</html>

【讨论】：

这个可行，但是为什么表数据需要复制两次？
它正在编辑原始变量，即使它被定义为一个常量，尝试看看你是否可以不这样做

【解决方案2】：

好的，所以我找到了正确的解决方案。

在 cellEdited 函数或任何需要触发该函数的地方，您可以使用以下内容：

        var ID = cell.getRow().getData().id; // Get id of Row, Tab uses the id by default
        table.updateOrAddRow(ID, {EDN:"Edited"}); // You can update if found or add new row

【讨论】：