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

Question

我确信有一个简单的解决方案，我已经阅读了 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});

       }
     }
    }
  ],
});

如果我编辑名称字段，我需要用 'Edited' 填充 EDN 字段。

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

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

Answer 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

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

When editing a cell, it also updates another cell within that row

jquery

tabulator