关于layui 数据表格实现鼠标移动到单元格上显示动态数据的方法多重条件判断自定义模板【亲测有效】

本文链接：https://blog.youkuaiyun.com/Khun_HWJ/article/details/109720046

博客介绍了鼠标移动和点击展示的写法。鼠标移动写法包括数据表格数据渲染时添加模板名，templet不加function；自定义模板用div包裹，用span标签加属性显示内容；还提到在页面添加模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图：
在这里插入图片描述

鼠标移动的写法：

1、数据表格数据渲染，添加一个templet 加上模板的id名#status。
注意：这里的templet是不加function的
在这里插入图片描述
2、自定义模板的重点是要用div包一下，再用另一个标签span加上title属性并显示，将所展现的内容放到span标签中即可。

3、在页面中添加模板，如下：

<script id="status" type="text/html">
	{{#  if(d.store_service_status == 0){ }}
		{{#  if(d.vip_status == 0){ }}
		<div style="color:red"><span title="非会员用户" style="display:block;"><i class="tipss" style="background:red;"></i>未服务</span></div>
		{{#  }else if(d.borrow_count == 0){ }}
		<div style="color:red"><span title="还没有在本门店借书" style="display:block;"><i class="tipss" style="background:red;"></i>未服务</span></div>
		{{#  } }}
	{{#  }else if(d.store_service_status == 1){ }}
		<div style="color:green"><span title="从{{d.store_service_time}}起服务";display:block;><i class="tipss" style="background:green;"></i>服务中</span></div>
	{{#  }else{ }}
		<div style="color:orange"><span title="{{d.store_service_time}}转线上借书";display:block;><i class="tipss" style="background:orange;"></i>转线上</span></div>
	{{#  } }}
</script>

点击展示的写法

table.on('row(表格的filter名)', function(obj) {
	if (obj.data.store_service_status == 1) {
		layer.tips('从' + obj.data.store_service_time + '起服务', $(obj.tr.selector).find('td'));
	} else if (obj.data.store_service_status == 2) {
		layer.tips(obj.data.store_service_time + '转线上借书', $(obj.tr.selector).find('td'));
	} else {
		if(obj.data.vip_status == 0){
			layer.tips('非会员用户', $(obj.tr.selector).find('td'));
			return;
		}
		if(obj.data.borrow_count == 0){
			layer.tips('还没有在本门店借书', $(obj.tr.selector).find('td'));
			return;
		}
	}
});