Layui数据表格的宽高问题

标签: Layui数据表格的宽高设置问题
37人阅读 评论(0) 收藏 举报
分类:

在使用Layui数据表格的时候,如果采用固定数值的话,在不同浏览器里显示会有差异,特别是在不同分辨率设备上。针对以此,把width设置直接去掉,貌似解决了我的显示问题。

之前固定宽高的情况

/*-------table----------------*/
                            //方法级渲染
                            var tableIns = window.demoTable = table
                                    .render({
                                        elem : '#idTest',
                                        id : 'idTest',
                                        url : '<%=path%>/content/getWdkList',
                                        width : 1500,
                                        height : 650,
                                        cols : [ [ //标题栏
                                        {checkbox : true,LAY_CHECKED : false,filter : 'test'},
                                    //  {field : 'ID',title : '序号',width : 220,sort : true,align : 'center'}, 
                                    //  {field : 'CONTENT_TYPE_ID',title : '内容类型',width : 220,sort : true,align : 'center',templet:'#typeTpl'}, 
                                        {field : 'IMG_URL',title : '标题图片',width : 300,sort : true,align : 'center',templet: '#img'}, 
                                        {field : 'SUBJECT',title : '标题',width : 220,sort : true,align : 'center'}, 
                                        {field : 'RICH_TXT',title : '内容',width : 220,sort : true,align : 'center'}, 
                                        {field : 'CREATE_TIME',title : '创建时间',width : 120,sort : true,align : 'center'}, 
                                        {field : 'PUBLISH_STATE',title : '发布状态',width : 120,sort : true,align : 'center',templet:'#publish_state'}, 
                                        {fixed : 'right',title : '操作',width : 200,align : 'center',toolbar : '#barDemo'}
                                        ] ],
                                        page : true //是否显示分页
                                        ,
                                        limits : [ 10, 20,50, 100 ],
                                        limit : 10
                                    //每页默认显示的数量
                                    });

页面显示如下:

这里写图片描述

在页面右边显示了好多空白区域,不好看。

把宽度注释之后

//width : '100%',

界面显示如下:

这里写图片描述

右边的边框伸缩过去了,占满了全屏,好看些了,针对高度,再次试想了下height设置。

验证结果:

如果去掉的话,表格数据有多少条就多少高度。即宽高不设置,这长默认占满全屏,高度根据内容的高度来填充。

查找了几篇博客,看到height设置成full-200的,实验了一把

height : 'full-200',

显示的还可以,我以为跟数值大小有关,把200加大,试了下300,感觉没变化,改成full-700又严重变形了,估计full-200是layui table模块设置的一些预定义值吧。

查看评论

layui table设置单行高度以展示图片等

字段设置 ,{field: 'pic', title: '图片', width: 150,templet:''} 你可以在字段设置里加style:"height:150px;"自定义样式。 例如: {...
  • ardo_pass
  • ardo_pass
  • 2018-01-02 21:41:51
  • 2955

layui表格数据格式错误问题

layui表格数据,格式错误问题修复
  • sj0613xz
  • sj0613xz
  • 2018-01-02 18:19:35
  • 726

layui数据表格

发现一个问题,layui数据表格赋值已知数据时,若赋值‘test’这种类型的数据,它会自动把标签去掉。显示test...
  • jdd19971109
  • jdd19971109
  • 2017-12-19 15:02:09
  • 781

layui分页数据表格渲染

最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来 先说前端HTML和js代码 先下载layuijs文件,在...
  • ZksLoveLy
  • ZksLoveLy
  • 2018-01-30 09:40:42
  • 597

Layui数据表格调整行高

同时设置数据表格单元格的height和line-height样式,且属性值必须一致 .layui-table-cell{ height:36px; line-height: 36...
  • cccmercy
  • cccmercy
  • 2018-01-20 17:22:41
  • 1024

如何快速创建一个LayUI 数据表格

最近LayUI API频繁更新 ,碰巧做了个Demo,准备把项目中的table给换个方式显示,就着手做了一个基础的表格,先上个效果图。 HTML: ...
  • nnn_net
  • nnn_net
  • 2017-09-04 11:21:46
  • 673

layui数据表格时间戳转换为时间格式的方法

&amp;lt;script id=&quot;createTime&quot; type=&quot;text/html&quot;&amp;gt; {{createTime(d.creat...
  • qq_26173219
  • qq_26173219
  • 2018-03-27 10:52:22
  • 860

关于layui数据表格的分页操作的学习笔记。

-----初识layui,一个强大的前端框架。 在使用layui框架的时候需要引用layui相关文件。这里不做叙述直接传送门:layui官网 在官方文档中介绍了三种初始化渲染方式 ...
  • qq_16767917
  • qq_16767917
  • 2017-09-19 10:58:44
  • 1708

Layui给数据表格动态添加一行并跳转到添加行所在页

Layui数据表格动态添加一行问题 Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按...
  • cccmercy
  • cccmercy
  • 2018-01-20 01:48:53
  • 1780
    个人资料
    持之以恒
    等级:
    访问量: 14万+
    积分: 5018
    排名: 7034
    最新评论