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

2024-11-30 08:51:15

使用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的横向滚动条显示问题

加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列
layui table数据修改的回显方法

实现的样式给你们看一波点击这锅按钮其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值) var tr = obj.tr; // 获得当前行 tr 的DOM对象 if (l
layui 实现table翻页滚动条位置保持不变的例子

最近使用了layui table但是发现了一系列问题,由于被封装过不好自己修改,比如翻页后滑动条每次都会复位,导致体验不好,通过调试,我发现layui table并没有给div加id标签,我通过class定位表格div位置. 可以看到滚动条所在div class="layui-table-body layui-table-main" 我在layui table定义了一个父div,防止多个table时定位错误,先定位父div,再寻找内部的datatable <div class=
layui-table对返回的数据进行转变显示的实例

在使用layui表格时,在ajax请求回来的数据,有时候需要我们处理之后显示 1.比如性别sex这个字段,后台可能返回的是1.或者 2:那我们总不能显示1.和 2,我们需要显示男和女,这里就用到了自定义模板了 <script type="text/html" id="barDemo"> {{#if (d.sex == 1) { }} <span>男</span> {{# }else if(d.sex == 2){ }} <s
layui table去掉右侧滑动条的实现方法

使用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
layui table单元格事件修改值的方法

事件中的 this相当于document.getElementById("id") 替代方法就是将原本 document.getElementById("id").InnerHTML = "填充代码"; 替换成 $("#id").html("填充代码"); <!DOCTYPE html> <html> <head> <meta charset="utf-8
layui table设置某一行的字体颜色方法

table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行tr,修改其样式中的颜色. //设置layui datatable的某一行的颜色 //TabDivId:tab父div id;RowIndex:行序列号,从0开始:ColorString:颜色字符串,如'#123456' function Layui_SetDataTableRowColor(Tab
layui table 多行删除(id获取)的方法

如下所示: <button class="layui-btn layui-btn-danger" data-type="getid" οnclick="delAll()">删除所有选中行</button> js: table.on('checkbox(table)', function(obj){ var data = obj.data; }); layui.jquery, active = { getid: functi
layui table 列宽百分比显示的实现方法

废话不多说了,为大家分享一下layui实现 table 列宽百分比显示的实例代码,希望对大家有所帮助吧 var layer = layui.layer, form = layui.form, table = layui.table; var $ = layui.$; /*select gysmc,zyzw ,xm ,sjhm ,bgshm ,emilyx , zgsrgzwsj ,zggsgl ,cast(gysxxid as int) as gysxxid, pc, gysryxxMdataI
layui table复选框禁止某几条勾选的实例

Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true); $(".layui-table tr[data-index="+
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

背景笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当
layui table 参数设置方法

JSp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
layui table 表格上添加日期控件的两种方法

方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: "auto" , id: "tbtxrz" , text: {none: '暂无相关数据'} , toolbar: toolbartxrz , cols: [[ { //设置表格中部分字体的颜色 field: "number", title: "序
JS实现layui table筛选框记忆功能

碰到表中列很多如下表使用layui table的筛选功能.选完之后呢,关掉浏览器再打开或者换个页面再打开的时候,选择就白选了.这种情况下,客户就要求加个记忆功能.让她下次再打开的时候,还能记忆上次选择的网上几乎没有这种使用的例子.总之是没有找到相关资料,于是我就把实现的过程记录下来,方便大家用到的时候做个参考. 实现: 记忆的数据可以存到数据库,可以存到本地缓存本案例放入本地缓存的方式使用MutationObserver 实现监控点击事件. 由于筛选的跳窗是点开后后加的代码,所以一般的事

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

相关推荐

随机推荐