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

      


    参考博客:
     
     
  • 相关阅读:
    人与人之间的距离
    Web API之service worker
    css背景图等比例缩放,盒子随背景图等比例缩放
    js节流函数高级版
    vue实现百度搜索下拉提示功能
    vue实现图片点击放大
    css图片宽高相等设置
    sublime常用插件及配置
    css揭秘读书笔记
    webpack2.0简单配置教程
  • 原文地址:https://www.cnblogs.com/seanjack/p/14167317.html
Copyright © 2020-2023  润新知