总结前端常用控件和疑难杂症的解决方法

Posted 2020-06-16

//点击展开的事件
function expandMoreStr(v) {
    var str="";
    if ($(v).find(‘i‘).hasClass(‘icon-sort-up‘)) {
        $(v).find(‘i‘).attr(‘class‘, ‘icon-sort-down‘);
        str = $(v).prev().attr(‘data-simple‘);
        $(v).prev().html(str);
    } else {
        $(v).find(‘i‘).attr(‘class‘, ‘icon-sort-up‘);
        $(v).prev().attr(‘class‘, ‘text-no-ellipsis‘);
        str = $(v).prev().attr(‘data-complete‘);
        $(v).prev().html(str);
    }
}

var commonHelper = {
        selectPickerHelp:{
            //selectPicker控件的使用
            init:function(docId,tip){
                //进入页面，首先初始化控件
                docId = "#"+docId;
                $(docId).selectpicker({noneSelectedText:tip});
            },
            building:function(param){
                //初始化控件的数据
                var docId = "#"+param.docId;
                if(null != param.size && "undefined" != param.size && "" != $.trim(param.size)){
                    $(docId).attr("data-size",param.size);
                }
                if(null != param.multiple && "undefined" != param.multiple && "" != $.trim(param.multiple)){
                    $(docId).attr("multiple",param.multiple);
                }
                if(null != param.width && "undefined" != param.width && "" != $.trim(param.width)){
                    $(docId).attr("data-width",param.width);
                }
                if(null != param.style && "undefined" != param.style && "" != $.trim(param.style)){
                    $(docId).attr("data-style",param.style);
                }
                var options = [];
                var data = param.dataParam.data;
                if(null != param.dataParam.expendData){
                    options.push(‘<option value="‘+param.dataParam.expendData["val"]+‘">‘+param.dataParam.expendData["name"]+‘</option>‘);
                }
                $.each(data,function(i,e){
                    options.push(‘<option value="‘+e[param.dataParam.val]+‘">‘+e[param.dataParam.name]+‘</option>‘);
                });
                $(docId).prepend(options.join(‘‘));
                if(null != param.defaultVal && "" != $.trim(param.defaultVal)&&"undefined"!=param.defaultVal){
                    if($(docId).attr("multiple") == "multiple"){
                        var selections = param.defaultVal.split(",");
                        $(docId).selectpicker(‘val‘,selections);
                    }else{
                        $(docId).selectpicker(‘val‘,param.defaultVal);
                    }
                }
                $(docId).selectpicker(‘refresh‘);
            },
            readValue:function(docId){
                var docId = "#"+docId;
                if($(docId).attr("multiple") == "multiple"){
                    return $(docId).val().join(",");
                }else{
                    return $(docId).val();
                }
                
            }
    },
    longStrHelper:{
            simplifyStr:function(data,max,style){
                //字符串串收起展示
                var div = [];
                var simpleData = data;
                if(null == data){
                    return "";
                }
                if(data.length>max){
                    simpleData=data.substring(0,max)+"... ...";
                }
                var defaultStyle = "table-layout:fixed;word-break:break-all;overflow:hidden;";
                if( null != style && "undefined" != style){
                    //过滤与默认样式重复的样式类型,保留默认样式start
                    style = style.replaceAll("\\s", "").replaceAll("　", "");//去除所有空格
                    var styleArr = style.split(";");
                    var defaultKeys = ["table-layout","word-break","overflow"];
                    for(var i =0;i<defaultKeys.length;i++){
                         var dfk = defaultKeys[i];
                         if(style.indexOf(dfk)>-1){
                                alert(defaultStyle.indexOf(dfk));
                                styleArr = $.grep(styleArr,function(o,j){
                                  if(o.indexOf(dfk)<0){
                                      return o;
                                  }
                                });
                         }
                    }
                    //过滤与默认样式重复的样式类型,保留默认样式end
                    style = defaultStyle + styleArr.join(";");
                }else{
                    style = defaultStyle;
                }
                div.push(‘<span data-complete="‘+data+‘" data-simple="‘+simpleData+‘" style="‘+style+‘">‘+simpleData+‘</span>‘);
                if(simpleData!= data){
                    div.push(‘<a class="text-expand" href="javascript:void(0);" onclick="commonHelper.longStrHelper.expandStr(this);" style="float: right;"><i class="icon-sort-down"></i></a>‘);
                }
                return div.join(‘‘);
        },
        expandStr:function(v){
            //展开或收起长字符串
            var str="";
            if ($(v).find(‘i‘).hasClass(‘icon-sort-up‘)) {
                $(v).find(‘i‘).attr(‘class‘, ‘icon-sort-down‘);
                str = $(v).prev().attr(‘data-simple‘);
                $(v).prev().html(str);
            } else {
                $(v).find(‘i‘).attr(‘class‘, ‘icon-sort-up‘);
                $(v).prev().attr(‘class‘, ‘text-no-ellipsis‘);
                str = $(v).prev().attr(‘data-complete‘);
                $(v).prev().html(str);
            }
        }
    
    }
        
}