9

我计划使用伟大的同位素插件来显示联系人列表，然后允许它们被过滤。我遇到的问题是它适用于小型数据集，但我不确定将其扩展到 1000 多条数据的最佳方法。

到目前为止，我的想法是：

  • 加载一个随机子集，然后在单击过滤器时向其添加节点以填补空白
  • 在用户滚动时加载更多节点
  • 分页结果
  • 在选择足够的过滤器以使数字低于预定义的阈值之前，不显示联系人。

我不确定这些是否能正常工作，我希望其他人也遇到过这种情况并能给我一些想法。

4

3 回答 3

7

您描述的情况很常见：如何让您的用户访问比他们一次可能详细看到的更多数据。

有几种方法可以回答问题，正确答案完全是主观的：这取决于您的用户试图查看或处理联系人的内容。在您真正获得令人满意的解决方案之前，您需要知道用户将使用联系人做什么。

只是猜测（但你会比我更清楚！），我希望他们正在做两件事：

  • 查找：寻找一个特定的联系人，他们已经知道他们的名字/句柄。
  • 探索：寻找一个特定的联系人，但他们不太记得他们的名字/名字。或者他们只是在浏览。

如果您对所有解决方案进行过滤，那么 Lookup 目标就很容易实现。探索目标是您要设计的目标：

  • 随机子集：这不是一种很好的浏览方式，因为您基本上只剩下一个子集可供浏览，然后您必须明确过滤以查看任何新内容。当您不确切知道要查找的内容时，很难过滤。
  • 无限滚动：现在似乎是一种流行的解决方案。我觉得它很麻烦，尤其是当您“无限”滚动浏览 1000 多个联系人时。可能不适合探索目标。
  • 分页：也很麻烦 - 但如果分页与字母排序相关联，这可能会很好。
  • 阈值限制：所以……仅仅依靠过滤？在某些极端情况下，这可能很糟糕，其中用户应用了一个过滤器并且他们看不到任何东西 b/c 仍然没有达到阈值（可能有很多人姓约翰逊，这就是你搜索）。另外，我认为当您不知道自己在寻找什么时，浏览能力很重要。

我想如果我站在你的立场上，我会介绍一些联系人聚类。我怀疑 1000 多个联系人是一个很大的性能问题（少说一百万！），所以 10000+ 确实是一个用户限制：他们不能一次查看 1000 个联系人。

我建议引入一些聚类，可能是通过姓氏或姓氏和名字。然后向用户展示一种钻入一个集群但折叠所有其他联系人的方法，这样他们就不会立即可见。手风琴/rollodex 范式中的一些东西。这会让您的用户产生他们正在与“所有联系人”一起工作的错觉。可能为每个集群引入一个最小数量，这样如果集群足够小，您就不必费心展示它（即，为什么要为 2 个或 3 个或 5 个联系人显示一个集群 - 只显示联系人）。随着过滤器的应用，这些簇会融化掉。

于 2012-02-13T13:47:30.023 回答
1

采用 Read Through Cache 的想法，例如：

  • 创建一个可以加载最多 100 个（或任何可配置数量）元素的批次的方法。它会：
    • 在缓存（主键为元素 ID 的 JS 数组）中搜索过滤后的项目
    • 通过 AJAX 请求过滤的项目
    • AJAX 返回的项目将被添加到缓存中
    • AJAX 返回的项目也将添加到 DOM 底部的“加载”区域（见下文），创建的 DIV 的 id 作为元素的主键
    • 服务器将发送多达 100 个元素。如果没有过滤器，它将发送下一个尚未发送的元素。您需要跟踪加载的元素。如果服务器端（即会话）缓存数据的大小很关键，您可以只跟踪连续发送的最高 ID（即，如果您在第一批 ID 1、2、3、6、9、10 中发送，那么最高 ID 为 3，因此下次您将从 4 发送，...，因此您在会话中只保留一个值）
  • 创建一个可以将缓存的 DIV 移入/移出同位素容器的方法
  • onDomReady 使用上述方法加载并按自然顺序显示前 20 个元素（在您的情况下，它将按名称的字母顺序）。它可以是 20 个元素或 50 个或任何...
  • 在后台，通过 AJAX 循环加载 100 个所有元素。

装载区域可以很简单：

<html>
  <body>
    <!-- the page stuff -->
    <div id="loader" style='display:none'>
      <!-- all elements are loaded here -->
      <div class="item">...</div>
    </div>
  </body>
</html>

这样你就可以在 DOM 中逐步加载所有元素，并且只显示需要的内容。

于 2012-02-11T14:51:03.563 回答
1

在添加和排列大量同位素项目时，我的性能很差，这是因为我是增量添加项目而不是批量添加项目。这应该是一个显而易见的选择，但我忽略了一些事情。

请务必使用数组或元素列表，而不是单独加载或删除。

incomingData=['<div>a</div>','<div>b</div>'];
elements=[];

jQuery.each(incomingData,function(ind,val){
    var element = jQuery(val).get(0);
    //$container.isotope('insert', element); //resource heavy
    elements.push(element); 
});

$container.isotope( 'insert', elements ); //less processing
于 2015-02-11T18:30:58.393 回答