如何显示包含复选框的大列表

How to display a large list with checkboxes inside

本文关键字：复选框 列表 包含 何显示 显示      更新时间：2023-09-26

我一直在开发一些Web应用程序，在那里我有一个表格，里面装满了一些数据，为了选择应该显示哪些数据，我使用了过滤器
这些过滤器是<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代码（包含<label>和<input>的整个<div>）是在我的java后端中生成的，并被传输到站点，如下所示：

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


现在我的问题是：

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

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

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

问题：
有没有一个js库支持虚拟滚动，但它自己管理复选框，这样我就可以提取选中的复选框？像这样的东西。

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

有人有建议或经验吗？

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

虚拟滚动是个好主意。您需要附加筛选器数据，因为.html（）正在覆盖您以前的内容。

 $("#selectedFilter").append(data);
相关文章：