Question

我正在使用wenzhixin的Bootstrap Table jQuery插件找到here来实现数据网格，我是jQuery和Javascript的新手。我一直在学习，但我无法解决这个问题。我目前在表格中显示的数据完全没有问题。我在每行的末尾都显示一个按钮，当我单击它时，我想要一个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

使用格式化函数时的单元事件监听器，取三个参数：

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

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

行上的按钮显示该行数据的模态表单

1 个答案: