Layui常用技巧整理

• layui table 列默认情况超长省略号问题
• layui table 列转换问题
• layui table 列表表头会出现空表列
• layui table 操作栏根据字段展示问题
• layui 校验问题
• layui table 列title问题
• js一般方法中调用layui
• layui在form表单中设置弹窗，没有反应，但是form外正常
• table 添加横向滚动条

一.layui table 列默认情况超长省略号问题

在指定字段的后面添加模板转换：

将field换成要转换的相应属性即可，这样当列中内容超长后，鼠标悬浮会显示全部内容；

 table.render({
				    elem: '#dataForTable',
				    height: 340,
				    skin: "nob",//去掉内边框
				    url:'${pageContext.request.contextPath}/issueVehicleStatic/topCompanyName',
				    page: false, //开启分页
				    cols: [[ //表头
				      {field: 'index', title: '排序', fixed: 'left', type: 'numbers'},
				      {field: 'companyName', title: '企业名称', width:140,templet:'<div><span title="{{d.companyName}}">{{d.companyName}}</span></div>'},
				      {field: 'cardNum', title: '发卡数', width:80}
				    ]],
				    done: function (res, curr, count){//让table自适应屏幕
					$("table").css("width", "100%");
				}
			  });

二.layui table 列转换问题

在指定字段后面同样加上模板转换操作：
templet:’#transStatus’
在js中的id中医用templet的值，这样指定的字段的内容就会被替换；

<script type="text/javascript" id="transStatus">
       {{# var fu = function(){
           var trans = d.uploadStatus;
           if(trans == 0){return '<a class="" style="color:#DAA520" >待上传</a>';}
           if(trans == 1){return '<a class="" style="color:red" >上传失败</a>';}
           if(trans == 2){return '<a class="" style="color:green" >上传成功</a>';}
        }
       }}
     {{fu()}}
  </script>

三. layui table 列表表头会出现空表列

done: function (res, curr, count){//让table自适应屏幕
					$("table").css("width", "100%");
				}

四.layui table 操作栏根据字段展示问题

根据table 列中某一列的值可以选择的添加操作栏的按钮：
比如根据上述标题2的状态显示不同的操作按钮；如下代码：

<script type="text/html" id="barIndex">
		{{#  if(d.uploadStatus ==0 ||d.uploadStatus ==1){ }}
   				 <a class="layui-btn layui-btn-xs" lay-event="uploadData"><i class="layui-icon">&#xe681;</i>手动上传</a>
		{{#  } else { }}
				<a class="layui-btn layui-btn-xs layui-btn-disabled" ><i class="layui-icon">&#xe681;</i>手动上传</a>
 		{{#  } }}
	</script>

五.layui 校验问题

页面：

<div class="layui-form-item">
                <label class="layui-form-label"><span class="star">*</span>姓名：</label>
                <div class="layui-input-inline">
                    <input id="realname" type="text" name="realname" value="${companyUser.realname }" class="layui-input" autocomplete="off" lay-verify="required|realname" maxLength="200"/>
                </div>
                <label class="layui-form-label"><span class="star">*</span>联系电话：</label>
                <div class="layui-input-inline">
                    <input id="phone" type="text"  name="phone" value="${companyUser.phone }" class="layui-input" autocomplete="off" lay-verify="phone"/>
                </div>
            </div>

js代码：

form.verify({
		  phone : function(value) {
			  	if(!(/^1[3456789]\d{9}$/.test(value))){ 
			        return "手机号码有误，请重填"; 
			    } 
				var datas={phone: value.trim(),id:id};
				var message = '';
				$.ajax({
					  type:"POST",
					  url:"${pageContext.request.contextPath}/companyUser/findPhone",
					  async: false,
					  contentType:'application/json;charset=UTF-8',
					  data:JSON.stringify(datas),
					  dataType:'json',
					  success:function(data){
						  if(data){
						  }else{
						   message ="手机号码已存在，请重新输入！"
						  }
					  }
				});
				if (message !== ''){
					return message;
				} 
			},
			 realname : function(value) {
				 if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
					 return '用户名不能有特殊字符';
			     }
				 if(/(^\_)|(\__)|(\_+$)/.test(value)){
					return '用户名首尾不能出现下划线\'_\'';
				}
				if(/^\d+\d+\d$/.test(value)){
					 return '用户名不能全为数字';
				}
			 }
		});
	  

六.layui table 列title问题

为title 添加图标或者进行date转换

{
	field : 'updateTime',
	align : 'left',
	title : '更新时间  <i class="layui-icon">&#xe619;</i> ',
	templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
}

七.js一般方法中调用layui,以confirm为例

html:

<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item top-item" style="width:200px;right:0px;">
					<a href="javascript:void();" id="content" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">欢迎:${currentUser.name}登录系统！</a>
				</li>
				<li class="layui-nav-item top-item"><a
					href="javascript:exitSystem();">退出</a></li>
			</ul>

js:

	//退出系统
	function exitSystem() {
		layui.use(['layer', 'form'], function(){
			  var layer = layui.layer;
			  var form = layui.form;
			
			  layer.confirm('确定要退出系统吗?', {icon: 3, title:'提示'}, function(index){
				  //do something
				  window.location.href = "${pageContext.request.contextPath}/xxx/login";
				  layer.close(index);
				});
			});
	}

八.当前页面刷新：

window.location.reload();

九.layui在form表单中设置弹窗，没有反应，但是form外正常

弹出层放在form表单中，弹出层一闪而过,问题出在button的属性问题上，因为button按钮标签的type属性值有 button、submit、reset，如果不指定属性，默认会是submit属性，所以在form 表单中要设置按钮属性：type=button,就可以了。

table 添加横向滚动条

1.添加table样式
.layui-table-body {
overflow: auto;
}
2.添加字段宽度
cellMinWidth:160,
3.固定指定字段