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='序号';最後的效果如下圖所示