在引导表中使用复选框格式化列

Posted 2023-05-08

【中文标题】在引导表中使用复选框格式化列

【英文标题】：Format column with checkboxes in bootstrap-table

【发布时间】：2015-11-21 15:30:09

【问题描述】：

我使用bootstrap-table，它具有data-formatter 功能来格式化单元格。我在表中有一个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;

【问题讨论】：

你想如何格式化它？你试过什么？

@vanburenx 具有 data-formatter 属性和 starsFormatter 函数。然后我尝试格式化表格html结构，但是$('table').bootstrapTable由于data-checkbox属性重写了结构。

我认为@vanburenx 是在询问您尝试应用哪种格式。改变背景颜色？在复选框旁边添加一个图标？在复选框旁边添加一些帮助文本？答案很大程度上取决于您要执行哪种格式。

@dmbaughman 在复选框旁边添加图标

【参考方案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，看看作者怎么说。

【讨论】：

作者接受拉取请求并合并到master中