Добавьте кнопку в таблицу, реагирующую на встроенный SSJS

Я создаю загрузочную таблицу, реагирующую с помощью элемента управления повторением, и она работает нормально, но теперь я хочу добавить кнопку, связанную с каждой строкой. У меня это работает, если я просто использую элемент управления повторением, но не реагирую на таблицу. Я создаю значения строки таблицы с вычисляемым полем с выводом в виде HTML, и это работает, пока я не начну добавлять кнопку. Я могу добавить <button></button> в код, но когда я использую <xp:button></xp:button>, он не отображается должным образом. Я использую этот код для построения строк таблицы:

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, а также визуализированная формула, которая становится очень громоздкой для ввода в встроенный код. У меня есть кнопка, работающая, когда я просто форматирую ее и данные строки в элементе управления повторением, но с точки зрения использования я хотел бы, чтобы таблица реагировала. Есть ли способ сделать эту работу и лучший способ построить строки таблицы.


twitter-bootstrap xpages xpages-ssjs
person Bill F    schedule 28.08.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда ты молоток, все выглядит как гвоздь! Я ненавижу, когда я застреваю в каком-то одном способе (обычно самом сложном) и продолжаю биться головой о стену, пока не наступает истощение, а затем я отступаю и переосмысливаю процесс. В любом случае ответ на самом деле довольно прост. Вот как это выглядит: введите здесь описание изображения

Вот краткая версия «исходного кода», добавьте свой код, где указано:

<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>
person Bill F    schedule 29.08.2015