滚动时加载列表视图

发布于 2024-10-30 16:10:26 字数 517 浏览 0 评论 0原文

我在使用 ListView 显示文档列表的应用程序时遇到问题: 当前的设计如下:

  • 创建一个 ListView,其中项目数 = nrOfdocuments/50;将 ListView 添加到滚动条

  • 对于此 ListView 的每个项目,都会创建一个新面板 Batch(代表一批文档 - 最多 50 个文档);

  • 此 Batch 类创建另一个最多包含 50 个项目的 ListView(每个项目代表一个包含文档详细信息的面板 - 仅当滚动到达项目时才会加载项目)

例如: - 对于总共 1000 个文档:将创建 20 个 Batch 类型的对象 =>将创建 20 个 ListView 对象

问题是尝试加载大量文档 (> 10000) 将因 Java 内存不足异常而结束。 我想改进这个设计,只保留一个 Batch 加载到内存中一次(因此最多仅 50 个文档),并清除以前创建的不再使用的所有其他 ListView 对象。 您有什么想法可以帮助我吗?

I have a problem with an application that displays a list of documents using ListView:
The current design is the following:

  • a ListView is created with nr of items = nrOfdocuments/50; the ListView is added to a scroller

  • for each item of this ListView a new panel Batch is created (which represents a batch of documents - max 50 documents);

  • this Batch class creates another ListView with maximum 50 items (each item representing a panel with a document's details - items are loaded only when the scroll reaches them)

For example:
- for a total number of 1000 documents: 20 objects of type Batch will be created => 20 ListView objects will be created

The problem is that trying to load large amounts of documents (> 10000) will end with an Java out of memory exception.
I want to improve this design, by keeping only one Batch loaded in memory once (so only max 50 documents) and to clear all the other ListView objects previously created which are not used anymore.
Do you have any ideas that can help me?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

怀中猫帐中妖 2024-11-06 16:10:26

您只能加载 3 个批次:

  • 当前批次之前的批次
  • 当前批次
  • 当前批次之后的批次

当用户向上/向下滚动列表时,您只能加载这三个批次(当用户输入另一个批次时,使用以下命令重新加载批次)他们输入的批次作为新的当前批次)。

要使滚动条显示为好像列表中充满了旧批次,只需插入带有空文档的虚拟批次,例如

  • 虚拟批次 1
  • 虚拟批次 2
  • 当前批次之前的一批
  • 当前批次
  • 当前批次之后的批次

您遇到的唯一问题是如果用户在 ajax 有时间重新加载批次之前快速搜索列表。这不容易解决,但可以通过让虚拟批次显示每个文档条目的加载消息来向用户传达数据正在加载的信息。

You could only load 3 batches worth:

  • One batch before the current batch
  • The current batch
  • The batch after the current batch

As the user scrolls up/down the list you could only load these three batches (as a user enters another batch reload the batches with the batch they entered as the new current batch).

To make the scrollbar display as if the list was full of old batches just insert dummy batches with empty documents e.g.

  • Dummy batch 1
  • Dummy batch 2
  • One batch before the current batch
  • The current batch
  • The batch after the current batch

The only problem you would have is if the user searched up the list quickly before the ajax has time to reload the batches. This can't easily be solved, but it can be communicated to the user that the data is being loaded by having the dummy batches display a loading message for each document entry.

半边脸i 2024-11-06 16:10:26

不确定您想要完成什么...

您是否想用一组新的 50 个文档替换当前的 50 个文档,或者您想保留旧文档进行滚动...

如果是前者,您的方法不会这似乎不是我第一个想到的……

private class MyPanel extends Panel {
    private ListView lv;

public MyPanel(String id) {
    super(id);
    List list = new ArrayList();
    lv = new ListView("lv", list) {

        @Override
        protected void populateItem(ListItem item) {
            //display the document
        }

    };

    add(lv);

    add(new AjaxButton("next", new Form("form")) {

        @Override
        protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
            //retrieve the next Batch
            List newList = new ArrayList();
            lv.setModelObject(newList);
            target.addComponent(MyPanel.this);
        }

    });
}

}

我的脑海中隐约浮现出类似这样的东西。您可以像以前一样来回“滚动”。

除此之外,我会考虑使用 DataView 而不是 ListView,因为它支持开箱即用的分页。

最后一个想法,如果您只是删除对 ListView 的引用而不添加它们(或任何周围的容器,因为中继器无法添加到 AjaxRequestTargets),这将使 gc 有机会清理这些对象,但您会得到重新加载时处理空引用...

Not sure what you're trying to accomplish...

Do you want to replace the current 50 documents with a new set of 50 documents or do you want to keep the old ones for scrolling...

If the former, your approach doesn't seem like the first one I'd think of...

private class MyPanel extends Panel {
    private ListView lv;

public MyPanel(String id) {
    super(id);
    List list = new ArrayList();
    lv = new ListView("lv", list) {

        @Override
        protected void populateItem(ListItem item) {
            //display the document
        }

    };

    add(lv);

    add(new AjaxButton("next", new Form("form")) {

        @Override
        protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
            //retrieve the next Batch
            List newList = new ArrayList();
            lv.setModelObject(newList);
            target.addComponent(MyPanel.this);
        }

    });
}

}

Something vaguely like this would come to my mind. You could 'scroll' back and forth like you did before.

Other than that, I'd think of a DataView instead of a ListView since it supports pagination out of the box.

As a last thought, if you just remove the references to your ListView without adding them (or any surrounding container since repeaters can't be added to AjaxRequestTargets), this would give the gc a chance to clean these objects but then you've got to take care of the null references when reloading...

回眸一遍 2024-11-06 16:10:26

这并不是严格意义上与检票口相关的答案,更多的是对您的用户界面做出假设。

您是否考虑过使用 master-detail UI 模式?

您不必立即维护整个顶级文档及其子文档,而是在列表中显示顶级节点,并在单独的“详细信息”面板中仅显示所选顶级节点的子文档。

在 wicket 中,这相当简单,类似于 onClick 事件更新“详细信息”面板的模型(拉取所选父级的子文档)。

This isn't strictly a wicket-related answer, more one that is making assumptions about your UI.

Have you considered using the master-detail UI pattern?

Instead of maintaining the entirety of the top level documents and their child documents at once, you would instead present the top level nodes in a list, and display only the child documents of the selected top-level node in a separate 'detail' panel.

In wicket, this is fairly straightforward, with something like an onClick event updating the model of the 'detail' panel (which pulls the child documents of the selected parent).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文