滚动到树 Primefaces 中的选定节点答案

【问题标题】：Scroll to selected node in tree Primefaces滚动到树 Primefaces 中的选定节点
【发布时间】：2015-10-14 12:40:38
【问题描述】：

我创建了一棵树，并希望滚动是通过过滤器选择的节点。如下在网上找到的JSFIDDLE示例：TreeNodeJsFiddle

我的代码：

<p:accordionPanel id="apFilter">

<p:remoteCommand name="remoteFilter"
    actionListener="#{mybean.searchNode}"
    update="tree,:form:dataTree, :form:dataTree1, :form:chart" />
<p:outputLabel value="Search: " />
<p:inputText id="filterTree" value="#{myBean.filter}"
    style="width:100px"
    onkeypress="if (event.keyCode == 13) { test(); return false; }" />

<p:outputPanel id="scroll"
    style="width: 100%;height: 100%;overflow: auto;display: block">

    <!-- tree  -->
    <p:tree filter="true" value="#{myBean.root}" var="doc" id="tree"
        style="width:250px; font-size:10px" dynamic="true" cache="false"
        selectionMode="single" selection="#{myBean.selectedNode}">
        <p:ajax event="expand"
            update=":form:dataTree, :form:dataTree1, :form:chart"
            listener="#{myBean.onNodeExpand}" />
        <p:ajax event="select"
            update=":form:dataTree1,:form:dataTree, :form:chart"
            listener="#{myBean.onNodeSelect}" />
        <p:ajax event="unselect"
            update=":form:dataTree,:form:dataTree1,:form:chart"
            listener="#{myBean.onNodeUnselect}" />
        <p:ajax event="collapse"
            update=":form:dataTree1,:form:dataTree, :form:chart"
            listener="#{myBean.onNodeCollapse}" />

        <p:treeNode type="group1" expandedIcon="ui-icon-folder-open"
            collapsedIcon="ui-icon-folder-collapsed">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>

        <p:treeNode type="group2" expandedIcon="ui-icon-folder-open"
            collapsedIcon="ui-icon-folder-collapsed">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>

        <p:treeNode type="group3" icon="ui-icon-document">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>


    </p:tree>
</p:outputPanel>

我尝试按照链接上的建议使用 scrollTo： http://forum.primefaces.org/viewtopic.php?f=3&t=18856 ，但是没有成功。

 public void searchNode() {
    selectedNode = myBeanRN.searchFilter(filter);   
    RequestContext context = RequestContext.getCurrentInstance();
    context.scrollTo("apFilter:tree:"+selectedNode.getRowKey());
}

有没有人知道如何去选择的节点等于jsFiddle的例子？

【问题讨论】：

您的客户 ID 是否正确？不是h:form 或其他命名容器中的所有内容吗？您是否从检查 html 中的元素中得到这部分 apFilter:tree:？
我得到了这部分 apFilter:tree 使用 firebug 和 selectedNode.getRowKey() 是节点路径生成的节点的键。
尝试一个虚拟测试，例如将prependId="false" 添加到h:form 并在searchNode 方法中滚动到硬编码节点，例如"apFilter:tree:3"。所有这些都是为了避免 ID 出现问题。
我使用了 prepend id，但现在的问题是：在滚动面板内，没有移动到选定的节点。并且退出Scroll Panel节点移动到选中节点，但是没有组件树滚动条（树比较大）。

标签： jsf primefaces tree

【解决方案1】：

我用过

 <p:scrollPanel>
 <p:tree>
  ...
 </p:tree>
 </p:scrollPanel>

和选择树元素上的js

var selectedElement = treeWidgetVar.jq.find('span .ui-state-highlight');
if (selectedElement != null && selectedElement != undefined && selectedElement.position() != undefined) {
     var scrollPanel = treeWidgetVar.jq.parent();
     scrollPanel.scrollTop(selectedElement.position().top - scrollPanel.height() / 2);
}

【讨论】：