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 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JavaScript中Function详解
Feb 27 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
微信小程序下拉加载和上拉刷新两种实现方法详解
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中防止SQL注入最好的方法是什么
2013/06/10 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
JS原型对象通俗"唱法"
2012/12/27 Javascript
javascript中常用编程知识
2013/04/08 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python多线程同步之文件读写控制
2021/02/25 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
浅谈Python中的模块
2020/06/10 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
2014年维修电工工作总结
2014/11/20 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
工作态度怎么写
2015/06/25 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers