需求
鼠标悬浮在某一行的某个固定单元格，弹出提示信息
自定义模板
模板的标签自定义即可，尽量不要用HTML标签
<script type="text/html" id="runTimes">
<count id="runTimes_{{d.id}}" data-id="{{d.id}}" style="cursor:pointer;color: dodgerblue">{{d.runTimes}}</count>
</script>
绑定模板
table.render({
cols:[[
//其他行
{align: 'center', title: '播出次数', templet: '#runTimes'}
]]
});
绑定事件
table.render({
//其他js
done: function (res, curr, count) {
that.hoverRunTimes();
// 其他js
}
});
vue方法
hoverRunTimes() {
var showTips = null; // tips提示
$('tr count').hover(function () {
var id = $(this).attr('data-id');
//提示（设置字体颜色）
let rowId = "#runTimes_" + id;
$.ajax({
url: "/xxx/xxx",
type: "get",
data: {
cloudBroadcastId: id
},
async: false,
dataType: "json",
success: function (res) {
if (res.code == "200") {
//第一次 2021-11-29 9:00:00 已播出
let mapList = res.result.mapList;
let html = '';
if (res.result.listSize==0){
html = "<span style='color:black'>暂无播出记录！</span>";
}
$.each(mapList, function (i, item) {
html = html + "<span style='color:black'>第" + item.count + "次 " + $utils.formatTime2(item.createTime) + " " + (item.broadcastState == 0 ? '已播出' : '停止播出') + "</span><br>";
});
showTips = layer.tips(html, rowId, {
area: ['230px', 'auto'],
tips: [1, '#FFFFCC'],//显示方向以及背景颜色(1.上 2右 3下 4左)
time: 10000//4秒后销毁
});
} else {
return false;
}
}
});
}, function () {
layer.close(showTips);
});
}
悬浮效果
