是否可以在没有自动 collapsing/expanding 树的情况下替换具有数据树的 table 中的数据？

Question

我正在尝试创建一个 table 可以由用户在 Web 应用程序中编辑的文件。 table 里面有几个数据树。每当用户在 table 中编辑某些内容时，table.replaceData(data) 就会在 table 中被调用。 replaceData的思路是"silently" replace all of the data in the table without changing the scroll position, sort or filtering...，但是，它也会将table中所有数据树的展开状态重置为初始状态。也就是说，如果dataTreeStartExpanded === true，那么调用replaceData将扩展table中的所有数据树。如果 dataTreeStartExpanded === false，则调用 replaceData 将折叠 table 中的所有数据树。这是不可取的，因为用户可能正在编辑其中一个数据树的子元素，如果他们想看到他们的更改，或者移动到下一个要更改的元素，他们必须每次都手动重新扩展数据树他们做出了改变。

这是使用 Tabulator 版本 4.2.1。我已经尝试清除 table，然后调用 setData 或 replaceData，但是，当然，这会导致同样的问题。我觉得这个问题可以通过使用 updateData 方法来解决，但我试图避免这种情况，因为我们的行没有索引，并且添加它们需要在 JS 中进行后端更改或奇怪的数据操作.

这是一个简短的代码片段：

const table = new Tabulator('#table', {
  dataTree: true,
  dataTreeStartExpanded: false,
  columns: [
    {title: 'Name', field: 'name',},
    {title: 'Age', field: 'age',},
  ],
  data: someDataWithNestedElements,
})

button.onclick = () => {table.replaceData(otherDataWithNestedElements)};

其中 someDataWithNestedElements 是一个格式正确的 JS 数组，带有一个用于 Tabulator 的 dataTree 的 _children 属性，而 otherDataWithNestedElements 是一组非常相似但略有不同的数据。即使其中一个数据树在单击按钮时展开，单击按钮后它也会折叠，因为 dataTreeStartExpanded 设置为 false。

Here's a JSFiddle 有一个更充实的活生生的例子。

我希望 replaceData 保留数据树的扩展状态，就像它保留滚动位置、排序和过滤一样。相反，它 expands/collapses 数据树根据 dataTreeStartExpanded 的真值自动生成。

Answer 1

使用reactivity

// Original table for the data
let someTableData = [{
  name: 'Quiz #1',
  date: '2019-07-06',
  _children: [{
    name: 'What is your name?',
    answer: 'Sir Lancelot of Camelot',
  }, {
    name: 'What is your quest?',
    answer: 'To seek the Holy Grail',
  }, {
    name: 'What is your favorite color?',
    answer: 'Red',
  }, ],
}, {
  name: 'Quiz #2',
  date: '2019-08-01',
  _children: [{
    name: 'What is the air speed velocity of an unladen swallow?',
    answer: '24 mph',
  }, {
    name: 'African or European?',
    answer: 'I don\'t know that!',
  }, ],
}, ];


// The Tabulator table itself
const myTable = new Tabulator('#table', {
  dataTree: true,
  //dataTreeStartExpanded: true, //Uncomment this line to see the trees expand themselves when the button is pressed
  data: someTableData,
  layout: 'fitColumns',
  reactiveData: true,
  columns: [{
      title: 'Quiz',
      field: 'name',
    },
    {
      title: 'Answer Key',
      field: 'answer',
    },
    {
      title: 'Due date',
      field: 'date',
    },
  ],
});

// Toggle between the two data sets when the button is clicked
let replaced = false;
const replaceData = () => {

  someTableData[1]._children[0].answer = '200 mph';

  if (replaced === false) {
    // myTable.replaceData(someOtherData);
    replaced = true;
  } else {
    // myTable.replaceData(someTableData);
    replaced = false;
  }
}

document.querySelector('button').onclick = replaceData;

<!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>
  <title>Tabulator Tree Demo</title>
</head>

<body>
  <h3>Table 1</h3>
  <button type='button'>Click me to replace 24 mph to 200mph silently</button>
  <div id='table'></div>


</body>

</html>

是否可以在没有自动 collapsing/expanding 树的情况下替换具有数据树的 table 中的数据？

Is it possible to replace the data in a table that has a data tree without automatically collapsing/expanding the tree?

javascript

tabulator