layui框架中鼠标放在表头上显示表头全部内容

1，前几天有一个需求，就是layui框架中，表格的表头和单元格，由于内容太多，一个单元格装不下，显示 的是省略号。

现在要做到，鼠标放上去，能够显示溢出的内容。话不多说，看效果。

 

我记得html中有一个title的属性可以解决这个问题，但是，在layui这个框架中，如何实现呢？

var sex  ="这就是表头的属性";//字符串赋值

var sex  ="<?php echo '这就是表头的属性';?>";//使用php语言输出的字符串赋值，前提是这个页面是php文件

 

table.render({
                    elem: '#test'
                    ,url: './query.php' //数据接口
                    ,request: {
                        limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
                    ,skin: 'line'
                    ,cellMinWidth:80
                    ,page: true //开启分页
                    ,cols: [[ //表头
                      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                      ,{field: 'name',title: '用户名', width:80,}
                      ,{field: 'sex', title: '<span title="'+sex+'">'+sex+'</span>', width:80, sort: true,
templet:'<div><span title="{{d.sex}}">{{d.sex}}</span></div>'}
                      ,{field: 'age', title: '年龄', width:80} 
                    ]]
                });

如果要实现表头，鼠标放上去显示省略内容的话，就是在filed这个字段中加上 title: '<span title="'+sex+'">'+sex+'</span>', 

如上图。

如果是实现表格单元格，鼠标放上去显示省略内容的话，就是在filed这个字段加上 templet:'<div><span title="{{d.sex}}">{{d.sex}}</span></div>'

如上图。

博客地址:http://blog.gaokai.fun/