解决Layui数据表格的宽高问题

网络编程 2024/12/26 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

在使用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数据表格的宽高问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

Layui,数据表格,宽高

标签：

Layui,数据表格,宽高

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“解决Layui数据表格的宽高问题”

暂无解决Layui数据表格的宽高问题的评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

解决Layui数据表格的宽高问题

Layui,数据表格,宽高

JavaScript获取页面元素的常用方法详解

解决layui-table单元格设置为百分比在ie8下不能自适应的问题

评论“解决Layui数据表格的宽高问题”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接