Question

我确定有一个简单的解决方案，并且已经浏览了制表器文档和常见问题解答，但无法解决。在编辑单元格时，我需要用该特定值更新该行中的另一个单元格。 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字段中填充“已编辑”。

这里的制表器库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

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

2 个答案: