解决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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
解决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
数据库的日期格式转换
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
保护水资源的标语
2014/06/17 职场文书
法制宣传标语集锦
2014/06/25 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript