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


Posted in Javascript onSeptember 28, 2019

在使用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
         //每页默认显示的数量
         });

页面显示如下:

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

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

把宽度注释之后

//width : '100%',

界面显示如下:

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

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

验证结果:

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

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

height : 'full-200',

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

以上这篇解决Layui数据表格的宽高问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
vue页面跳转实现页面缓存操作
Jul 22 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 #Javascript
layui table 列宽百分比显示的实现方法
Sep 28 #Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 #Javascript
JavaScript实现轮播图效果代码实例
Sep 28 #Javascript
json字符串对象转换代码实例
Sep 28 #Javascript
javascript头像上传代码实例
Sep 28 #Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 #Javascript
You might like
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python获取本地计算机名字的方法
2015/04/29 Python
python协程用法实例分析
2015/06/04 Python
机器学习10大经典算法详解
2017/12/07 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python实现翻译word表格小程序
2020/02/27 Python
python 实现多维数组(array)排序
2020/02/28 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
音乐器材管理制度
2014/01/31 职场文书
英文自荐信常用句子
2014/03/26 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL