layuiadmin（iframe）常⽤问题集锦
1. 弹出窗⼝中传值给⽗层表单
<('tool(tableList)', function(obj){
var selected = obj.data;
var layEvent = obj.event;
if(layEvent === 'selected'){
parent.layui.$('#ptCode').val(selected.ptCode);  //此处给⽗层表单字段ptCode传值
parent.layer.close(index);
}
});
2.弹窗⼝中关闭⾃⾝
index=FrameIndex(window.name);  //先获得⽗层窗⼝索引
parent.layer.close(index); //再关闭
3. 实时监控输⼊框中⽂本变化
这个在实时模糊查询中特别常见，
#keywords为输⼊框的id。先获取输⼊框的值，然后执⾏表格的查询操作。
$("#keywords").on("input",function(e){
//获取input输⼊的值
var keywords = e.delegateTarget.value;
});setoption
4. 表单的输⼊框后⾯添加按钮，并触发按钮事件
<div class="layui-inline">
<label class="layui-form-label-sm">商品信息</label>
<div class="layui-input-inline-sm">
<input type="text" id="ptCode" name="ptCode"  class="layui-input-sm">
<i class="layui-icon layui-icon-template-1 layui-btn layui-btn-sm" data-type="popSearchProduct" ></i>                  </div>
</div>
看看效果，下⾯商品后⾯有个按钮，⽤来弹出搜索框：
5. 按钮触发事件
layui的按钮触发事件有⼏种，这⾥介绍⼀种常⽤的：
//根据表单中data-type的值判断
active={
popSearchProduct: function(){
layer.open({title: '商品搜索', type:2, offset:'50px', area:['620px','510px'], content: ctx + '/product/productSearch' });
}
};
//触发表单中带layui-btn-sm的按钮的单击事件
$('.layui-btn-sm').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
6. 指定默认⽇期作为查询条件
刚开始进⼊查询页⾯时，默认条件都为空，查询所有。如何指定默认⽇期作为开始查询条件。
在开始查询时，添加where条件，填写默认查询条件。
elem: '#lay-tableList'
,url: ctx+'/customInfo/ajaxCustomInfoList'
,size:'sm'
,cellMinWidth: 80
,request: {
pageName: 'pageNo'
,limitName: 'pageSize'
}
,method: 'post'
,where:{
status: "0"
,
startDate: DateString(new Date()-1000*60*60*24*30, 'yyyy-MM-dd')
}
注意：应该算个缺陷，开始进⼊页⾯时查询的时间参数传递到后台了，但是前端页⾯上还是没有显⽰出这个时间。
这⾥where必须何form.val结合使⽤。因为只是在where添加查询条件，但是界⾯显⽰不出来查询条件的值。
//设置表单初始值
form.val('searchForm', {
status: "0"
,startDate: DateString(new Date(new Date() - 1000 * 60 * 60 * 24 * 30),'yyyy-MM-dd')
});
7. Layui iframe如何清理缓存
我⽤的是iframe的，所以下⾯这段放到通⽤的header⾥⾯就⾏了。这样每次修改了layui内容或者升级版本的时候，在通⽤的⽂件中直接修改这⾥的版本号就可以了。
⼀直很想吐槽，官⽅⽂档很多地⽅写的⼀知半解的，让⼈丈⼆和尚摸不着头脑。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/commons/taglibs.jsp"%>
<c:set var="ctx" value="${tPath}" />
<script type="text/javascript">
//定义全部变量
var ctx = "${tPath}";</script>
<link type="text/css" href="${ctx}/resources/layuiadmin/layui/css/layui.css" media="all" rel="Stylesheet" />
<link type="text/css" href="${ctx}/resources/layuiadmin/style/admin.css" media="all" rel="stylesheet">
<script type="text/javascript" src="${ctx}/resources/layuiadmin/layui/layui.js"></script>
<script>
version: '20190604'
,base: ctx + '/resources/layuiadmin/'
});
</script>
8. 关于弹窗⾼度⾃适应写法
我原来是宽度和⾼度，都是⼿⼯写的。每次表单增减字段时，也是⼿⼯去改这个⾼度。
原来以为只有我这么⼲的，后来在⾥聊天发现也有很多跟我⼀样，也是这么⼿⼯调整的。
在弹窗的成功回调函数中写layer.iframeAuto(index);
var index2 = layer.open({
title: '添加报废单'
,type: 2
,offset: '50px'
,area: '60%'
,content: ctx + '/saleReturnOrder/popScrap?id='+ line.id
,success: function(layero, index){
layer.iframeAuto(index);
}
});
看看官⽅⽂档，呵呵，有些东西⼀点就破，很多时候是因为差了那么⼀点点⽕候：
9. table中的数据校验
这段也是在社区⾥⾯扒出来的，⽤于在table中使⽤编辑表格时的校验，功能体验很赞：
//数据校验
<('edit(tableList)', function(obj){
var lineData = obj.data;
var value = obj.value;
var field = obj.field;
var inputElem = $(this);
var tdElem = inputElem.closest('td');
var valueOld = inputElem.prev().text();
var  data = {};
var errMsg = ''; // 错误信息
if (field === 'tmpRepairQty') {
var re = /^(\-|\+)?\d+(\.\d+)?$/;
if (!re.test(value)) {
errMsg = '只允许输⼊数字';
}
if (value < 0) {
errMsg = '数量不允许⼩于0';
}
var returnQty = urnQty | 0;
var scrapQty = lineData.scrapQty | 0;
var repairQty = pairQty | 0;
var value = value | 0;
var openQty = returnQty - scrapQty - repairQty;
if(value > openQty ){
errMsg = '数量不允许⼤于未结数量' + openQty;
}
}
if (errMsg) {
// 如果不满⾜的时候
data[field] = valueOld;
layer.msg(errMsg, {time: 1000, anim: 6, shade: 0.01}, function () {
inputElem.blur();
obj.update(data);
tdElem.click();
});
}
10. 如何在layui中使⽤echarts
⾸先使⽤继承⽅式引⼊echarts和echartsTheme，注意两个都要，⼀个页⾯中只需要引⼊⼀次。
然后轮播切换这段函数也要保留。不然图⽚没法显⽰。
下⾯的ajax请求根据echarts官⽅⽂档，⾃⼰发挥。
//最近30天成交趋势
echartsTheme: 'lib/extend/echartsTheme'
,echarts: 'lib/extend/echarts'
}).use(['carousel', 'echarts'], function(){
var $ = layui.$
,carousel = layui.carousel
,element = layui.element
,device = layui.device();
//轮播切换
$('.layadmin-carousel').each(function(){
var othis = $(this);
elem: this
,width: '100%'
,arrow: 'none'
,interval: othis.data('interval')
,autoplay: othis.data('autoplay') === true
,trigger: (device.ios || device.android) ? 'click' : 'hover'
,anim: othis.data('anim')
});
});
//-------------------------以上必须要---------------------------------------------------
$.ajax({
url: ctx +'/biGeneral/ajaxLineChart'
,type:'post'
,dataType: 'json'
,success: function(res){
var echartsApp = [], options = [{
tooltip : {trigger: 'axis'},
calculable : true,
legend: {data:['订单量','销售额'] },
toolbox: {show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [{ type : 'category',data :res.date }],
yAxis : [{type : 'value', name : '订单量', axisLabel : {formatter: '{value} 个'}},
{type : 'value', name : '销售额', axisLabel : {formatter: '{value} 元'}}
],
series : [
{name:'订单量', type:'line', data: derCount, markPoint: {data : [{type : 'max', name: '最⼤值'},{type : 'min', name: '最⼩值'}]} },
{name:'销售额', type:'line', yAxisIndex: 1, data: res.saleAmt, markPoint: {data : [{type : 'max', name: '最⼤值'},{type : 'min', name: '最⼩值'}]} },                                  ]
}]
,elemDataView = $('#trade_last30day').children('div')
,renderDataView = function(index){
echartsApp[index] = echarts.init(elemDataView[index], hartsTheme);
echartsApp[index].setOption(options[index]);
};
//没到DOM，终⽌执⾏
if(!elemDataView[0]) return;
renderDataView(0);
} //success
});
});
});
截图是随便截的，不代表上⾯代码。
11. layui表格⾏⼯具栏和表格头⼯具栏监听
已知表格设置如下：
<table id="lay-tableList" lay-filter="laytool"></table>
1）表格头设置：
定义模版，设置唯⼀id值，添加事件选择器lay-event，然后在渲染时绑定到table中。
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layuiadmin-btn-list" lay-event="add">新增</button>
<button class="layui-btn layui-btn-sm layuiadmin-btn-list" lay-event="refresh">刷新</button>
</div>
</script>
设置表格头按钮监听事件，这⾥()⾥⾯是toolbar，意思为监听表格头，括号⾥⾯与table的lay-filter保持⼀致。
//监听表格头⼯具栏
<('toolbar(laytool)', function(obj){
if(obj.event === 'add') {
        //新增逻辑
};
if(obj.event === 'refresh'){
//刷新逻辑
}
});
2）表格⾏按钮监听
定义模版，设置唯⼀id值，添加事件选择器lay-event，然后在渲染时绑定到table中。
<script type="text/html" id="toolline">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
设置表格⾏按钮监听事件，这⾥⾥⾯是tool，括号⾥⾯与表格的lay-filter保持⼀致。
//监听⾏⼯具条
<('tool(laytool)', function(obj){
var selected = obj.data;
var layEvent = obj.event;
//修改维修单
if(layEvent === 'del'){

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。