Question

我创建了一个包含XPages数据表和使用插件的响应表：bootstrap-table-mobile每个工作正常，视图可以从桌面上的表格视图切换到移动设备上的卡片视图。

然后我在其他地方的tavle中添加一个复选框，以获得一些打印onClick或onChange的checbox，但注意事件不会触发。这有什么工作吗？以下是我的数据表

<xp:dataTable id="dataTable2" rows="30">
        <xp:this.attrs>
            <xp:attr name="data-toggle" value="table"></xp:attr>
            <xp:attr name="data-show-columns" value="true">
            </xp:attr>
            <xp:attr name="data-mobile-responsive" value="true"></xp:attr>
            <xp:attr name="data-check-on-init" value="true"></xp:attr>
            <xp:attr name="data-click-to-select" value="true">
            </xp:attr>
            <xp:attr name="data-click-to-select" value="true"></xp:attr>
        </xp:this.attrs>
        <xp:column id="column12">
            <xp:checkBox id="checkBox2">

                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="partial" refreshId="viewTable" id="eventHandler3">
                    <xp:this.action><![CDATA[#{javascript:
print("onClick_Server")}]]></xp:this.action>
                    <xp:this.script><![CDATA[console.log("onClick_cllient")]]></xp:this.script>
                </xp:eventHandler>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:print("onChange_Server")}]]></xp:this.action>
                    <xp:this.script><![CDATA[console.log("onChange_client")]]></xp:this.script>
                </xp:eventHandler>
            </xp:checkBox>
        </xp:column>
        <xp:column id="column14">
            <xp:text escape="true" id="id" value="#{curDoc.id}">

            </xp:text>
            <xp:this.facets>
                <xp:label value="Id" id="label10" for="column1" xp:key="header">
                </xp:label>
            </xp:this.facets>
        </xp:column>
        <xp:column id="column13">
            <xp:this.facets>
                <xp:label value="Item Mame" id="label2" for="column1"
                    xp:key="header">
                </xp:label>
            </xp:this.facets>
            <xp:text escape="true" id="ItemName" value="#{curDoc.itemname}">

            </xp:text>
        </xp:column>
    </xp:dataTable>

Answer 1

Click this link to Run.. This may help you, if not means just ignore

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <table class="table table-bordered" id="tblemp">
                <thead>
                    <th>Name</th>
                    <th>Mobile No</th>
                    <th>Email Id</th>
                </thead>
                <tbody>
                    <tr id="emp001" class="clickable-row">
                        <td>AAA</td>
                        <td>1111111</td>
                        <td>aaa@gmail.com</td>
                    </tr>
                    <tr id="emp002" class="clickable-row">
                        <td>BBB</td>
                        <td>2222222</td>
                        <td>bbb@gmail.com</td>
                    </tr>
                    <tr id="emp003" class="clickable-row">
                        <td>CCC</td>
                        <td>3333333</td>
                        <td>ccc@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
     </div>
</div>

<script>
    var emp_id = "";
    $('#tblemp').on('click', '.clickable-row', function(event) {
        $(this).addClass('active').siblings().removeClass('active');
        emp_id = $(this).closest('tr').attr('id');
        alert(emp_id);
    });
</script>

Answer 2

这可以帮助您处理所选行http://notesspeak.blogspot.nl/2013/09/creating-event-for-selected-row-in.html

XPages：如何从Bootstrap表中获取选定的行

2 个答案: