Layui implementiert benutzerdefinierte Hover-Ereignisse für Tabellenspalten und Informationen zu Blasenaufforderungen

1. Übersicht

Verwenden Sie die Laui-Komponente, um die Eingabeaufforderungsinformationen zu implementieren, wenn Sie mit der Maus über die angegebene Spalte der Tabelle fahren. Da es in der Laui-Komponente keine Unterstützung für Maus-Hover-Ereignisse gibt, müssen Sie js native Ereignisse kombinieren, um diese Funktion zu implementieren, und die Tipps von Laui und kombinieren Erzielen Sie den gewünschten Effekt, indem Sie die Eingabeaufforderung für die Vorlagenattributblase der Spalte eingeben.

2. Effektzeichnung

3. Codefälle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui Table Tooltip</title>
    <!-- 引入 Layui 的 CSS 文件 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.css" rel="stylesheet">
</head>
<body>

<!-- Layui 表格容器 -->
<table id="demo" lay-filter="test"></table>
<!-- 引入 Layui 的 JavaScript 文件 -->
<script>
    // 使用 layui
    layui.use(['table'], function(){
	    var layer = layui.layer;
        var table = layui.table;
		var tips;
        // 定义数据
        var data = [
            {id: 1, name: 'John', age: 25},
            {id: 2, name: 'Jane', age: 30},
            // 添加更多数据...
        ];

        // 渲染表格
        table.render({
            elem: '#demo',
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: 'Name', templet: function(d) {
					return '<span id="'+d.id+'"  onmouseover="show('+d.id+')" onmouseout="closeTip()">' + d.name+'</span>';
				}}, // 添加 event 属性
                {field: 'age', title: 'Age'}
                // 添加更多列...
            ]],
            data: data
        });
		window.show = function(d) {
		tips = layer.tips(showTemplate(d), "#"+d, {
			tips: [3, '#F8F8F8'],
			area: ['400px','auto']
			});
		}
		window.closeTip =function() {
		 layer.close(tips);
		}
		window.showTemplate = function(d) {
		let html = '<fieldset class="layui-elem-field" style="color:black">' +
				   '<legend style="font-size:14px;">系统规则数量统计</legend>' +
                   '<div class="layui-field-box">'+d+'</div></fieldset>';
		 return html;
		}
    });

</script>

</body>
</html>

Layui implementiert benutzerdefinierte Hover-Ereignisse für Tabellenspalten und Informationen zu Blasenaufforderungen

おすすめ