这个插件有坑!!!
加载需要文件
<script src="~/Scripts/bootstrap-switch.js"></script>
<link href="~/Content/bootstrap-switch.css" rel="stylesheet" />
bootstrap-switch组件初始化一直是关闭状态,bootstrap-switch开关组件简单够用,作为bs的扩展组件经常被使用,不过在github下载的代码有个bug,就是不论你的input是否添加了checked属性,渲染出来的组件都是关闭状态,也就是无法根据你代码里的checked进行正确显示。解决方案很简单,到bootstrap-switch.js(或min.js)源码文件,将this.ope替换为this.options.state即可
在 bootstraptable中加载时进行初始化,还有客户端分页的话,翻页时会失效,所以pagechange时也要初始化下
columns: [{
checkbox: true
}, {
field: 'ProductName',
title: '名称',
editable: {
type: 'text',
title: '名称',
validate: function (v) {
if (!v) return '名称不能为空';
}
}
//formatter: nameFormatter
}, {
field: 'ProductDescription',
title: '描述',
editable: {
type: 'text',
title: '描述',
validate: function (v) {
if (!v) return '描述不能为空';
}
}
}, {
field: 'Integral',
title: '积分',
editable: {
type: 'text',
title: '积分',
validate: function (v) {
if (!v) return '积分不能为空';
}
}
}, {
field: 'Pic',
title: '图片',
formatter: function (value, row, index) {
return "<img style=' 50px;height: 50px;' src='/ProductPic/" + value + "' alt=''>"
}
}, {
field: 'Status',
title: '状态',
formatter: project_status
}],
onLoadSuccess: function (data) {
initSwitch();
},
onPageChange: function (data) {
initSwitch();
}
function initSwitch() {
$("[id='project_status_switch']").bootstrapSwitch({
onText: "启用", // 设置ON文本
offText: "停用", // 设置OFF文本
onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)
offColor: "danger", // 设置OFF文本颜色 (info/success/warning/danger/primary) */
size: "mini", // 设置控件大小,从小到大 (mini/small/normal/large)
// 当开关状态改变时触发
onSwitchChange: function (event, state) {
var step = this.value;
if (state == true) {
editEnable(step, state);
} else {
editEnable(step, state);
}
}
});
}
//改变状态
function editEnable(editId, isEnable) { $.ajax({ url: "/Manage/PStatusChange", data: { id: editId, isEnable: isEnable }, type: "POST", dataType: "JSON", success: function (data) { result = $.parseJSON(data); if (result.success == true) { //alert("上传成功"); RefreshData(); } else { alert(result.errorMsg); } } }); }
function project_status(value, row, index) {
if (value == true) {
return "<input type='checkbox' id='project_status_switch' name='mycheck' value='" + row.Id + "'checked>";
} else {
return "<input type='checkbox' id='project_status_switch' name='mycheck' value='" + row.Id + "'>";
}
}
参考博客:
https://blog.csdn.net/wanghui_0924/article/details/84975106?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242