Xpages：动态视图面板 - 排序答案

【问题标题】：Xpages: Dynamic View Panel - SortingXpages：动态视图面板 - 排序
【发布时间】：2016-10-10 16:03:29
【问题描述】：

在我的动态视图面板中，我需要有可排序的列。问题是在对列进行排序时，它会重新提交 XPage 并刷新整个内容。有没有办法只在动态视图面板上实现排序而不提交整个页面？另外，如果所选视图为空，我想隐藏此控件。

这是我的代码：

<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>

【问题讨论】：

如果您加载 JSON 数据，您可以这样做，但这可能比您想要的更改更多。如果您只是刷新包含视图控件的面板会发生什么？
我正在尝试做同样的事情，但它会刷新整个页面。我选择了 partialrefresh = true 和 refreshid=panel id 但它没有任何效果。另外，我不确定如何捕获排序事件服务器端。我一直在使用 JSON 数据和数据表来显示相同的内容。但我还需要处理视图上的全文搜索，因此考虑得更好并切换到动态视图面板。
我的猜测是您不必完全刷新即可执行列排序，但我不确定。我有一段时间没有这样做了。请编辑您的问题并发布您的代码。
你是否也使用了部分执行？也许如果您包含代码，我们会更容易弄清楚。

标签： xpages xpages-extlib

【解决方案1】：

这个问题是很久以前提出的......但也许答案可以帮助其他人。

您可以将 dynamicViewPanel 放入一个“动态内容”容器（来自 ExtLib），并将部分事件属性设置为 true。这会将完整更新事件转换为部分刷新事件。

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

【讨论】：