Format column with checkboxes in bootstrap-table

Question

I use bootstrap-table, which has data-formatter feature to format cells. I have a column with checkboxes in table. Is there any simple way to format column with checkboxes?

jsfiddle

HTML

<table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
<thead>
<tr>
    <th data-field="state" data-checkbox="true" data-formatter="starsFormatter"></th>
    <th data-field="name" data-halign="center" data-align="left" data-sortable="true">Name</th>
    <th data-field="stargazers_count" data-formatter="starsFormatter" data-halign="center" data-align="left" data-sortable="true">Stars</th>
    <th data-field="forks_count" data-formatter="forksFormatter" data-halign="center" data-align="left" data-sortable="true">Forks</th>
    <th data-field="description" data-halign="center" data-align="left" data-sortable="true">Description</th>
</tr>
</thead>

JavaScript

var data = [{name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}]

$('table').bootstrapTable({
    data: data
});

function starsFormatter(row, value, inde) {
    return row + '<i class="glyphicon glyphicon-star"></i> ';
}

function forksFormatter(value) {
    return '<i class="glyphicon glyphicon-cutlery"></i> ' + value;
}

Answer 1

Looks like this condition isn't handled in the bootstrap-table library.

Issue : calculateObjectValue function is returning expected result but append logic is missed out for both checkbox and radio button (that's why you are not seeing the star icon in checkbox field).

In Code

value = calculateObjectValue(column,
                that.header.formatters[j], [value, item, i], value);

getting expected value. following code is not appending the value.

text = [that.options.cardView ?
                     '<div class="card-view">' : '<td class="bs-checkbox">',
                     '<input' +
                     sprintf(' data-index="%s"', i) +
                     sprintf(' name="%s"', that.options.selectItemName) +
                     sprintf(' type="%s"', type) +
                     sprintf(' value="%s"', item[that.options.idField]) +
                     sprintf(' checked="%s"', value === true ||
                         (value && value.checked) ? 'checked' : undefined) +
                     sprintf(' disabled="%s"', !column.checkboxEnabled ||
                         (value && value.disabled) ? 'disabled' : undefined) +
                     ' />',
                     that.options.cardView ? '</div>' : '</td>'
                 ].join('');

so replaced with the below code with a conditional check if the column has formatter then it will append the value.

text = [that.options.cardView ?
                        '<div class="card-view">' : '<td class="bs-checkbox">',
                        '<input' +
                        sprintf(' data-index="%s"', i) +
                        sprintf(' name="%s"', that.options.selectItemName) +
                        sprintf(' type="%s"', type) +
                        sprintf(' value="%s"', item[that.options.idField]),
                        column.formatter === undefined ?
                        sprintf(' checked="%s"', value === true ||
                           (value && value.checked) ? 'checked' : undefined) +
                        sprintf(' disabled="%s"', !column.checkboxEnabled ||
                            (value && value.disabled) ? 'disabled' : undefined) +
                        ' />': ' />' + value,
                        that.options.cardView ? '</div>' : '</td>'
                    ].join('');

so created pull-request, let see what author says.