bootstrap-switch真TM的满满都是槽点,坑之多,全网吐槽。
首先是,只有第一行能够显示标图的问题。
连续相同状态的多行数据只有第一个显示按钮
然后是,不能正常初始化的问题。
解决bootstrap-switch开关按钮不能正常初始化问题
向上述前仆后继的同志们致敬。
然后,碰到了第三个问题,bootstrap-table中当数据分页时,翻页以后,bootstrap-switch的效果,就消失了,图表不显示了……这个问题坑到网上我竟然没找到解决方法。
好吧,该我入坑了。
其实解决起来也简单。
bootstrap-table中有一个函数叫,onPageChange(),搭配OnLoadSuccess()使用,效果更佳。
method: 'get',
url: "/net/"+state+"?start="+StartSearch+"&&end="+EndSearch+"&&wangduan="+mWD, //获取数据的Servlet地址
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
};
return param;
},
cache: false,
//height: 750,
striped: true,
pagination: true,
silent: true, //以静默方式刷新数据
toolbar:"#toolbar",
locale:"zh-US", //表格汉化
sidePagination: "client",
pageSize: 10,
pageNumber:mPage,
pageList: [10, 14,15, 16, 18,20],
search: true,
showColumns: true,
showRefresh: true,
showExport: true,
exportDataType: 'all',
clickToSelect: true,
exportTypes:[ 'excel','xlsx','doc','csv', 'txt', 'sql' ],
exportOptions:{
//ignoreColumn: [12,14], //忽略某一列的索引
fileName: '数据导出', //文件名称设置
worksheetName: 'Sheet1', //表格工作区名称
tableName: 'IP数据表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
},
columns : [],
onLoadSuccess: function(){
//{# 初始化switch开关按钮#}
initSwitch();
},
onPageChange: function(){
//{# 初始化switch开关按钮#}
initSwitch();
},
});
function initSwitch(){
$("[id='project_status_switch']").bootstrapSwitch({
onText : "入网", // 设置ON文本
offText : "退出", // 设置OFF文本
/* onColor : "success",// 设置ON文本颜色(info/success/warning/danger/primary)
offColor : "warning", // 设置OFF文本颜色 (info/success/warning/danger/primary) */
size : "small", // 设置控件大小,从小到大 (mini/small/normal/large)
// 当开关状态改变时触发
onSwitchChange : function(event, state) {
if (state == true) {
//alert("入网");
loginPermit("入网",this.value);
} else {
//alert("退出");
loginPermit("退出",this.value);
}
}
});
}
//状态栏事件定义
function project_status(value, row, index) {
if("入网"==value){
return "<input type='checkbox' checked id='project_status_switch' name='mycheck' value='"+row.主键值+"'>";
}else{
return "<input type='checkbox' id='project_status_switch' name='mycheck' value='"+row.主键值+"'>";
}
}
根绝这么看来,虽然是在client模式下,但是一开始的onLoadSuccess(),应该只加载了第一页的数据,翻页就刷新一遍数据,虽然不是从服务器端取值。因此,在每次翻页的时候,我们就重新加载一遍样式吧。