在 bootstrap-table 中使用复选框格式化列

Question

我在table中使用bootstrap-table, which has data-formatter feature to format cells. I have a 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

bootstrap-table 库似乎没有处理这种情况。

问题：calculateObjectValue 函数正在返回预期结果，但缺少复选框和单选按钮的追加逻辑（这就是您在复选框字段中看不到星形图标的原因）。

在代码中

value = calculateObjectValue(column,
                that.header.formatters[j], [value, item, i], 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('');

所以用下面的代码替换，并有条件地检查列是否有格式化程序，然后它会附加值。

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('');

如此创作pull-request，看看作者怎么说

在 bootstrap-table 中使用复选框格式化列

Format column with checkboxes in bootstrap-table

css

jquery

twitter-bootstrap

twitter-bootstrap-3

bootstrap-table