行上的按钮以显示该行数据的模态形式

Question

我正在使用 wenzhixin 的 Bootstrap Table jQuery 插件 here 来实现数据网格，我是 jQuery 和 Javascript。我一直在学习，但我无法弄清楚。我目前的数据显示在 table 中，完全没有问题。我在每一行的末尾显示了一个按钮，当我单击它时，我希望打开一个 Bootstrap 模态，并以某种方式将 data-unique-id 作为（例如）的 id 传递给模态模态。

<div class="container">
    <table id="table"
        class="table" 
        data-search="true"
        data-pagination="true"
        data-mobile-responsive="true"
        data-toggle="table"
        data-url="json/membersData.json"
        data-unique-id="id">
        <thead>
            <tr>
                <th data-field="id" data-index="id">MemberID</th>
                <th data-field="m_fname" data-index="id">FirstName</th>
                <th data-field="operate" data-index="id" data-events="operateEvents" data-formatter="operateFormatter">Actions</th>
            </tr>
        </thead>
    </table>

    <div class="modal fade" id="viewMemberModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal table</h4>
                </div>
                <div class="modal-body">
                    <!-- output data here-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

然后是我的 javascript:

function operateFormatter(value, row, index) {
    return [
        '<a class="info btn btn-info btn-sm" data-unique-id="',row.id,'" data-toggle="viewMemberModal" data-target="#viewMemberModal',row.id,'">',
        '<span class="glyphicon glyphicon-eye-open"></span>',
        '</a>'
    ].join('');
}

window.operateEvents = {
    'click .info': function () {
        $('#viewMemberModal').modal('show');
    }
};

我该怎么做？谁能帮我解决这个问题？非常感谢任何帮助。

Answer 1

您可以使用事件参数获取您想要的数据，然后将其写入模态：

'click .info': function (e, value, row) {
    // the row param is what you want to display, for example: row.id
    $('#viewMemberModal').modal('show')
        .find('.modal-body').html('<pre>' + 
        JSON.stringify(row, null, 4) + '</pre>')
}

文档：http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

使用formatter函数时的cell events listener，带三个参数：

事件：jQuery事件。
value：字段值。
row：行记录数据。
index: 行索引。

示例：http://jsfiddle.net/wenyi/e3nk137y/3484/

行上的按钮以显示该行数据的模态形式

Button on row to display a modal form for that row's data

jquery

bootstrap-modal

bootstrap-table