Handsontable - 隐藏特定行（按单元值）

如何隐藏Handsontable中的特定行。Handsontable - 隐藏特定行（按单元值）

我在DOM中有按钮，它们每个都应该隐藏特定的行。例如：点击类别为'alarm'的按钮应该显示所有第二列值为'alarm'的行。

现在我做丑陋的事情。每个按钮点击我循环overy我tableData和删除数据与'报警'，然后只加载数据和渲染表。但我不能这样做，因为我有一些动态数据，所以在呈现他们的消失之后。

eveGrid.loadData(tableData); 
eveGrid.render();

来源

2015-08-13 Sko

您可以在表格生成后共享一些HTML吗？我可能会知道一个解决方案，但如果我不知道它是什么样子的话，就不能使它适用于您的代码。 – Rvervuurt

你可能也可以分享一个jsfiddle吗？渲染后的HTML看起来并不重要，因为如果您试图修改它，Handsontable会立即覆盖它（它是无状态的，有点像React.js组件）。 – ZekeDroid

动态隐藏行是一项相当复杂的任务，在Handosntable文档中没有记录。但是，有很多功能可用于自己实现它。事实上，我不得不在上周做到这一点，所以我可以与你分享一个潜在的方法。它非常简单，类似于您的解决方案，这种方式并不难看！

你想要做的是保存你的数据的两个副本。第一个我们可以打电话data，第二个activeData。最初，他们都相互平等。现在这部分是棘手的，并不容易掌握，但你必须确保这两个数组是不同的对象，但具有相同的引用元素。这意味着数组本身不是clones，所以平等测试会失败。但是，他们的元素是克隆。您的activeData元素仅仅是对data上元素的引用。

一旦我们有了这个设置，实现隐藏行就很简单了。您的点击应通过data查找，并根据您想要显示的匹配行设置新的activeData。然后只需更新可持续发展类似的东西：

hotInstance.updateSettings({data: activeData});

就是这样！请注意，该更新方法将自动触发render()。

让我知道它是怎么回事，我很好奇看看其他人是否可以使用这种方法。

来源

2015-08-13 16:08:52 ZekeDroid

我会试一试:)但我有一些Ajax数据（地理位置），所以它会有点困难。 – Sko

好的。我测试了它，它工作。我在全局变量中缓存了oryginal数据。因此，在每次隐藏行尝试之后，我遍历oryginalData并将所有要显示的行推送到newData。但仍然AJAX数据是问题：/ – Sko

你是什么意思由ajax数据是一个问题？ – ZekeDroid

Handsontable - 隐藏特定行（按单元值）

回答

相关问题