bootstrap-switch插件与bootstrapTable插件的结合版

这个东西折腾了我一天:主要困难点在于:在bootstrapTable中的列中的元素加载完之后,bootstrap-switch插件并没有初始化,所以,在列元素中的input标签中添加checked并不起作用。所以,我尝试,在列数据及switch插件初始化完成之后,对列数据进行重新配置他的state状态。

者有引发一个问题就是,input中name都是相同的,,当进行重新定义state时,所有的列中的switch按钮都会同时进行定义,不论是state是true还是false的,所以,为了解决这个问题,我将input的状态值为true的name设置为1,input中state的name值设置为2,这样进行分类的,初始化与重新配置

下面是关键代码

{
                field: 'sendee',
                title: '短信接收人',
                align: "center", 
                valign: 'middle', // 上下居中
                formatter: function(value,row, index){
                    var userid=row.userid;
                    if(value == true){
                        var value1='<input value="'+userid+'" type="checkbox"
name="my-checkbox1" checked/>';
                        return  value1;
                    }else{
                        return '<input value="'+userid+'" type="checkbox"  
name="my-checkbox2"/>';
                    }

                }
             },
           {
             field: 'action',
             title: '操作',
             align: "center",
             valign: 'middle', // 上下居中
             events: operateEvents, //给按钮注册事件
             formatter: operateFormatter //给表格中添加按钮
           },
       ],

onLoadSuccess:function(){
           $("[name='my-checkbox1']").bootstrapSwitch({//分种类初始化
               onText:"是",
               offText:"否",
               onColor:"success",
               offColor:"danger",
               size:"small",
               onSwitchChange:function(event,state){
                   if(state==true){
                       var id=this.value;
                       var url_send=urlHead()+"/rest/setsms?userid="+id+"&sendee=true";
                       $.getJSON(url_send,function(data,status){
                         if(data.status==200){
                             toastr.success("该管理员已经成为短信接收人!")
                         }else{
                             toastr.error("修改失败");
                         }
                       })
                   }else{
                       var id=this.value;
                       var url_send=urlHead()+"/rest/setsms?userid="+id+"&sendee=false";
                       $.getJSON(url_send,function(data,status){
                         if(data.status==200){
                             toastr.success("已取消该管理员的短信接收权限!")
                         }else{
                             toastr.error("修改失败");
                         }
                       })
                   }
               },
           })
           
           $("[name='my-checkbox2']").bootstrapSwitch({
               onText:"是",
               offText:"否",
               onColor:"success",
               offColor:"danger",
               size:"small",
               onSwitchChange:function(event,state){
                   if(state==true){
                       var id=this.value;
                       var url_send=urlHead()+"/rest/setsms?userid="+id+"&sendee=true";
                       $.getJSON(url_send,function(data,status){
                         if(data.status==200){
                             toastr.success("该管理员已经成为短信接收人!")
                         }else{
                             toastr.error("修改失败");
                         }
                       })
                   }else{
                       var id=this.value;
                       var url_send=urlHead()+"/rest/setsms?userid="+id+"&sendee=false";
                       $.getJSON(url_send,function(data,status){
                         if(data.status==200){
                             toastr.success("已取消该管理员的短信接收权限!")
                         }else{
                             toastr.error("修改失败");
                         }
                       })
                   }
               },
           })
       }
     });
   };
   return oTableInit;
 };

// 表格的数据进行重新配置
 var ff=function(){
     var data=$("#unit_table").bootstrapTable("getData");
     for(var i=0;i<data.length;i++){
         var sendee=data[i].sendee;
         if(sendee==true){
             $("[name='my-checkbox1']").bootstrapSwitch('state',true);
         }else if(sendee==false){
             $("[name='my-checkbox2']").bootstrapSwitch("state",false);
         }

     }
 }
 
 setTimeout(ff,100);

猜你喜欢

转载自blog.csdn.net/wanghui_0924/article/details/84975106