项目需求:在表头中添加图标,用于提示用户信息
先上效果图:
实现的核心代码:
let cols=[[
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名<i id="hint" class="layui-icon layui-icon-about"></i>', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]],
table.render({
cols:cols,
done(){
let tips_index=0
$('#hint').mouseover(function(){
tips_index=layer.tips('需要提示的文字','#hint',{
tips:1
})
})
$('#hint').mouseout(function(){
layer.close(tips_index)
})
}
})