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(),应该只加载了第一页的数据,翻页就刷新一遍数据,虽然不是从服务器端取值。因此,在每次翻页的时候,我们就重新加载一遍样式吧。
原文:https://blog.csdn.net/baidu_31788709/article/details/104344858