XPage ViewColumnHeader上的Javascript事件排序

最近我正在使用XPages，並且遇到了容器控件中的數據排序問題。我已經能夠通過多種解決方案，查看面板，數據表和重複控制來很好地顯示數據，但排序似乎只能通過視圖面板才能正常工作。（做了一些研究並意識到Java.Util.TreeMap爲其他容器提供了一些實用程序）。但是，我遇到的問題是視圖列標題添加的圖像排序不是我想要的。XPage ViewColumnHeader上的Javascript事件排序

所以，我的問題是這樣的：是否有任何方法來改變XPages尋找這些圖像的位置（知道我可以通過Image.ViewColumnHeaderSort在該圖像標籤上設置一個類沒有幫助，因爲沒有訪問權限事件），還是我可以訪問事件，以設置一個範圍變量，我可以用它來計算我TH元素上的一個類。

由於提前，亞倫制動 4CTechnologies

來源

2012-11-29 Aaron Brake

考慮在定製程序bean中使用DynamicView控件。 –

我曾經在DynamicView中看過一個視圖，但我不知道「Customizer Bean」是什麼意思。你能詳細說明嗎？ –

看看這個：https：//github.com/jesse-gallagher/Domino-One-Offs/tree/master/mcl/reports你可以把這個類放到你的NSF中，並把Customizer的bean屬性設置爲Dynamic view control修改它的渲染。 –

下面是此問題的方法，它使用的URL參數用於排序的視圖面板的列。

實施例的XPage：

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
    <xp:this.resources> 
     <xp:script src="/jssViewSort.jss" clientSide="false"></xp:script> 
    </xp:this.resources> 

    <xp:viewPanel rows="30" id="viewPanel2"> 
     <xp:this.facets> 
      <xp:pager partialRefresh="true" layout="Previous Group Next" 
       xp:key="headerPager" id="pager2"> 
      </xp:pager> 
     </xp:this.facets> 
     <xp:this.data> 
      <xp:dominoView var="view1" viewName="_YOUR_VIEW_"></xp:dominoView> 
     </xp:this.data> 
     <xp:viewColumn columnName="Form" id="viewColumn3"> 
      <xp:viewColumnHeader value="Form" id="viewColumnHeader3" iconSrc="#{javascript:getViewSortIcon(this)}"> 
      <xp:this.attrs> 
        <xp:attr name="onclick"> 
         <xp:this.value><![CDATA[#{javascript:getViewSortLink(this)}]]></xp:this.value> 
        </xp:attr> 
       </xp:this.attrs> 
      </xp:viewColumnHeader> 
     </xp:viewColumn> 
    </xp:viewPanel> 

</xp:view>

使用的視圖具有名爲「形式」一個可排序的列，在兩個方向上排序。

這裏是SSJS庫，未優化和無證：

/** 
* returns a link for sorting a view panel 
* 
* @author Sven Hasselbach 
* @version 0.1 
*/ 
function getViewSortLink(colHeader:com.ibm.xsp.component.xp.XspViewColumnHeader){ 

    var col:com.ibm.xsp.component.xp.XspViewColumn = colHeader.getParent(); 
    var vp:com.ibm.xsp.component.xp.XspViewPanel = col.getParent(); 
    var ds:com.ibm.xsp.model.domino.DominoViewData = vp.getDataSource(); 
    var curSortOrder = vp.getDataSource().getSortOrder(); 

    var sortCol = context.getUrlParameter("sortColumn"); 
    var sortOrder = context.getUrlParameter("sortOrder"); 

    if(sortCol === col.getColumnName()){ 
     if(curSortOrder === null || curSortOrder === "") 
      sortOrder = "ascending"; 

     if(curSortOrder === "ascending") 
      sortOrder = "descending"; 

     if(curSortOrder === "descending") 
      sortOrder = "" 

    }else{ 
     sortOrder = "ascending"; 
     sortCol = col.getColumnName(); 
    } 

    return "window.location='" + context.getUrl().getPath() + "?sortColumn=" + sortCol + "&sortOrder=" + sortOrder + "'"; 
} 

/** 
* returns a view icon for sorting 
* 
* @author Sven Hasselbach 
* @version 0.1 
*/ 
function getViewSortIcon(colHeader:com.ibm.xsp.component.xp.XspViewColumnHeader){ 

    var col:com.ibm.xsp.component.xp.XspViewColumn = colHeader.getParent(); 
    var vp:com.ibm.xsp.component.xp.XspViewPanel = col.getParent(); 
    var ds:com.ibm.xsp.model.domino.DominoViewData = vp.getDataSource(); 
    var curSortOrder = vp.getDataSource().getSortOrder(); 

    var sortCol = context.getUrlParameter("sortColumn"); 

    if(sortCol !== col.getColumnName()) 
     return "http://www.google.de/images/icons/product/chrome-48.png"; 

    if(curSortOrder === "ascending") 
     return "https://www.google.com/intl/de/images/icons/feature/alert-b42.png" 

    if(curSortOrder === "descending") 
     return "https://www.google.com/intl/de/images/icons/product/calendar-42.png"  

    return "http://www.google.de/images/icons/product/chrome-48.png"; 

}

的圖像可以用CSS來調整。

希望這會有所幫助！

來源

2012-11-30 11:46:47

謝謝Sven。這是我嘗試做的一個很好的開始，我很欣賞這一努力。我一直抱着希望，有人會告訴我「這是簡單的方法來做到這一點」，但那麼......那將是XPages，是吧？ –

XPage ViewColumnHeader上的Javascript事件排序

回答

相關問題