Question

我最近正在使用XPages，我在容器控件中对数据进行排序时遇到了问题。通过多种解决方案，查看面板，数据表和重复控件，我已经能够很好地显示数据，但排序似乎只能通过视图面板很好地工作。（经过一些研究并意识到Java.Util.TreeMap为其他容器提供了一些实用工具）。但是，我遇到的问题是查看列标题添加用于排序的图像不是我想要的。

所以，我的问题是：是否有任何方法可以更改XPage查找这些图像的位置（知道我可以通过Image.ViewColumnHeaderSort在该图像标记上设置一个类因为无法访问该事件而无效）或者我是否可以访问该事件以便设置一个范围变量，我可以用它来计算我的TH元素上的类。

提前致谢，亚伦刹车 4CTechnologies

Answer 1

以下是此问题的解决方法，它使用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>

使用的视图有一个名为“Form”的可排序列，可以在两个方向上进行排序。

这是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调整图像。

希望这有帮助！

XPage上的Javascript事件ViewColumnHeader排序

1 个答案: