Handsontable - 隐藏特定行(按单元格值)
Handsontable - hide specific row ( by cell value)
如何隐藏 Handson 中的特定行table。
我在 DOM 中有按钮,每个按钮都应该隐藏特定的行。
例如:单击带有 class `alarm' 的按钮应该隐藏第二列值为 'alarm'.
的所有行
现在我做丑事。每个按钮单击我循环遍历我的 table 数据并使用 'alarm' 删除数据,然后加载数据并呈现 table。但我不能那样做,因为我有一些动态数据,所以在渲染它们消失之后。
eveGrid.loadData(tableData);
eveGrid.render();
动态隐藏行是一项相当复杂的任务,Handosntable 文档中没有记录。但是,有很多功能可用于我们自己实现。事实上,上周我不得不这样做,所以我可以与你分享一个可能的方法。它真的很简单并且与您的解决方案相似,顺便说一下,它并不难看!
您想做的是保留两份数据副本。我们可以调用第一个 data
,第二个 activeData
。最初,它们彼此相等。现在这部分很棘手,不容易掌握,但你必须确保这两个数组是不同的对象,但具有相同的参考元素。这意味着数组本身不是 clones
,因此相等性测试将失败。但是,它们的元素是克隆。您的 activeData
元素只是对 data
.
上元素的引用
设置完成后,隐藏行就很简单了。您的点击应该浏览 data
并根据您要显示的匹配行设置新的 activeData
。然后用类似的东西更新 handsontable:
hotInstance.updateSettings({data: activeData});
就是这样!请注意,更新方法将自动触发 render()
.
告诉我进展如何,我很好奇其他人是否可以使用这种方法。
如何隐藏 Handson 中的特定行table。
我在 DOM 中有按钮,每个按钮都应该隐藏特定的行。 例如:单击带有 class `alarm' 的按钮应该隐藏第二列值为 'alarm'.
的所有行现在我做丑事。每个按钮单击我循环遍历我的 table 数据并使用 'alarm' 删除数据,然后加载数据并呈现 table。但我不能那样做,因为我有一些动态数据,所以在渲染它们消失之后。
eveGrid.loadData(tableData);
eveGrid.render();
动态隐藏行是一项相当复杂的任务,Handosntable 文档中没有记录。但是,有很多功能可用于我们自己实现。事实上,上周我不得不这样做,所以我可以与你分享一个可能的方法。它真的很简单并且与您的解决方案相似,顺便说一下,它并不难看!
您想做的是保留两份数据副本。我们可以调用第一个 data
,第二个 activeData
。最初,它们彼此相等。现在这部分很棘手,不容易掌握,但你必须确保这两个数组是不同的对象,但具有相同的参考元素。这意味着数组本身不是 clones
,因此相等性测试将失败。但是,它们的元素是克隆。您的 activeData
元素只是对 data
.
设置完成后,隐藏行就很简单了。您的点击应该浏览 data
并根据您要显示的匹配行设置新的 activeData
。然后用类似的东西更新 handsontable:
hotInstance.updateSettings({data: activeData});
就是这样!请注意,更新方法将自动触发 render()
.
告诉我进展如何,我很好奇其他人是否可以使用这种方法。