Question

我一直在研究一些webapp，我有一个表填充了一些数据，并选择应该显示哪些数据我使用过滤器。
这些过滤器是<div> elemtens，每个过滤器选项包含一个<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行），页面上还有两个过滤器具有大约相同数量的选项。有了这样的数据加载，浏览器就会开始挂起并变得无法响应。

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

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

问题：
是否有一个js-library支持虚拟滚动但是自己管理复选框，所以我只能提取已检查的复选框？这样的事情。

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

有人有建议或经验吗？

Answer 1

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

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

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

如何在

1 个答案: