javascript - 如何显示里面有复选框的大列表

Question

我一直在开发一些网络应用程序，其中我有一个表格，其中填充了一些数据，为了选择应该显示的数据，我使用了过滤器。
这些过滤器是<div>包含一个 <div> 的元素每个过滤器选项如下:

<div id="selectedFilter">
  <div>
    <input id="selectedFilter1" type="checkbox" name="selectedFilter" multiple="true" value="1" checked="true">
    <label for="selectedFilter1" title="Option1">Option1</label>
  </div>
  <div>
    <input id="selectedFilter2" type="checkbox" name="selectedFilter" multiple="true" value="2" checked="true">
    <label for="selectedFilter2" title="Option2">Option2</label>
  </div>
<div>

选项的 html 代码(整个 <div> 与 <label> 和 <input> )在我的 Java 后端生成并像这样传输到网站:

$.post("filter", result, function(data) {
  $("#selectedFilter").html(data);
});

现在我的问题:

过滤器的数量有时会变得非常高(例如 800 行)并且页面上还有两个过滤器具有大致相同数量的选项。有了这样的数据负载，浏览器开始挂起并变得无响应。

为了解决这个问题，我尝试使用虚拟滚动，因为这似乎是将浏览器缓存保持在良好水平的最合理方法。但是如果我再次渲染整个 div，这会清除复选框。

最重要的是，我需要知道哪些复选框被选中，即使它们不在视口(viewport)中，因为过滤器以级联的方式影响彼此的可能选项(Filter1 影响 Filter2 影响 Filter3)。如果一个过滤器发生变化(某些内容被选中)，随后的一个(或两个)过滤器将被清除并从 Java 后端请求新数据。

问题:
是否有一个支持虚拟滚动但自行管理复选框的 js 库，以便我可以只提取选中的复选框？像这样。

我可能会尝试保存选择了哪个复选框，但我担心如果显示的选项匹配，无论是否在每个滚动中都选中它们，滚动的虚拟化可能会非常慢。

有没有人有建议或经验？

Answer 1

你说你有 800 个过滤器，你真的认为任何用户都会同时看到所有这 800 个或更多过滤器。最好的办法是对过滤器进行分类，然后在单击类别时加载它们。

虚拟滚动是个好主意。您需要附加过滤器数据，因为 .html() 会覆盖您之前的内容。

 $("#selectedFilter").append(data);