将按钮添加到 table-responsive 内置 SSJS

Question

我正在使用重复控件创建 bootstrap table 响应式，它工作正常，但现在我想添加一个与每一行相关的按钮。如果我只使用重复控件而不是 table-responsive，我就可以正常工作。我使用输出为 HTML 的计算字段构建 table 行值，这一直有效，直到我开始添加按钮。我可以在代码中添加 <button></button>，但是当我使用 <xp:button></xp:button> 时，它无法正确显示。我正在使用此代码构建 table 行：

rtn = "<tr><td align='center'><xp:button value='remove' id='button1' ></xp:button></td><td>" + expPayDate +"</td><td>" + actualPayDate + "</td><td align='right'>" + amount + "</td><td align='center'>" + paymentID  + "</td></tr>"

然后我有一个相当广泛的 onClick 事件和一个渲染的公式，输入到在线代码中变得非常麻烦。当我只是格式化按钮和重复控件中的行数据时，我有按钮工作，但从使用角度来看，我希望有一个 table-responsive。有没有办法让这项工作，以及建立 table 行的更好方法。

Answer 1

当你是锤子时，一切看起来都像钉子！当我被困在以一种方式（通常是最困难的方式）做某事并且一直用头撞墙直到筋疲力尽然后我退后一步重新思考这个过程时，我讨厌它。无论如何，答案其实很简单。这是它的样子：

这是 'source code' 的简短版本，在指定位置添加您的代码：

<div class="row" style="width:600px">
        <xp:panel id="panelRepeatData">
            <xp:this.data>
                <xp:dominoView var="vwCollection">
                    **** Define your view datasource here
                                        </xp:dominoView>
            </xp:this.data>
            <div class="table-responsive">

                <table class="table  table-bordered table-condensed " style="width:550px">
                    <thead>
                        <tr style="background-color:#d9fff0">
                            <th>Remove</th>
                            <th>Est Pay Date</th>
                            <th>Actual Pay Date</th>
                            <th>Payment Amount</th>
                            <th>Payment ID</th>
                        </tr>
                    </thead>
                    <tbody>
                        <xp:repeat id="repeatData" rows="10" value="#{vwCollection}"
                            var="veData" indexVar="rIndex">
                            <div class="row"><!-- rowRepeat -->
                                <xp:text escape="false" id="tableRowstart">
                                    <xp:this.value><![CDATA[#{javascript:if (rIndex % 2){
    return "<tr style='background-color:#fofaff'><td>"
}else{
    return "<tr style='background-color:#fff19a'><td>"
}}]]></xp:this.value>
                                </xp:text>
                                <xp:button id="button1" styleClass="btn btn-sm btn-danger">
                                    <span class="glyphicon glyphicon-remove">
                                    </span>
                                    ****define your button rendering and Event handling
                                </xp:button>
                                <xp:text escape="false" id="tableRowData">
                                    <xp:this.value><![CDATA[#{javascript:
                                                            **** Define and format values for output
        return "</td><td align='center'>" + expDate + "</td><td align='center'>" + actualPayDate + "</td><td align='right'>" + amount + "</td><td>" + veData.getColumnValue("PaymentID") + "</td></tr>"
}]]>
                                    </xp:this.value>
                                </xp:text>
                            </div><!-- rowRepeat -->
                        </xp:repeat>
                    </tbody>
                </table>
            </div><!-- table-reponsive -->
        </xp:panel>
    </div>

将按钮添加到 table-responsive 内置 SSJS

Add a Button to a table-responsive built in SSJS

xpages

twitter-bootstrap

xpages-ssjs