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 - 隱藏特定行（按單元值）

回答

相關問題