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 相关文章推荐
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
JS实现滑动拼图验证功能完整示例
Mar 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 date函数参数详解
2006/11/27 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
AI人工智能 Python实现人机对话
2017/11/13 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
植树节活动总结
2014/04/30 职场文书
初中政治教学反思
2016/02/23 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python