layUI table操作列中tips使用

layUI table操作列中tips使用

有时候table表格渲染时，对于操作列的按钮特别长时，需要提示信息tips。

第一步：

table.render({
    cols: [[ //表头
         {fixed: 'right',title: '操作', width:200, align:'center', toolbar: '#operation'} //这里的toolbar值是模板元素的选择器
     ]],
)}

第二步：

<%-- 表格操作列模板 --%>
<script type="text/html" id="operation">
	<%-- data-d  自定义属性用于在tips中显示想要的内容--%>
    <a class="layui-btn layui-btn-xs" data-d="" onmouseover="showProStatus(this)" lay-event="proStatus">查看</a>
</script>

第三步：

<%-- 函数 --%>
<script type="text/html" id="operation">
	// 操作列tips
    function showProStatus(t) {
        // var row = $(t).attr('data-d'); // 获取显示内容 若需要，把tips第一个属性替换为row
        layer.tips('查看项目情况',t,{
			tips:1,           // 在标签上面显示tips
			time:1000     // 1秒消失
		})
    }
</script>