bootstrap-table中使用bootstrap-switch,翻页后switch失效,不显示图标的问题

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

猜你喜欢

转载自blog.csdn.net/baidu_31788709/article/details/104344858