Добавяне на бутон към вградена в 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