2015-11-02 126 views
0

在我的動態視圖面板中,我需要有可排序的列。問題在於對列進行排序時,它將重新提交XPage並刷新整個內容。有沒有辦法在不提交整個頁面的情況下僅在動態視圖面板上進行排序?另外,如果所選視圖爲空,我想隱藏該控件。Xpages:動態視圖面板 - 排序

這裏是我的代碼:

<xp:panel id="searchPanel"> 
      <xp:table styleClass="table table-condensed" style="width:auto"> 
       <xp:tr> 
        <xp:td style="border-top:0px" styleClass="text-nowrap" id="searchColumn"> 
         <xp:inputText id="inputText1" value="#{viewScope.searchterm}" styleClass="form-control"></xp:inputText> 
         <xp:link escape="true" text="" id="searchLink"> 
          <i class="fa fa-search" style="margin-left:5px"></i> 
          <xp:eventHandler event="onclick" refreshMode="partial" immediate="false" submit="true" refreshId="ddPanel"> 
           <xp:this.action><![CDATA[#{javascript:var pager:com.ibm.xsp.component.xp.XspPager = getComponent("pager"); 
pager.gotoFirst();}]]></xp:this.action> 
          </xp:eventHandler> 
         </xp:link> 
         <xp:link escape="true" text="" id="clearSearchLink"> 
          <i class="fa fa-times" style="margin-left:5px"></i> 
          <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="ddPanel" onComplete="showHideTableToggle()"> 
           <xp:this.action><![CDATA[#{javascript:viewScope.remove("searchterm");}]]></xp:this.action> 
           <xp:this.script><![CDATA[dojo.byId(getID("inputText1")).value=""]]></xp:this.script> 
          </xp:eventHandler> 
         </xp:link> 
        </xp:td> 
        <xp:td style="border-top:0px;padding-left:20px"> 
         <xp:link escape="true" id="addButton" onclick="return false;" styleClass="btn btn-primary" style="color:rgb(255,255,255)" text="Add"> 
          <i class="fa fa-plus" style="margin-right:5px"></i> 
          <xp:eventHandler event="onclick" submit="false" refreshMode="complete"> 
           <xp:this.script><![CDATA[XSP.openDialog(getID('contentDialog'),'',{"docID":"","newDoc":"false"});]]></xp:this.script> 
          </xp:eventHandler> 
         </xp:link> 
        </xp:td> 

       </xp:tr> 
      </xp:table> 
      <xp:panel id="ddPanel"> 
       <xe:dynamicViewPanel id="mainView" width="100%" dataTableStyleClass="table table-bordered table-condensed table-hover" rows="10" var="myView" 
        showColumnHeader="true" customizerBean="com.hcl.igdm.PickerViewBeanMainViews" partialRefresh="true" refreshId="ddPanel" 
       > 
        <xe:this.data> 
         <xp:dominoView var="mainDataView" dataCache="nodata"> 
          <xp:this.viewName><![CDATA[#{javascript:sessionScope.showView.split("~")[0]}]]></xp:this.viewName> 
         </xp:dominoView> 
        </xe:this.data> 
        <xe:this.rowAttrs> 
         <xp:attr name="onClick"> 
          <xp:this.value><![CDATA[#{javascript:return "javascript:myJSFunction();"}]]></xp:this.value> 
         </xp:attr> 
        </xe:this.rowAttrs> 
       </xe:dynamicViewPanel> 
       <xp:pager layout="Previous Group Next" partialRefresh="true" id="pager" for="mainView" title="Pager"></xp:pager> 
      </xp:panel> 
+0

如果您加載JSON數據,但可能比您想要做的更多更改,則可以這樣做。如果只刷新包含視圖控件的面板會發生什麼? –

+0

我正在嘗試做同樣的事情,但它刷新整個頁面。我選擇了partialrefresh = true和refreshid = panel id,但它沒有任何作用。另外,我不確定如何捕獲排序事件服務器端。我一直在使用JSON數據和數據表顯示相同。但是我也需要對視圖進行全文搜索,以便更好地理解視圖並切換到動態視圖面板。 – Arun

+1

我的猜測是,您不必執行全面刷新來執行列排序,但我不確定。我有一段時間沒有這樣做過。請編輯您的問題併發布您的代碼。 –

回答

1

這是一個很久以前,這一問題被置於...但也許答案可以幫助其他人。

您可以將dynamicViewPanel放入一個'dynamic content'容器(來自ExtLib),其中partial event屬性設置爲true。這會將完整的更新事件轉換爲部分刷新事件。

<xe:dynamicContent partialEvents="true"> 
    ... 
</xe:dynamicContent>