我正在尝试创建一个用户可以在 Web 应用程序中编辑的表格。该表中有几个数据树。每次用户在表中编辑内容时，都会在表上调用 table.replaceData(data)。 replaceData 的想法是它将 "silently" replace all of the data in the table without changing the scroll position, sort or filtering...但是，它也会将表中所有数据树的扩展状态重置为初始状态。也就是说，如果 dataTreeStartExpanded === true，则调用 replaceData 将展开表中的所有数据树。如果 dataTreeStartExpanded === false，则调用 replaceData 将折叠表中的所有数据树。这是不可取的，因为用户可能正在编辑其中一个数据树的子元素，如果他们想看到他们的更改，或者移动到下一个要更改的元素，他们必须每次都手动重新扩展数据树他们做出了改变。
这是使用 Tabulator 版本 4.2.1。我已经尝试清除表格，然后调用 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 保留数据树的扩展状态，就像它保留滚动位置、排序和过滤一样。相反，它会根据 dataTreeStartExpanded 的真值自动展开/折叠数据树。
最佳答案
// 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>关于javascript - 是否可以在不自动折叠/伸展树(Splay Tree)的情况下替换具有数据树的表中的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56909200/