Question

我正在使用Teamstudio Unplugged尝试使用绑定到文档的inputTexts扩展表行。

该表的功能是让用户记下观察结果，然后记录观察结果。

在此之后，用户应该能够按下按钮并获得另一行，以便他可以添加另一个观察。

我无法部分刷新整个表，因为它会导致inputTexts重新加载绑定到它们的值。

我无法部分刷新新行并使用服务器端脚本更改其样式，因为ID不会从设计器中继承。这意味着设计师：<xp:tr id="row1">在PC模拟器中成为了这个：<tr> 所以我无法通过计算的样式和部分刷新来解决这个问题。所以我现在已经构建了一个按钮，但是它只改变了两次。之后，onclick字符串永远不会改变。

<xp:button value="Flere observationer" id="button4" styleClass="button">
    <xp:this.attrs>
        <xp:attr name="onclick">
            <xp:this.value><![CDATA[#{javascript:
                return "$('.row"+sessionScope.rows+"').removeClass('hidden');"
            }]]></xp:this.value>
        </xp:attr>
    </xp:this.attrs>
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
         refreshId="button4">
        <xp:this.action>
            <xp:executeScript script="#{javascript:sessionScope.rows++;}">
            </xp:executeScript>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

Answer 1

这可以使用标准（-ish）XPages技术在Unplugged中完成，对于不熟悉JQuery的人来说，这可能更容易。我绝不会建议使用表格进行布局，使用<div>和/或<ul/li>标记并使用CSS。然而，为了回答这个具体问题，我使用了一张桌子（现在爬上肥皂盒）......

所以我假设每行中的数据都在同一个文档中。如果是这样，并且用户一次写一个观察，为什么不使用完全刷新？ Unplugged（即使是服务器部分 - 如果有意义的话）一切都在客户端完成，所以它的速度很快。此方法显示现有观察（如果适用），并允许用户一次输入另一行：

在表单上添加隐藏字段 - NoOfObservations - 这可以是文本字段，并将用作XPage中的索引。

将XPage上的数据源添加到表单

创建一个beforePageLoad事件，以便从现有文档或新文档设置索引：

<xp:this.beforePageLoad><![CDATA[#{javascript:
var ObservationCount = 0;
if(!document1.isNewNote()){
ObservationCount = document1.getItemValue("NoOfObservations")[0];
}
sessionScope.put("observations", ObservationCount);
}]]>
</xp:this.beforePageLoad>

使用现有行创建表 - 使用xp：repeat控制与sessionScope中的索引生成行 - 为新条目添加2行：

<table>
    <xp:repeat id="repeat1" rows="30" var="rowData"
        indexVar="dataRows">
        <xp:this.value><![CDATA[#{javascript:sessionScope.get("observations");}]]></xp:this.value>
        <tr>
            <td>
                <xp:label value="Observation" id="label1"
                    style="color:rgb(255,255,255)">
                </xp:label>
            </td>
            <td>
                <xp:text escape="true" id="computedField1">
                    <xp:this.value><![CDATA[#{javascript:return document1.getItemValueString("ObservationTitle" + dataRows);}]]></xp:this.value>
                </xp:text>
            </td>
        </tr>
        <tr>
            <td>
                <xp:label value="Details" id="label2"
                    style="color:rgb(255,255,255)">
                </xp:label>
            </td>
            <td>
                <xp:text escape="true" id="computedField2">
                    <xp:this.value><![CDATA[#{javascript:return document1.getItemValueString("ObservationDesc" + dataRows);}]]></xp:this.value>
                </xp:text>
            </td>
        </tr>
    </xp:repeat>
    <tr>
        <td>
            <xp:label value="New Observation"
                id="newObservationTitle" style="color:rgb(255,255,255)">
            </xp:label>
        </td>
        <td>
            <xp:inputText id="inputText1"></xp:inputText>
        </td>
    </tr>
    <tr>
        <td>
            <xp:label value="New Description"
                id="newObservationDesc" style="color:rgb(255,255,255)">
            </xp:label>
        </td>
        <td>
            <xp:inputTextarea id="inputTextarea1"></xp:inputTextarea>
        </td>
    </tr>
</table>

在onClick事件中使用带有以下SSJS的xp：按钮：

<xp:button value="Save" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action>
            <xp:actionGroup>
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript:
var newObservation = parseInt(sessionScope.get("observations")) +1;
document1.replaceItemValue("ObservationTitle" + newObservation,  getComponent("inputText1").getValue());
document1.replaceItemValue("ObservationDesc" + newObservation, getComponent("inputTextarea1").getValue());
document1.replaceItemValue("NoOfObservations", newObservation);
document1.save();}]]></xp:this.script>
                </xp:executeScript>
                <xp:openPage name="/UnpMain.xsp"></xp:openPage>
            </xp:actionGroup>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>

Answer 2

与您的其他问题一样，我再次倾向于做客户端而不是尝试进行部分刷新。只需使用jQuery向表中添加行，然后在保存文档时将每行的值存储到隐藏列表字段中。

同样，对于您要使用的ID，而不是依赖服务器生成的ID，添加您自己的属性并使用这些属性选择项目。

Teamstudio Unplugged：添加更多表行而不进行部分刷新

2 个答案: