是否可以在不自动折叠/展开树的情况下替换具有数据树的表中的数据? [英] Is it possible to replace the data in a table that has a data tree without automatically collapsing/expanding the tree?

问题描述

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

I'm trying to create a table that can be edited by the user in a web application. The table has several data trees in it. Every time the user edits something in the table, table.replaceData(data) is called on the table. The idea of replaceData is that it will "silently" replace all of the data in the table without changing the scroll position, sort or filtering..., however, it will also reset the expansion state of all data trees in the table to their initial state. That is, if dataTreeStartExpanded === true, then calling replaceData will expand all of the data trees in the table. If dataTreeStartExpanded === false, then calling replaceData will collapse all data trees in the table. This is undesirable because the user might be editing a child element of one of those data trees, and if they want to see their change, or move on to the next element to change, they have to manually re-expand the data tree every time they make a change.

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

This is using Tabulator version 4.2.1. I've already tried clearing the table, then calling setData or replaceData but, of course, this results in the same problem. I get the feeling that this problem could be solved by using the updateData method, but I'm trying to avoid that as our rows don't have indices, and adding them would require backend changes or strange data manipulation in JS.

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

Here is a brief code snippet:

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.

Where someDataWithNestedElements is a properly formatted JS array with a _children property for Tabulator's dataTree, and otherDataWithNestedElements is a very similar, but slightly different set of data. Even if one of the data trees is expanded at the time the button is clicked, it will collapse after the button is clicked because dataTreeStartExpanded is set to false.

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

Here's a JSFiddle with a more fleshed-out and live example.

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

I would expect replaceData to preserve the expansion state of a data tree, much like it preserves scroll position, sorting, and filtering. Instead, it expands/collapses data trees automatically depending on the truth value of dataTreeStartExpanded.

推荐答案

使用 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>

这篇关于是否可以在不自动折叠/展开树的情况下替换具有数据树的表中的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！