滾動到樹中的選定節點Primefaces

我創建了一棵樹，並希望通過過濾器爲所選節點滾動。作爲例子在互聯網上的jsfiddle下面發現：TreeNodeJsFiddle 滾動到樹中的選定節點Primefaces

我的代碼：

<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的例子？

來源

2015-10-14 Débora Cristina

你得到了正確的客戶端ID嗎？是不是所有'h：form'或其他命名容器中的東西都是？你有這個部分'apFilter：tree：'檢查元素在html中嗎？ – Geinmachi

我得到了這部分apFilter：樹使用螢火蟲和selectedNode.getRowKey（）是由節點路徑生成的節點的關鍵。 –

嘗試一個虛擬測試，將'prependId =「false」'添加到'h：form'和'searchNode'方法的scrollTo內部，例如'「apFilter：tree：3」'。所有這些都是爲了避免ID問題。 – Miguel

我用

<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); 
}

來源

2015-11-25 17:13:19 Xsires

應該在沒有scrollPanel的情況下工作 – Kukeltje

滾動到樹中的選定節點Primefaces

回答

相關問題