twitter-bootstrap 使用引导表中的复选框格式化列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32246157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Format column with checkboxes in bootstrap-table
提问by Matt
I use bootstrap-table, which has data-formatterfeature to format cells. I have a column with checkboxesin table. Is there any simple way to format column with checkboxes?
我使用bootstrap-table，它具有数据格式化功能来格式化单元格。我在表格中有一个带有复选框的列。有什么简单的方法可以用复选框格式化列吗？
HTML
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
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;
}
采纳答案by Pavan Kumar Jorrigala
Looks like this condition isn't handled in the bootstrap-tablelibrary.
看起来这种情况没有在bootstrap-table库中处理。
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).
问题：calculateObjectValue 函数正在返回预期的结果，但是复选框和单选按钮都缺少附加逻辑（这就是为什么您没有在复选框字段中看到星形图标的原因）。
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.
所以创建了pull-request，让我们看看作者怎么说。
