时间戳

首页 > 解决方案 > 是否可以在不自动折叠/展开树的情况下替换具有数据树的表中的数据？

javascript - 是否可以在不自动折叠/展开树的情况下替换具有数据树的表中的数据？

问题描述

我正在尝试创建一个可由用户在 Web 应用程序中编辑的表。该表中有几个数据树。每次用户在表中编辑某些东西时，都会在表table.replaceData(data)上调用。replaceData 的想法是，它会“静默”地替换表中的所有数据，而不改变滚动位置、排序或过滤……但是，它也会将表中所有数据树的展开状态重置为它们的初始状态。也就是说，如果dataTreeStartExpanded === true, 那么调用replaceData将展开表中的所有数据树。如果dataTreeStartExpanded === false，则调用replaceData将折叠表中的所有数据树。这是不可取的，因为用户可能正在编辑其中一个数据树的子元素，如果他们想查看他们的更改，或者移动到下一个要更改的元素，他们必须每次手动重新展开数据树他们做出改变。

这是使用制表器版本 4.2.1。我已经尝试过清理表，然后调用setDataorreplaceData但是，当然，这会导致同样的问题。我觉得这个问题可以通过使用该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 的 _children 属性dataTree，而 otherDataWithNestedElements 是一组非常相似但略有不同的数据。即使在单击按钮时展开其中一个数据树，在单击按钮后它也会折叠，因为dataTreeStartExpanded设置为 false。

这是一个 JSFiddle，其中包含一个更加充实和生动的示例。

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

标签： javascripttabulator

解决方案

使用反应性 

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

推荐阅读