我正在尝试在复选框输入上应用引导开关功能,但引导开关类不适用于我的复选框输入。
用于渲染引导开关类的 JS:
cx.common.admin.tableSwitchableColumn('status', {
editable: true,
createdCell: function (td, cellData, rowData, row, col){
$(td).data('status-id', rowData.id);
},
onText: 'Enable',
offText: 'Disable'
})
上述代码的渲染 HTML 输出:
<td class=" text-center">
<input class="bootstrapSwitch" data-on-color="success" data-on-text="Enable" data-off-text="Disable" data-size="mini" type="checkbox" checked="">
</td>
用户界面输出:
tableSwitchableColumn 基本功能:
// Function that render a Switchable column e.g Yes/No
cx.common.admin.tableSwitchableColumn = function(columnName, options){
// Extend default options with specified options (if any)
options = $.extend({
editable: false,
createdCell: null,
dateEvaluatedAsYes: function(data){
return data === '1' || data == 1;
},
onText: 'Yes',
offText: 'No'
}, cx.common.getValueOrDefault(options, {}));
// Build the column settings object
var columnSettings = {
data: columnName,
width: '25px',
render: function(data){
var checkedAttribute = options.dateEvaluatedAsYes(data) ? ' checked' : '';
var disabledAttribute = options.editable ? '' : ' disabled';
return '<input class="bootstrapSwitch" data-on-color="success" data-on-text="' + options.onText + '" data-off-text="'+ options.offText + '" data-size="mini" type="checkbox"' + checkedAttribute + disabledAttribute + '>';
},
className: 'text-center'
};
// If specified in the options, set the celle created callback
if(options.createdCell !== null)
columnSettings.createdCell = options.createdCell;
// Return the column settings
return columnSettings;
}
使用的版本:
Bootstrap v3.4.1、Bootstrap switch v3.3.4
我在我的页面中添加了以下代码并开始工作
setInterval(function(){$('.bootstrapSwitch').bootstrapSwitch();}, 2000);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句