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"
return value1;
}else{
return '<input value="'+userid+'" type="checkbox"
}
}
},
{
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);