在使用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数据表格排序图标被超出的表头挤出去的问题的使用技巧和注意事项,需要的朋友参考一下 如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了, 效果如下 解决办法就是给图标加定位,过长的时候加上 修改后效果如下 以上这篇解决layui数据表格排序图标被超出的表头挤出去的问题就是小编分享给大家的全部
本文向大家介绍layui表格数据重载,包括了layui表格数据重载的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了layui表格数据重载,供大家参考,具体内容如下 html代码 js代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍解决LayUI表单获取不到data的问题,包括了解决LayUI表单获取不到data的问题的使用技巧和注意事项,需要的朋友参考一下 前几天用LayUI表单进行AJAX提交的时候发现,function(data)里的data始终无法获取表单里填的值,当时我认为是出BUG了就用了$('#updateform').serialize()来获取表单数据 但是今天问题又来了,我发现我的LayUI
本文向大家介绍解决Android中自定义DialogFragment解决宽度和高度问题,包括了解决Android中自定义DialogFragment解决宽度和高度问题的使用技巧和注意事项,需要的朋友参考一下 关于详解Android应用中DialogFragment的基本用法,大家可以参考下。 1、 概述 DialogFragment在android 3.0时被引入。是一种特殊的Fragment,用
本文向大家介绍Layui数据表格之获取表格中所有的数据方法,包括了Layui数据表格之获取表格中所有的数据方法的使用技巧和注意事项,需要的朋友参考一下 数据表格中的数据是通过直接赋值的方式。这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格。 1、创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据。 2、将上一步创建的JS对象数组也就是原
本文向大家介绍layui使用templet格式化表格数据的方法,包括了layui使用templet格式化表格数据的方法的使用技巧和注意事项,需要的朋友参考一下 增加js /*---------------------格式化时间开始--------------------------*/ /*---------------------格式化时间结束--------------------------