LayUi 相关问题及解决办法

1、表格表头加title

　　问题：layui自带的table组件生成的表格没有参数可以设置title提示，需求要

       解决办法：直接在cols定义中的title里加html代码，结合jQuery实现，如果只是加title直接html即可，如果要实现layer的tips需要结合Jquery

　　

....
//参考title的写法,注意title拼接时内部用单引号，拼接用双引号，不然可能干扰筛选列的列表生成
cols[0].push({field: o.fieldCode, title: "<span lay-tips='" + o.comm + "' class='tableHeadTips'>" + o.fieldNameCn + "</span>" ,hide:(o.isDisplay==="0"||displayCnt>20)});
....

....
//参考:使用class对所有的表头增加tips，注意方向是1（上）否则过长没有显示完全的表头，tips可能在奇怪的地方出现
$('.tableHeadTips').on('mouseenter', function(){
                    let content = $(this).attr('lay-tips');
                    if(!!content.trim() && content.trim()!='null' && content.trim()!=''){
                        this.index = layer.tips(content, this, {
                            time: -1,
                            tips:1//[1, '#e8f1fc']
                        });
                    }

                }).on('mouseleave', function(){
                    layer.close(this.index);
                });
....

2、Layui 数据表格表头根据标题长度自动设置列宽，列宽自适应但每列都尽量显示全，列不出现省略号，

　　问题：LayUi表格自带自适应列宽功能，但是只能实现各列自动分配宽度，列多时会显示省略号，导致每一列都显示不全，需要手动拖动每一列才能看到列头和内容。需求要求每列都自适应宽度，列多时显示滚动条。

       解决方法：

　　1）、如果是固定表格，各列的表头或内容都相对固定，知道各列的长度情况，可直接设置cols中的width即可

　　2）、如果非固定表格，各列的表头和内容都是变化的（比如根据数据构造表格），可在done回调中（或表格渲染完后的其他位置）操作dom的方式修改宽度

 c_accTable = table.render({
                    elem: '#tblAccList'
                    , url: '/account/getData'
                    , method:'post'
                    , contentType:'application/json'
                    , where:params
                    , toolbar: '#'
                    , defaultToolbar: ['filter']
                    , title: '台账列表'
                    , cols: formObj.cols  //列是每次根据需要构造，每次不同
                    , cellMinWidth:80
                    , page:true
                    , parseData:function(res){
                        //接口结构转为表格需要的结构
                        if(res.code == 1){
                            var msgStr =  res.msg;
                            if(res.msg.trim()!='' ){
                                msgStr =  res.msg;
                            }else{
                                msgStr =  "无数据";
                            }

                            return {code:0,msg:msgStr,data:[],count:0};
                        }
                        if(res.code == 0 && res.data.length == 0){
                            layer.msg("无数据");
                            return {code:0,msg:"无数据",data:[],count:0};
                        }
                        
                        return {
                            code:0,msg:res.msg,data:res.data.list,count:res.data.total
                        };
                      }
                    , done:function(res){
                        //没数据时把接口返回的消息显示在表格中
                        if(res.data.length==0){
                            $("div[lay-id=tblAccList]").find("div.layui-none").html(res.msg);
                        }else{
                            //设置列宽，lay-id=tblAccList表示对哪一个表格处理，16.5根据字体大小可调整，+30是表头的padding,60是最小值，200是最大值
                            $("div[lay-id=tblAccList]").find(".layui-table-header .layui-table-cell").each(function(i,ele){
                                var width = $(ele).css("width").replace('px','')*1;
                                var realWidth = Math.min(200,Math.max(($(ele).text().length*16.5)+30,60));
                                if(width < realWidth){
                                    $("div[lay-id=tblAccList]").find("."+$(ele).attr("class").split(" ").join(".")).css("min-width",realWidth);
                                }
                            });
                        }
}

 

3、Layui 的form表单验证问题，非必输但需要验证的问题（如身份证号码输入框，可不输但输入了就必须格式对）

　　问题：form自带的校验，如果不输入也会校验，需求要输入了才校验，没有输入就不校验

　　解决方法：修改form.js、layui.all.js 中的校验规则

//每个规则新增部分：(^$)|
phone:[/(^$)|^1\d{10}$/,'请输入正确的手机号'],
email:[/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,'邮箱格式不正确'],
url:[/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/,'链接格式不正确'],
number:[/(^$)|^\d+$/,'只能填写数字'],
date:[/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,'日期格式不正确'],
identity:[/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/,'请输入正确的身份证号']

//有些版本number校验规则是用的函数，新增if(!e||e.trim=='') return;
number:function(e){if(!e||e.trim=='') return;if(!e||isNaN(e))return"只能填写数字"}

//使用的时候如果需要必输校验，lay-verify='requried|...'

 4、Layui表格在IE下表头边框消失，没有边框的问题

　　问题：LayUi自带表格及其他第三方扩展表格，有时会出现在IE下（IE11验证）表头列没有边框的问题

　　原因：是因为中有样式  同时存在以下两个样式

//自定义样式，表头改变背景色
.layui-form th{
   background-color: #f3f3f3;
}

//layUi.css自带样式，relative导致异常
.layui-table td, .layui-table th{
    position:relative
}
//以上两个样式共存时会导致IE下layui的表格表头边框消失，

　　解决办法：覆盖  .layui-table td, .layui-table th的position样式,只要不为relative即可

//覆盖样式解决IE下表头边框消失问题
.layui-table td, .layui-table th{
    position:inherit
}

 5、Layui form.val() 赋值失败，表单赋值没有效果

　　问题：开发时需要做一个下拉列表选择后判断是否 和其他下拉框重复，如果重复则选择不成功的逻辑，需要在选择判断不成功后重新赋旧值。在赋值时发现赋值执行后没有任何反应。

　　原因：赋值语句参数不规范导致的（排除常见的原因：form没有引入，form第一个参数为lay-filter值，不是名称）

　　解决：

 var oldVal = $(obj.elem).data("value");
 var name = $(obj.elem).attr('name');
 //直接在赋值语句里构造对象，赋值无效，原因未知
 //form.val($("div[lay-id=configRuleTable]").attr("lay-filter"),{name:oldVal});
 //先构造好对象再赋值，赋值有效
 var formData = {};
 formData[name] = oldVal;
 form.val($("div[lay-id=configRuleTable]").attr("lay-filter"),formData);

 

6、LayUi table表格删除数据行但不刷新表格的方案，删除行不重新加载表格

　　问题：table使用行工具按钮删除数据行，调用 e.del()方法删除数据后，表格缓存的数据还是存在该条数据，只是数据内容为“[]”,进一步使用splice删除缓存的数据后出现缓存的数据index（顺序下标）与数据中的LAY-TABLE-INDEX列不一致问题，导致第二次及以上次删除时页行dom删除成功，但缓存数据被删除的并不是所选的数据，出现该删除没删不该删的被删的问题。

　　原因： 第一次删除后，下标和LAY-TABLE-INDEX就已经不一致了，需要重新加载表格使缓存数据和页面dom结构重新渲染，缓存下标和LAY-TABLE-INDEX重新对齐。但是在本次需求过程中大面积使用了自定义模板+form表单元素渲染表格，复杂的自定义表单元素在操作后不方便调用表格的update方法更新缓存数据（所以表格的缓存数据实际上与页面展示的数据不一样了），故而不能调用重新渲染表格的方法（如果调用会导致已经修改的form元素还原）。

　　解决办法：

　　　　1、删除表格行时，调用obj.del()方法删除行dom和缓存数据，缓存数据改行会变成空数组 “ [] ”,对后续数据操作(如获取数据）不利

　　　　2、一般通过删除后立刻table.reload({data:新的缓存数据})方式刷新表格，使得表格重新渲染来保证表格最新数据状态正常

　　　　3、如果需要删除后不刷新表格（如：表格中大量使用模板渲染，且模板中包含复杂的表单元素时，要在表单操作后更新表格数据很麻烦，采取方案为后续一次性获取表单数据并和表格的原有缓存数据合并字段后构成真正的数据对象。但不能删除行后刷新表格，否则表格会恢复成缓存的数据，表单操作丢失），可采用手动删除tr行并使用数据特征找到真正的下标删除缓存数据的方案。

　　　　

//表格行工具栏事件，多次删除且不刷新表格，obj.data可能不是想要删除的那行
         table.on('tool(configRuleTable)', function(obj){
             var data=obj.data;
             layer.msg(obj.event);
             if(obj.event=="isDel"){
                layer.confirm('确认删除？', function(index){
                  var cacheData = table.cache['configRuleTable'];
                  var idx = $(obj.tr).data('index');
                  //如果直接使用idx删除缓存中的数据，导致后面继续删除时数据中的LAY-TABLE-INDEX和数组下标不一致，需要每次删除后重新加载表格
                  //多次删除操作，如果不重载表格，下标和数据中的LAY-TABLE-INDEX（即dom中的index）就不一致了，需要找到数据在缓存中真正的下标
                  idx = cacheData.findIndex(function(o){
                                      return o['LAY_TABLE_INDEX'] == idx;
                         });
                  //使用obj.del() 方法会把obj.data数据在缓存中对应的记录删除，但是多次删除不刷新表格时obj.data不是页面上要操作的那行数据
                  //obj.del();
                  //使用手动移除tr行，再通过数据特征找到真正的下标移除缓存数据
                  $(obj.tr).remove();
                  cacheData.splice(idx,1);
                  layer.close(index);
                });
             }
         });

 7、layui表单下拉列表（select）和xmSelect下拉列表冲突，点击xmSelect的下拉列表时layui自带的下拉列表不会收起的问题

　　问题：layui自带的表单下拉列表（select）和xmSelect多选下拉列表混用，出现点击select展开下拉列表后再直接点击xmSelect下拉列表时select不会自动收起的问题，导致页面出现多个下拉列表展开，且可能相互遮挡 

　　原因：阅读源码form表单中有点击document的其他元素时hide下拉列表的逻辑，猜测xmSelect的源码中有类似的逻辑但和原生的逻辑有冲突

　　解决办法：

//修复xmselect 和layui的select 相互遮盖问题
$("xm-select").on('click',function(e){
     $('.layui-form-select').removeClass('layui-form-selected layui-form-selectup');
});

 

8、layui form表单阻止enter回车自动提交特性

　　问题：form表单里的下拉列表（xmSelect)有回车选中功能，和表单的回车查询冲突

　　解决办法：

　　

<!--button元素的类型为submit会有回车提交特性，改成type=button就没有了-->
<button type="button" class="layui-btn layui-btn-xs layui-btn-primary" lay-submit lay-filter="isRefresh">
          <i class="fa fa-refresh "></i> 刷新
</button>

 9、Layui 表格（treeTable表格等基于LayUi 表格的第三方控件）出现单元格内容过长出现省略号却无法查看全部，查看全部的操作方向箭头按钮消失的（或在表格最右边）问题

　　问题：如题

　　解决办法：一般来说都是因为自定义的css覆盖了td、th标签的position属性导致的，箭头按钮可能存在但在表格最右边，也可能直接不见了，奇奇怪怪的问题多。

.layui-table td, .layui-table th{
            position:relative !important;
}