layui table去掉右侧滑动条的实现方法


Posted in Javascript onSeptember 05, 2019

使用layui table后,table会自动有一个滑动条,使用时需要去掉,原理如下:

定义一个tab的父div id,在这个id中寻找 class为 layui-table-main,layui-form的标签,将高度设置为100%即可。

//在layui table加载完成后,重新设置表格高度为100%,不限制表格高度,不会在表格上出现垂直滚动条
 function AutoTableHeight()
 {
  var dev_obj = document.getElementById('table_and_page_div_id'); //table的父div
 
  var layuitable_main = dev_obj.getElementsByClassName("layui-table-main"); //在父div中找 layui-table-main 属性所在标签
  if (layuitable_main != null && layuitable_main.length > 0) {
   layuitable_main[0].style.height = '100%'; 
  }
 
  var layuitable = dev_obj.getElementsByClassName("layui-form"); //在父div中找 layui-form 属性所在标签
  if (layuitable != null && layuitable.length > 0) {
   layuitable[0].style.height = '100%';
  }
 }

在table的done事件中调用AutoTableHeigh()即可。

//table表格配置
 var g_table_config = {
  elem: '#device_list_table_id'
  , data: null
  , limit: cg_OnePageDataCount //每页显示50条
  , text: { none: '暂无相关数据' }
  , height: 'full-200'
  , cellMinWidth: 70 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  , page: false //开启分页
  , cols: [g_table_cols]
  // , even: true //开启隔行背景
  , size: 'sm' //小尺寸的表格 
  , done: function (res, curr, count) {
   //如果是异步请求数据方式,res即为你接口返回的信息。
   //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
   console.log(res);
 
   //得到当前页码
   console.log(curr);
 
   //得到数据总量
   console.log(count);
 
   AutoTableHeight();
  }
 };

最终效果如下:

layui table去掉右侧滑动条的实现方法

以上这篇layui table去掉右侧滑动条的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 #Javascript
layui动态加载多表头的实例
Sep 05 #Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 #Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 #Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 #Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 #Javascript
layer实现弹出层自动调节位置
Sep 05 #Javascript
You might like
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
python中的装饰器详解
2015/04/13 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
python实现共轭梯度法
2019/07/03 Python
Django model select的多种用法详解
2019/07/16 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
Python time库基本使用方法分析
2019/12/13 Python
python实现堆排序的实例讲解
2020/02/21 Python
python requests库的使用
2021/01/06 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
写给女朋友的检讨书
2014/01/28 职场文书
协议书范本
2014/04/23 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
什么是css原子化,有什么用?
2022/04/24 HTML / CSS