Layui常用技巧整理
Layui常用技巧整理
- 一.layui table 列默认情况超长省略号问题
- 二.layui table 列转换问题
- 三.layui table 操作栏根据字段展示问题
- 四.layui 校验问题
- 五.layui table 列title问题
- 六.js一般方法中调用layui,以confirm为例
- 七.当前页面刷新：
- layui table 列默认情况超长省略号问题
- layui table 列转换问题
- layui table 操作栏根据字段展示问题
- layui 校验问题
- layui table 列title问题
- js一般方法中调用layui
一.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:'{{d.companyName}}'},
{field: 'cardNum', title: '发卡数', width:80}
]]
});
二.layui table 列转换问题
在指定字段后面同样加上模板转换操作：
templet:’#transStatus’
在js中的id中医用templet的值，这样指定的字段的内容就会被替换；
<script type="text/javascript" id="transStatus">
{{# var fu = function(){
var trans = d.uploadStatus;
if(trans == 0){return '待上传';}
if(trans == 1){return '上传失败';}
if(trans == 2){return '上传成功';}
}
}}
{{fu()}}
</script>
三.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"></i>手动上传</a>
{{# } else { }}
<a class="layui-btn layui-btn-xs layui-btn-disabled" ><i class="layui-icon"></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">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();