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 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 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中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
chrome调试javascript详解
2015/10/21 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
Vue代码整洁之去重方法整理
2019/08/06 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Python序列化基础知识(json/pickle)
2017/10/19 Python
python集合常见运算案例解析
2019/10/17 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
村抢险救灾方案
2014/05/09 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年医务科工作总结
2014/12/18 职场文书
涨价通知怎么写
2015/04/23 职场文书
步步惊心观后感
2015/06/12 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL