要在Layui中的表格中实现鼠标移入显示Tips,你可以使用Layui的事件监听和Tips组件。
有两种实现方式!
第一种是,通过自定义鼠标事件显示 tips。在渲染 table 时,对 filed 进行重构,增加相应的选择器标识,一般为 class 选择器,然后针对选择器内容添加鼠标移入、移除监听,进行弹 tips 内容。
缺点是,需要对每个需要 弹tips的字段进行设置。
加载 渲染table代码如下:
tableIns = table.render({
elem: '#questionTable'
, url: '/scDictonary/selectDictionaryByNo?dictNo=' + dictNo
, toolbar: '#toolbar'
, defaultToolbar: ['']
, height: 'full-80'
, cols: [[ //表头
{field: 'dictNo', title: '编号'}
, {field: 'facility', title: '功能', templet: function (d) {
var str = '<div dictId="' + d.dictId + '" class="func_name"><span>' + (d.funcName || '') + '<span></div>';
return str;
}
}
, {title: '操作', align: 'center', toolbar: '#barDemo'}
]]
});
关键代码如下:
var layerTipIndex = null;
$(document).on('mouseover', '.func_name', function () {
var text = $(this).text();
var dictId = $(this).attr('dictid');
$(this).parent().attr('id', dictId);
layerTipIndex = layer.tips(text, '#' + dictId, {
tips: [1, '#78BA32'],
time: 0
});
});
$(document).on('mouseout', '.func_name', function () {
layer.close(layerTipIndex);
});
第二种是仅在超长时,鼠标移入显示 tips 标签内容。
实现方法:直接利用 layuiTable 中的组件功能,在渲染时,直接添加overflow: 'tips'这个设置。添加后表格中所有的超长内容,在鼠标移入后都可进行 tips 弹窗显示。代码示例图片如下:
实现效果如图: