bootstrap-table自定义复选框列的样式

为了满足项目需求，需要修改bootstrap-table的复选框的默认样式，起初想着尽量不改动他的源码，尽管最后样式能满足需求，但是会功能上出现各种问题。没办法，还是觉得改动源码。网上有很多修改复选框默认样式的方法，主要是通过将input标签与label标签关联起来，然后隐藏input标签，使用label标签的伪元素（after或before）代替input显示。

bootstrap-table.js源码上checkbox列默认返回的text如下

             text = [sprintf(that.options.cardView ?
                        '<div class="card-view %s">' : '<td class="bs-checkbox %s">', column['class'] || ''),
                    '<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 && value.checked) ? 'checked' : undefined) +
                    sprintf(' disabled="%s"', !column.checkboxEnabled ||
                        (value && value.disabled) ? 'disabled' : undefined) +
                    ' />',
                    that.header.formatters[j] && typeof value === 'string' ? value : '',
                    that.options.cardView ? '</div>' : '</td>'
                ].join('');

从上面可以看到源码上并没有给input框加id名，也没有相应的label标签与之相关联，所以我要给input标签加上id名，并加一个label标签，下面是我修改后的代码

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

此外，项目还需要修改复选框列的标题，使用title设置无效，为了方便还是修改源码吧，找到复选框列标题的部分，源码如下

text = '<input name="btSelectAll" type="checkbox" />';

将此行注释掉，添加 text='序号';最后的效果如下图所示