Layui 表格组件 头部工具栏 筛选列 加入全选和全不选的功能

Layui 表格组件 头部工具栏 筛选列 加入全选和全不选的功能

问题

前端使用Layui表格组件展示后台数据,因数据中涉及字段较多,因此加入了组件中固有的控制表格列隐藏显示的功能。奈何客户希望再此基础上,加入“全选”和“全不选”的功能,更方便的选择想要单独显示的列名。不废话,上图。

表格组件中原始筛选列的效果
上图为:表格组件中原始筛选列的效果

加入全选和全不选后的效果
上图为:加入全选和全不选控制表格列显示的效果

解决过程

编写控制列全选和全不选的代码

var tbLay = {//筛选列加入全选和全不选的功能tableExtendColumnFilter:function(tbId){var $tbView = null;$(".layui-table-view").each(function(index,item){if($(item).attr("lay-id") == tbId){$tbView = $(this);return;}});//.layui-table-tool-panelvar $iconCols = $tbView.find(".layui-icon-cols");$iconCols.click(function(){var selected = `<div class="tb-col-selected-yes-no" style="position: absolute;right: 15px;top: 35px;z-index: 999;width: 120px;"><button type="button" class="layui-btn layui-btn-sm" οnclick="tbLay.tableExtendColumnFilterShow(this,true)">全选</button><button type="button" class="layui-btn layui-btn-sm" οnclick="tbLay.tableExtendColumnFilterShow(this,false)">全不选</button></div>`;if($(this).prev().attr("class") == "tb-col-selected-yes-no"){$(".tb-col-selected-yes-no").show();return;}$(this).before(selected);});},//筛选列全选和全不选点击事件tableExtendColumnFilterShow:function(thisDom,isAllChecked){var liArr = $(thisDom).parent().siblings(".layui-table-tool-panel").find("li");console.log(liArr);liArr.each(function(index,item){var $itemDiv = $(item).find("div");var checked = $itemDiv.hasClass("layui-form-checked"); //原始状态if((isAllChecked && !checked) || (!isAllChecked && checked)){ //全选 || 全不选$itemDiv.click();}});}
}

将上述代码放入tbLayUtil.js

编写控制全选和全不选按钮消失的代码

$(function(){//点击空白处,隐藏筛选列全选和全不选$(document).click(function(e){if(!$(e.target).is(".layui-inline")){$(".tb-col-selected-yes-no").hide();}});
})

将上述代码放入tbLayUtil.js

引入并调用控制列全选和全不选的方法

