layui 表格toolTip

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了layui 表格toolTip，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1825字，纯文字阅读大概需要3分钟。

内容图文

## 表格鼠标移入弹出显示

##### 使用方法

1、在layui 的table中的cols使用templet并在templet中使用tooltip包裹实际的内容

```
{field: 'startTime', align:'left',title: '发起时间',width:'12%',templet:function(d){
    return '<tooltip>' + createTime(d.startTime) + '</tooltip>'
}}
```

2、在table.render的down中添加renderTooltip()方法

```
// 渲染表格
    var tableResult = table.render({
        elem: '#' + orderProperty.tableId,
        url: ,
        method:'POST',
        contentType: 'application/json',
        //toolbar: '#toolbar', 
        where:{
            param:{
                flowType:flowType,
                workcardType:workcardType,
                workcardTypes:workcardTypes
            }
        },
        defaultToolbar: false,
        request: {
            pageName: 'pageNum', //页码的参数名称，默认：page
            limitName: 'pageSize' //每页数据量的参数名，默认：limit
           },
        parseData: function(res){ //res 即为原始返回的数据
            if(res.code == 200) res.code = 0;
            return {
              "code": res.code, //解析接口状态
              "msg":  res.msg, //解析提示文本
              "count": res.data.total, //解析数据长度
              "data": res.data.list //解析数据列表
            };
        },
        page: true,
//        height: tableHeight,
        cellMinWidth: 100,
        cols: orderProperty.initColumn(),
        done: function (res, curr, count) {
//            $('tr > td').css({'height':'95px'});
//            $('.layui-table-page').css({'border-width':'0px'});
            $('.layui-table-page').attr("align","right");
            console.info("============activiti/queryMyWorkFlowLists========done========");
            renderTooltip()
        }
    });
```

##### 页面取消原生展开

css中加入

```
[lay-id="orderTable"] .layui-table-grid-down{
    display: none
}
```

其中orderTable为表格id

##### 生成代码

位于js/utils.js中

```
function renderTooltip(){
    var tooltip 
    $("tooltip").each(function(index,element){
        var parent = element.parentElement
        element.onmouseenter = function(){
            if(parent.offsetWidth - 30 < element.offsetWidth){
                tooltip = layer.open({
                    type: 4,
                    content: [element.innerText, element], //数组第二项即吸附元素选择器或者DOM
                    shade: 0,
                    tips: 1
                  });
            }
        }
        parent.onmouseleave = function(){
            layer.close(tooltip);
        }
     });
}
```

 

内容总结

以上是互联网集市为您收集整理的layui 表格toolTip全部内容，希望文章能够帮你解决layui 表格toolTip所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---