脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Layui数据表格的宽高

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

 更新时间：2019年09月28日 16:05:15   作者：黄宝康  
今天小编就为大家分享一篇解决Layui数据表格的宽高问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

您可能感兴趣的文章:

相关文章

  • webpack组织模块打包Library的原理及实现

    webpack组织模块打包Library的原理及实现

    这篇文章主要介绍了webpack组织模块打包Library的原理及实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏

    用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏

    JavaScript在常人看来都是门出不了厅堂的小语言，仅管它没有明星语言的闪耀，但至少网页的闪耀还是需要它的，同时它是一门很实用的语言。
    2009-10-10
  • IE8对JS通过属性和数组遍历解析不一样的地方探讨

    IE8对JS通过属性和数组遍历解析不一样的地方探讨

    如果是非IE8浏览器例如（IE7、IE9、Chrome、FF，仅测试这几种）通过属性和数组遍历，其结果是一样的，但对于IE8，结果会有一点小小的差异，在IE8下会把原型链扩展方法当做一个属性输出，大家可以测试一下
    2013-05-05
  • Js代码中的span拼接问题解决

    Js代码中的span拼接问题解决

    这篇文章主要介绍了Js代码中的span拼接问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 使用ESLint禁止项目导入特定模块的方法步骤

    使用ESLint禁止项目导入特定模块的方法步骤

    这篇文章主要介绍了使用ESLint禁止项目导入特定模块的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JS工厂模式开发实践案例分析

    JS工厂模式开发实践案例分析

    这篇文章主要介绍了JS工厂模式开发,结合具体实践案例形式分析了基于javascript工厂模式实现的轮播功能相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • javascript ImgBox透明遮罩层背景图片展示

    javascript ImgBox透明遮罩层背景图片展示

    javascript ImgBox透明遮罩层背景图片展示,就是增加了一个关闭按钮，比较实用。
    2009-07-07
  • JavaScript DOMContentLoaded事件案例详解

    JavaScript DOMContentLoaded事件案例详解

    这篇文章主要介绍了JavaScript DOMContentLoaded事件案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • uniapp项目使用防抖及节流的方案实战

    uniapp项目使用防抖及节流的方案实战

    防抖就是指触发事件后把触发非常频繁的事件合并成一次去执行,节流是指频繁触发事件时只会在指定的时间段内执行事件回调,即触发事件间隔大于等于指定的时间才会执行回调函数,这篇文章主要给大家介绍了关于uniapp项目使用防抖及节流的相关资料,需要的朋友可以参考下
    2023-01-01
  • JS去掉字符串前后空格、阻止表单提交的实现代码

    JS去掉字符串前后空格、阻止表单提交的实现代码

    这篇文章主要介绍了JS去掉字符串前后空格、阻止表单提交的实现代码，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06

最新评论