CODEWITHSUNDEEP
jquerybootstrap-modalbootstrap-table
Adam Jackson
Adam Jackson

Reputation: 25

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

I'm using wenzhixin's Bootstrap Table jQuery plugin found here to implement a data grid and I am new to jQuery and Javascript. I've been learning but I can't figure this out. I currently have the data displaying in a table with no problem at all. I have a button being displayed at the end of each row and when I click it, I want a Bootstrap modal to open and somehow pass the data-unique-id to the modal as (for example) the id of the modal.

<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 -->

and then my 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');
    }
};

How can I do this? Can anyone help me figure this out? Any help is greatly appreciated.

Upvotes: 2

Views: 6382

Answers (1)

wenyi
wenyi

Reputation: 1384

You can use the event params to get the data what you want, and then write it to the modal:

'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>')
}

Docs: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

The cell events listener when you use formatter function, take three parameters:

  • event: the jQuery event.
  • value: the field value.
  • row: the row record data.
  • index: the row index.

Example: http://jsfiddle.net/wenyi/e3nk137y/3484/

Upvotes: 1

Related Questions