table.render({elem: '#tb',cols: column,method: "post",headers: {token: $.cookie('token')},url: app.url + "case/yxk/listYxk.do",where: param,parseData: function(res) { //res 即为原始返回的数据return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.data.count, //解析数据长度"data": res.data.data //解析数据列表};},response: {statusCode: 200 //规定成功的状态码,默认:0},toolbar: true,defaultToolbar: ['filter',{title: '导出', //标题layEvent: 'LAYTABLE_DOWN', //事件名,用于 toolbar 事件中使用icon: 'layui-icon-download-circle' //图标类名}],page: true,autoSort: false, //禁用前段排序height: 'full-60', //高度最大化减去差值width: 'full',done: function(res, curr, count) {//控制列全选和全不选,此处为关键代码tbLay.tableExtendColumnFilter('tb');layer.closeAll('loading'); //关闭加载层}});

将tbLayUtil.js引入表格页面

查看效果即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/674241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【动态规划】【前缀和】【C++算法】LCP 57. 打地鼠

作者推荐 视频算法专题 本文涉及知识点 动态规划汇总 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LCP 57. 打地鼠 勇者面前有一个大小为3*3 的打地鼠游戏机&#xff0c;地鼠将随机出现在各个位置&#xff0c;moles[i] [t,x,y] 表…

Adb offline疑难杂症解决方案大全记录

无线/有线Adb offline依次尝试下面步骤&#xff1a; adb kill-server && adb start-server adb reconnect offline 多次 adb tcpip 5555 后重试 检查有线端口5037、无线5555占用&#xff0c;排除改名的adb或其他应用占用 换USB线和USB口拔插、确保同一WiFi下&#xff0…

Stable Diffusion 模型下载:Samaritan 3d Cartoon SDXL(撒玛利亚人 3d 卡通 SDXL)

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 由“PromptSharingSamaritan”创作的撒玛利亚人 3d 卡通类型的大模型&#xff0c;该模型的基础模型为 SDXL 1.0。 条目内容类型大模型基础模型SDXL 1.0来源CIVITA…

2024.2.7

#include<stdio.h> #include<string.h> #include<stdlib.h> typedef char datatype;typedef struct node {//数据域datatype data;//指针域&#xff1a;左struct node *lchild;//指针域&#xff1a;右struct node *rchild; }*btree;//创建节点 btree creat_n…

嵌入式中轻松识别STM32单片机是否跑飞方法

单片机项目偶尔经常出现异常&#xff0c;不知道是程序跑飞了&#xff0c;还是进入某个死循环了&#xff1f; 因为发生概率比较低&#xff0c;也没有规律&#xff0c;所以没办法在线调试查找问题。 结合这个问题&#xff0c;给大家分享一下用ST-LINK Utility识别单片机程序是否…

python-可视化篇-pyecharts库-气候堆叠图

准备 代码 # codingutf-8 # 代码文件&#xff1a;code/chapter10/10.3.py # 3D柱状图import randomfrom pyecharts import options as opts from pyecharts.charts import Bar3D# 生成测试数据 data [[x, y, random.randint(10, 40)] for y in range(7) for x in range(24)]…

[算法前沿]--060-天工Skywork-13B 开源模型

1.技术细节 》 数据处理、 数据配比、模型优化、评估方案 2.数据集 wudao-DataSkywork-150B:https://hf.co/Skywork非盈利性机构构建的CommonCrawl数据集是一个海量的、非结构化的、多语言的网页数据集。它包含了超过 8 年的网络爬虫数据集,包含原始网页数据(WARC)、元数…

Git中为常用指令配置别名

目录 1 前言 2 具体操作 2.1 创建.bashrc文件 2.2 添加指令 2.3 使其生效 2.4 测试 1 前言 在Git中有一些常用指令比较长&#xff0c;当我们直接输入&#xff0c;不仅费时费力&#xff0c;还容易出错。这时候&#xff0c;如果能给其取个简短的别名&#xff0c;那么事情就…

电力负荷预测 | 电力系统负荷预测模型(Python线性回归、随机森林、支持向量机、BP神经网络、GRU、LSTM)

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 电力系统负荷预测模型(Python线性回归、随机森林、支持向量机、BP神经网络、GRU、LSTM) 所谓预测,就是指通过对事物进行分析及研究,并运用合理的方法探索事物的发展变化规律,对其未来发展做出预先估计和判断。…

计算机毕业设计 | SSM 医药信息管理系统(附源码)

1&#xff0c; 概述 1.1 课题背景 本系统由说书客面向广大民营药店、县区级医院、个体诊所等群体的药品和客户等信息的管理需求&#xff0c;采用SpringSpringMVCMybatisEasyui架构实现&#xff0c;为单体药店、批发企业、零售连锁企业&#xff0c;提供有针对性的信息数据管理…

MySQL 时间索引的选择

背景 MySQL 在使用过程中经常会对时间加索引&#xff0c;方便进行时间范围的查询&#xff0c;常见的时间类型有 data、datetime、long、timestamp 等&#xff0c;在此分析下这几种时间类型的索引大小&#xff0c;以找到比较合适的时间类型。 时间类型对比 常用的索引类型是 …

科技的成就(五十六)

527、Chrome 1.0 发布 2008 年 12 月 11 日&#xff0c;Chrome 1.0 发布。Chrome 是由谷歌开发的跨平台免费专有网络浏览器&#xff0c;使用内置了高性能 JavaScript 引擎 V8 的 Blink 作为浏览器渲染引擎。Chrome 基于开源软件项目 Chromium&#xff0c;其他基于该项目的知名浏…

HttpServletResponse接口用于表示状态代码的字段

1. HttpServletResponse接口用于表示状态代码的字段 您已学习了状态代码以及可用于从servlet向客户机发送状态代码的HttpServletResponse接口的字段。下表列出了HttpServletResponse接口表示状态代码的一些其他字段。 字段状态代码描述SC_HTTP_VERSION_NOT_SUPPORTED505服务器…

PyTorch深度学习实战(23)——从零开始实现SSD目标检测

PyTorch深度学习实战&#xff08;23&#xff09;——从零开始实现SSD目标检测 0. 前言1. SSD 目标检测模型1.1 SSD 网络架构1.2 利用不同网络层执行边界框和类别预测1.3 不同网络层中默认框的尺寸和宽高比1.4 数据准备1.5 模型训练 2. 实现 SSD 目标检测2.1 SSD300 架构2.2 Mul…

JAVA json转xml

首先要去官方下载json-lib工具包 https://mvnrepository.com/artifact/net.sf.json-lib/json-lib/2.4 目前最新的是2.4的版本&#xff0c;json-lib还需要以下依赖包&#xff1a; 通过mvn库可以直接去下载。 jakartacommons-lang 2.5 jakartacommons-beanutils 1.8.0 jaka…

Verilog刷题笔记25

题目&#xff1a; You’re already familiar with bitwise operations between two values, e.g., a & b or a ^ b. Sometimes, you want to create a wide gate that operates on all of the bits of one vector, like (a[0] & a[1] & a[2] & a[3] … ), whic…

USB Type-C 接口 PD 协议解决方案

文章来源&#xff1a;USB Type-C接口PD协议解决方案 | Richtek Technology

极值图论基础

目录 一&#xff0c;普通子图禁图 二&#xff0c;Turan问题 三&#xff0c;Turan定理、Turan图 1&#xff0c;Turan定理 2&#xff0c;Turan图 四&#xff0c;以完全二部图为禁图的Turan问题 1&#xff0c;最大边数的上界 2&#xff0c;最大边数的下界 五&#xff0c;…

【C++基础入门】七、指针(定义和使用、所占内存空间、空指针和野指针、const关键字修饰指针、指针和数组、指针和函数)

七、指针 7.1 指针的基本概念 指针的作用&#xff1a; 可以通过指针间接访问内存 内存编号是从0开始记录的&#xff0c;一般用十六进制数字表示可以利用指针变量保存地址 7.2 指针变量的定义和使用 指针变量定义语法&#xff1a; 数据类型 * 变量名&#xff1b; 示例&…

DevOps落地笔记-21|业务价值:软件发布的最终目的

上一课时介绍如何度量软件的内部质量和外部质量。在外部质量中&#xff0c;我们提到用户满意度是衡量软件外部质量的关键因素。“敏捷宣言”的第一条原则规定&#xff1a;“我们最重要的目标&#xff0c;是通过持续不断的及早交付有价值的软件使用户满意”。从这一点也可以看出…