LayUI

网站

给Layui数据表格选中行增加自定义样式，看表格可以更轻松

通过最新版的Layui文档可以看到，Layui本身提供了数据表格的单击、双击事件的监听，那么整体就简单很多。文档的描述是这样的：可以看到，通过如下方式，即可获取当前行：

table.on('row(test)', function(obj){
  console.log(obj.tr) //得到当前行元素对象
  console.log(obj.data) //得到当前行数据
  //obj.del(); //删除当前行
  //obj.update(fields) //修改当前行数据
});

1

2

3

4

5

6

table.on('row(test)', function(obj){

console.log(obj.tr) //得到当前行元素对象

console.log(obj.data) //得到当前行数据

//obj.del(); //删除当前行

//obj.update(fields) //修改当前行数据

});

如果要改变当前行的颜色，则这样写：

// 改变行样式 
      table.on('row(customerTable)', function(obj){
            $(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样
            console.log(obj.tr.selector) //得到当前点击的tr
            $(obj.tr.selector).attr({"style":"background:#00BBFF;color:#fff"});//改变当前tr颜色
     
        });

1

2

3

4

5

6

7

// 改变行样式

table.on('row(customerTable)', function(obj){

$(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样

console.log(obj.tr.selector) //得到当前点击的tr

$(obj.tr.selector).attr({"style":"background:#00BBFF;color:#fff"});//改变当前tr颜色

});

实际的结果如下：

蓝洛水深

2022年1月19日

023.8K0

网站

layui util.timeAgo的用法详解

文档中关于util.timeAgo的说明是：怪我刚开始没注意看，我以为这个方法会和util.countdown相对，显示多少天以前，多少月以前，实际操作下来并不是这样的。比如我们已经按文档要求定义了两个参数endTime和serverTime，那么util.countdown是这样写的：

var endTime = new Date(2099,1,1).getTime() //假设为结束日期
  ,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
   
  util.countdown(endTime, serverTime, function(date, serverTime, timer){
    var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
    layui.$('#test').html('距离2099年1月1日还有：'+ str);

1

2

3

4

5

6

var endTime = new Date(2099,1,1).getTime() //假设为结束日期

,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的

util.countdown(endTime, serverTime, function(date, serverTime, timer){

var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';

layui.$('#test').html('距离2099年1月1日还有：'+ str);

u…

蓝洛水深

2022年1月5日

021.1K0

网站

如何给layui的表单提交增加一个load遮罩层

在日常开发中，如果后端需要对前端发送过来的信息进行处理，较为复杂的逻辑情况下，可能会需要一定的时间，如果前端没有很好的解决这个时间，就会让用户体验降低。首先用户并不知道是否已经点击成功提交，其次用户也不知道后端处理进度到哪，什么时候能返回。所以，我们需要在提交的过程，增加一个回调，或者在执行提交就增加遮罩层。和upload模块不同，upload模块给出…

蓝洛水深

2022年1月5日

002.6K0

网站

Layui上传文件添加一个加载层动画

网上随便搜了一下，找到一些方法，比如： https://blog.csdn.net/cainiao0589/article/details/100099567 https://blog.csdn.net/weixin_39218464/article/details/106663107 而我用到的是实例化的upload，通过layui内置的方法完成上传，所以…

蓝洛水深

2021年12月8日

022.1K0

网站

Layui中将laydate的值动态赋值到upload作为上传接口请求地址的方法

一、错误方向起初，我按照jquery的方法，定义了year和month，值是对应dom元素的val，奇怪的是，我在laydate中改变这两个值，并没有传递出来，故而一开始我的方向是怎么将laydate的值传出。

var year = $("#data_year").val();
var month = $("#data_month").val();

1 2	var year = $("#data_year").val(); var month = $("#data_month").val();

尝试搜索后，能通过好几种方式更新这个值，这些方法包括：[crayon-661b10d…

蓝洛水深

2021年11月25日

011.4K0

网站

Layui数据表格导出身份证时后三位变为000的解决办法（templet一句话搞定）

在使用layui自带的数据表格导出功能时，身份证后三位显示为000，导致数据表无法使用的情况，如下图：其实要解决的话，非常简单，万不可参照网上那种千篇一律的文章，即所谓的插件包，比如这样：https://www.cnblogs.com/onesea/p/13711821.html 只需要在对应的列，使用templet模板，添加转义符/t即可。参考代码如下…

蓝洛水深

2021年11月11日

088581

网站

Layui数据表格怎么写一个通用的模板？多列数据相同返回时的写法

通常，我们以templet: ratio参数作为Layui的数据表格模板，再对ratio进行定义，即可实现。我们只需要做一些简单的返回，比如state判断，0输出一个button，1输出另一个button。需求在实际开发过程中，我遇到一个需要使用通用模板返回不同数据的需求。即所有列都定义一个相同的templet名称，通过获取layui当前列名称和所在…

蓝洛水深

2021年11月2日

013760

网站

Layui使用confirm后$(this).parent().parent().remove()无效的解决办法

在内部的代码中，删除是不生效的，代码如下：

layer.confirm('是否确认删除？', function(){
          $(this).parent().parent().remove();
          layer.close(index); 
          layer.msg('正在删除', {icon: 16}, function(){
            layer.msg('成功删除', {icon: 1})
            
          });
        });

1

2

3

4

5

6

7

8

layer.confirm('是否确认删除？', function(){

$(this).parent().parent().remove();

layer.close(index);

layer.msg('正在删除', {icon: 16}, function(){

layer.msg('成功删除', {icon: 1})

});

而如果不用layer.confirm，直接用系统对话框，是能正常执行。所以，要解决这个问题，就必须先声明$(this).parent().parent() 也就是在layer.confirm的上面，先var一个变量等于$(this).parent().…

蓝洛水深

2021年10月26日

037460

网站

Layui 按钮disabled后，仍然能触发点击事件

其实这是一个事故，是一个表意的视觉端的事故，甚至我觉得算不上BUG。起因：

attr("class", "layui-btn layui-btn-disabled");

1	attr("class", "layui-btn layui-btn-disabled");

将按钮设置为disabled，看起来样式也改变了，鼠标滑动也显示正确的手势，但是就是能触发点击事件？为什么明明disabled了，还是能触发点击呢？其实这是因为，并没有真的设置disabled，上面的代码只是设置了“…

蓝洛水深

2021年10月22日

033.2K0

系统

Layui中怎么在表单进行文件下载 ajax？blob？

刚开始我用的AJAX请求的后端，但是返回的数据流被解析成字符串，无法下载。其实整个下载逻辑已经在后端进行判断，有无权限都由后端返回，所以前端就是一个请求而已。 layer.open 一个layer.open也是能实现下载，会一直显示加载状态，代码如下：

layer.open({
            type: 2,
            title: '下载',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '70%'],
            content: '/index/management/certificate_download/id/' + data.id
          });

1

2

3

4

5

6

7

8

layer.open({

type: 2,

title: '下载',

shadeClose: true,

shade: 0.8,

area: ['80%', '70%'],

content: '/index/management/certificate_download/id/' + data.id

});

文件下载后这个窗口一直在转圈圈。网上搜索…

蓝洛水深

2021年10月20日

011.2K0