bootstrap table中使用bootstrap-swich

这个插件有坑！！！

加载需要文件

<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='width: 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 + "'>";
        }
 }

　　


参考博客：
 
 
posted @ 2020-12-21 12:36  sj2016  阅读(168)  评论(0)  编辑  收藏  举报