2

我最近正在使用 XPages,但在容器控件中的数据排序方面遇到了麻烦。我已经能够通过多个解决方案、视图面板、数据表和重复控件很好地显示数据,但排序似乎只能通过视图面板正常工作。(在做了一些研究并意识到 Java.Util.TreeMap 为其他容器提供了一些实用程序之后)。但是,我遇到的问题是查看列标题添加用于排序的图像不是我想要的。

所以,我的问题是:有什么方法可以改变 XPages 查找这些图像的位置(知道我可以通过 Image.ViewColumnHeaderSort 在该图像标签上设置一个类,因为无法访问该事件而无济于事)或者可以我访问该事件是为了设置一个作用域变量,我可以用它来计算我的 TH 元素上的一个类。

在此先感谢 Aaron Brake 4CTechnologies

4

1 回答 1

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

希望这可以帮助!

于 2012-11-30T11:46:47.787 回答