Xpages 和数据表

Question

我正在使用带有 xpages 的 dataTables jQuery 插件，并有一个自定义控件我拖放到任何页面上，传入 viewName 的自定义属性，它将使用 REST 显示一个表格 - 所有这些都基于 Oliver Busse 的一些很好的示例。

如果在基本页面上使用此自定义控件，则一切正常，但是，如果它在一个选项卡中，这不是默认设置，当我然后单击包含该控件的选项卡时，我在调用 @987654322 时收到错误@

我认为问题是因为我在 beforePageLoad 上设置了 viewjson？

知道如何让它在选项卡式界面中工作吗？

代码如下：

<xp:this.beforePageLoad><![CDATA[#{javascript:var viewjson = new org.openntf.rest.DynamicView(compositeData.viewName);}]]></xp:this.beforePageLoad>
    <table
        id="#{javascript:viewjson.getId()}"
        class="table table-hover table-striped">
        <thead>
            <xp:repeat id="repeat1" rows="30" disableOutputTag="true"
                var="col">
                <xp:this.value><![CDATA[#{javascript:try {
viewjson.getCols()}
catch (e) {
openLogBean.addError(e,this)
}}]]></xp:this.value>
                <th>
                    <xp:text escape="true" disableTheme="true"
                        value="#{col}">
                    </xp:text>
                </th>
            </xp:repeat>
        </thead>
        <tbody></tbody>
    </table>

更新

我尝试了以下方法来尝试先加载 jQuery

<xp:this.resources>
<xp:headTag
            tagName="script">
            <xp:this.attributes>
                <xp:parameter
                    name="type"
                    value="text/javascript" />
                <xp:parameter
                    name="src"
                    value="/xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js" />
            </xp:this.attributes>
        </xp:headTag>
        </xp:this.resources>

还有这个在 xsp 属性中

xsp.client.script.dojo.djConfig="dojo-amd-factory-scan": false

但我仍然得到一个没有显示任何 dojo 元素的空白页面

Answer 1

我认为主要问题是对于 XPages 核心控件，非活动选项卡在变为活动状态之前实际上不会呈现给浏览器。所以你在 beforePageLoad() 中调用的是寻找当时不存在的内容。 可能有一个 CSJS 东西可以重新初始化数据表。另一种选择是不使用选项卡核心控件，而是使用 ext 中的 dojo 版本。图书馆。我很确定 dojo 版本会呈现所有内容，并且只使用 CSS 来隐藏非活动选项卡。

Answer 2

自定义控件的 beforePageLoad 事件在 XPage 已加载时执行。
当稍后激活选项卡并呈现表格时，变量viewjson 消失了。

一种方法是将 Java 对象放入 beforePageLoad 中的复合数据变量 compositeData.viewjson 中，稍后在表中使用它。但是，您会在呈现页面之前计算每个选项卡的 all 视图。此外，该类不可序列化，不能存储在复合数据变量中。不过，您可以使该类可序列化。

更好的方法是在表中实例化 Java bean - 没有 beforePageLoad 事件：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <table
        id="#{javascript:
            var viewjson = new org.openntf.rest.DynamicView(compositeData.viewName);
            return viewjson.getId();
        }">
        <thead>
            <xp:repeat id="repeat1" rows="30" disableOutputTag="true"
                var="col" value="#{javascript: viewjson.getCols()}">
                <th>
                    <xp:text escape="true" disableTheme="true" value="#{col}">
                    </xp:text>
                </th>
            </xp:repeat>
        </thead>
        <tbody></tbody>
    </table>
</xp:view>

我用这个 XPage 测试了上面的自定义控件（带有属性 viewName 的 ccView）

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:br />
    <xp:panel id="tabs">
        <xe:djTabContainer id="tabContainer"
            selectedTab="djTabPane1" defaultTabContent="one">
            <xe:djTabPane id="djTabPaneView" title="one" closable="false"
                partialRefresh="true">
                tab rendered first
            </xe:djTabPane>
            <xe:djTabPane id="djTabPane2" title="two" closable="false"
                partialRefresh="true">
                <xc:ccView viewName="ByCity" />
            </xe:djTabPane>
            <xe:djTabPane id="djTabPane3" title="three" closable="false"
                partialRefresh="true">
                <xc:ccView viewName="ByName" />
            </xe:djTabPane>
        </xe:djTabContainer>
    </xp:panel>
</xp:view>

当用户单击相应的选项卡时，每个 REST 服务都会加载选项卡“二”或“三”中的视图。