Question

我正在尝试使用PrimeFaces库中的Tree组件。但是由于大量数据，我不得不延迟加载它。我遵循了一个tuto来做到这一点（http://blog.disy.net/primefaces-lazy-tree/），但是加载需要15秒（而不是23秒）。我是否在此tuto或代码中缺少某些内容？而且我不能这样，因为15s对于用户来说太长了……下面的代码

public interface TreePodeFindWithParent {

List<VArboParObjectifsParents> findActiviteWithParent(Integer parentId); 

}

延迟加载类中的方法

public class PodeLazyTreeNode extends DefaultTreeNode
{
...
...
public PodeLazyTreeNode(VArboParObjectifsParents data, TreePodeService service)
{
super(vArboParObjectifsParents.class.getSimpleName(), data, null);
this.service = service;
}

...

private void ensureChildrenFetched() 
{
    if (!childrenFetched)
    {
        childrenFetched = true;
        if ((VArboParObjectifsParents)getData() != null)
        {
            Integer parentId = ((VArboParObjectifsParents)getData()).getIdRoot();

            List<PodeLazyTreeNode> childNodes = service.findActiviteWithParent(parentId).stream().map(item 
                    -> new PodeLazyTreeNode(item, service)).collect(Collectors.toList());

            super.getChildren().addAll(childNodes);
        }

    }
}

服务中的方法

public class TreePodeService implements Serializable, TreePodeWithParent
{
...
...
@Inject
private PodeArboParObjectifsParentsDao podeArboObjParentDao;
...
@Override
public List<VArboParObjectifsParents> findActiviteWithParent(Integer parentId) {
    // TODO Auto-generated method stub
    return podeArboObjParentDao.findByIdParent(parentId);
}

DAO（请求通过Apache DeltaSpike的数据模块完成）

@Repository(forEntity=VArboParObjectifsParents.class)
public interface PodeArboParObjectifsParentsDao extends EntityRepository<VArboParObjectifsParents, Integer>
{
List<VArboParObjectifsParents> findByIdParent(Integer idParent);
List<VArboParObjetcifsParents> findByIdTypeActivite(Integer idType);
}

在视图中调用方法

@PostConstruct
public void initView()
{
    initArbo();
}


public void initArbo()
{
    List<VArboParObjectifsParents> vArbos = treePodeService.getPodeArboObjParentDao().findByIdTypeActivite(1);
    this.root = new PodeLazyTreeNode(null, treePodeService);
    for (int i = 0; i < vArbos.size(); i++)
    {
        root.getChildren().add(new PodeLazyTreeNode(vArbos.get(i), treePodeService));
    }
}

UI

<p:tree value="#{testView.root}" var="_node" >
                <p:treeNode type="VArboParObjectifsParents">
                    <h:outputText value="#{_node}"/>
                </p:treeNode>

             </p:tree>

谢谢。

Answer 1

问题原因

从PrimeFaces Showcase：

树有两种模式，在客户端模式下，所有节点都可在客户端使用，而在ajax模式下，仅扩展节点可用。

这意味着在树可见之前，树的所有节点都已加载到浏览器中。您拥有的节点越多，加载整个树所需的服务调用就越多。页面上还提示您linked：

n + 1个问题

到目前为止，我们的实现非常简单。但是，这确实给BackendService带来了很大压力。每当扩展节点时，都会为扩展节点的每个子节点调用BackendService.findWithParent（...）。之所以称为n + 1问题，是因为您需要n + 1次服务调用才能提供扩展的节点。

解决方案

通过设置dynamic="true"（并且可以选择cache="false"来始终重新加载子节点）来使用树的ajax模式，并通过在视图中调用侦听器来加载/删除子节点。

也请不要通过构造函数指定服务。我认为您发现的教程非常糟糕。将服务注入支持bean并在其中加载节点数据。

示例：

手镯（UI）

<p:tree cache="false"
        dynamic="true"
        value="#{testView.root}" var="_node">

  <!--load/update nodes on demand-->
  <p:ajax event="expand"
          listener="#{testView.onNodeExpand}" />
  <p:ajax event="collapse"
          listener="#{testView.onNodeCollapse}" />

  <p:treeNode type="VArboParObjectifsParents">
    <h:outputText value="#{_node}"/>
  </p:treeNode>
</p:tree>

后备豆（查看）

@Named
@ViewScoped
public TestView implements Serializable {

    @PostConstruct
    public void initView()
    {
        initArbo();
    }


    public void initArbo()
    {
        List<VArboParObjectifsParents> vArbos = treePodeService.getPodeArboObjParentDao().findByIdTypeActivite(1);
        this.root = new PodeLazyTreeNode(null);
        for (int i = 0; i < vArbos.size(); i++)
        {
            PodeLazyTreeNode childNode = new PodeLazyTreeNode(vArbos.get(i), this.root);
            addDummyTreeNode(childNode);
        }
    }

    public void onNodeExpand(NodeExpandEvent event) {
        final TreeNode expandedTreeNode = event.getTreeNode();

        // load child data from service
        // ...
        if (/* child data available */) {
            // create child tree nodes with dummy tree node
            // ...
            expandedTreeNode.setExpanded(true);
        } else {
            // remove dummy tree nod to mark as leaf
            // ...
            expandedTreeNode.setExpanded(false);
        }
    }

    public void onNodeCollapse(NodeCollapseEvent event) {
        final TreeNode collapsedTreeNode = event.getTreeNode();

        // remove child nodes and add dummy tree node
        // ...

        collapsedTreeNode.setExpanded(false);
    }

    /**
     * Adds a dummy {@link TreeNode} to the specified parent node. The dummy is
     * used to prevent nodes with child nodes from being rendered as leaf nodes
     * until they are expanded. The dummy will be removed when the parent node
     * is expanded the first time.
     *
     * @param parentTreeNode
     */
    private void addDummyTreeNode(TreeNode parentTreeNode) {
        final TreeNode dummyNode = new DefaultTreeNode("Loading...",
                parentTreeNode);
    }

}

如何防止立即加载完整的数据库响应树？

1 个答案:

问题原因

解决方案