1. 程式人生 > >bootstrap-switch外掛與bootstrapTable外掛的結合版

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);