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

    原文:https://blog.csdn.net/baidu_31788709/article/details/104344858

  • 相关阅读:
    8. Java 异常
    9. GUI编程
    生成验证码
    使用response实现文件的下载
    关于小程序的几个坑
    关于redux应用
    关于修改react的启动端口
    react 坑总结
    关于小程序的一些坑的总结
    微信开发者工具 跨域问题
  • 原文地址:https://www.cnblogs.com/gcgc/p/14011909.html
Copyright © 2011-2022 走看看