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

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

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

layui框架中鼠标放在表头上显示表头全部内容_第1张图片layui框架中鼠标放在表头上显示表头全部内容_第2张图片

 

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

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

var sex  ="";//使用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: ''+sex+'', width:80, sort: true,
templet:'
{{d.sex}}
'}                       ,{field: 'age', title: '年龄', width:80}                      ]]                 });

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

如上图。

如果是实现表格单元格,鼠标放上去显示省略内容的话,就是在filed这个字段加上 templet:'

{{d.sex}}
'

如上图。

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

你可能感兴趣的:(layui,table,鼠标放在表头,数据表格,显示省略内容)