icon-图标
1:√
2:×
3:问号
4:锁
5:哭脸
6:笑脸
7:感叹号
使用layer.msg('提示',{icon:1}); 目前只有7种图标可选,用的适当还是很好看的。
表格刷新
parent.layui.table.reload('表格的ID', { page: { curr: 1 } });
这种是弹出层页面刷新父窗体表格数据的惯用手法,但我把这种重载写成一个方法,父页面还是可以正常调用。如果在子窗体调用父窗体的这个方法则会出错。方法和layui.use在同一个script标签下,方法会失效,只能写在另一个script标签里面。
在IE浏览器中进行数据添加后,数据未能正确重载。这是因为IE浏览器在执行请求时,如果url请求参数一致,会默认调用缓存,这样你的数据依旧是初次加载的数据。
解决措施:在表格重载的条件中加一个时间参数,让它认为这是一个新请求就行了,就不会调用缓存。
where: { time:new Date()}
数据查询
在对表格进行查询等操作时,如果表格使用的是自动渲染,同时页面中有文本框查询,下拉框查询,这样进行查询时。如果你上一次使用了下拉框中的条件做了查询,当你再使用文本框进行查询时,下拉框的参数还是会携带上一次的值,导致查询结果异常。使用方法级渲染可避免此类问题,二者重载的方式存在差异。当然,有时候为了更方便的自定义表头,使用了自动渲染且条件参数相对较少,你可以考虑进行查询时给其他参数赋空值。
定位当前页
场景:在操作表格中,对第二页数据进行了修改操作,当你重载表格时,页码会自动跳到第一页,如何修改完成后,就停留在当前页呢?
$(".layui-laypage-btn")[0].click();
这是模拟分页的那个确定按钮,我遇到这个问题,在Layui社区搜到的答案。具体请见
https://fly.layui.com/jie/13973/
文件上传获取文件名
在官方的文档选择文件的回调中有这么一串代码,只是我并没有理解,所以不知道怎么获取,后来才知晓file参数所代表的含义。
,choose: function(obj){ //将每次选择的文件追加到文件队列 var files = obj.pushFile(); //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9) obj.preview(function(index, file, result){ console.log(index); //得到文件索引 console.log(file); //得到文件对象 这里已经说了得到了文件对象,那就可以直接file.name直接获取文件名 console.log(result); //得到文件base64编码,比如图片 //obj.resetFile(index, file, '123.jpg'); //重命名文件名,layui 2.3.0 开始新增
表格顯示圖片
有时候为了丰富表格内容,会对一些内容进行特别的样式编排,比如对某项内容使用a标签跳转,使用表单元素如checkbox来展示状态,这些都可以用templet模版来实现。那如何显示图片呢,下面就来说说实现方式,官方文档给出了三种templet语法方式,这里所使用的的是函数转义的方式。
templet:function (d) { return '<div><img src='+d.PrizeImg+'></div>' }
官方栗子:
table.render({ cols: [[ {field:'title', title: '文章标题', width: 200 ,templet: function(d){ return 'ID:'+ d.id +',标题:<span style="color: #c00;">'+ d.title +'</span>' } } ,{field:'id', title:'ID', width:100} ]] });
但存在缺点,对于图片的大小控制很难操控,可能是因为表格的单元格样式,我很想显示成一个略缩图的样子,但是没有实现,只是大致设了大小,显示一块内容内容,看起来是真的丑。?
表单元素渲染问题
我想实现一个复选框反选的功能,语法没问题,但最后就是没效果,后来才知道运用它的表单元素,得重新渲染才行。 form.render(); //更新全部
此外,如果表单用了样式,复选框的点击事件会失效,原因可能是上了一个皮肤,可能已经不认识它了,你如果不想用既定的样式,可以在元素样式中加上lay-ignore,这样就是原生的了。
日期插件
当一个页面想调用两个日期插件时,网上大佬已经给了答案,经测试可以使用。
同时,trigger: 'click' 也是解决时间插件闪屏的方法。
<script> function useLayDateMultiple(cls) { layui.use('laydate', function () { var laydate = layui.laydate; lay('#' + cls).each(function () { laydate.render({ elem: this, type: 'datetime', trigger: 'click' }); }); }); } useLayDateMultiple('第一个元素ID'); useLayDateMultiple('第二个元素ID'); </script>