Layui 带多选框表格监听事件以及按钮自动点击写法实例
作者:qt_lls 发布时间:2024-04-19 10:45:20
标签:Layui,表格,监听,按钮,点击
不话不多说了,直接上代码吧:
<div class="layui-btn-group demoTable" style="margin: 10px;">
<button class="layui-btn" id="hqsj" data-type="getCheckData">获取选中行数据</button>
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
<button class="layui-btn" data-type="isAll">验证是否全选</button>
<button class="layui-btn" style="right: 30px;" οnclick="submitmychose()">提交选择</button>
</div>
<table class="layui-table" lay-data="{width: 990, height:495, url:'<%=request.getContextPath()%>/admin/getSportcuDate', id:'idTest'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox',width:80,fixed: 'left'}"></th>
<th lay-data="{field:'sportId',width:100, sort: true, fixed: true}">ID</th>
<th lay-data="{field:'sportName',width:290}">运动名</th>
<th lay-data="{field:'sportTime',width:270, sort: true}">运动时长</th>
<th lay-data="{field:'sortId', width:225}">运动类型</th>
</tr>
</thead>
</table>
<script>
var msg="";
var idlist="";
layui.use('table', function(){
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
});
var $ = layui.$, active = {
getCheckData: function(){ //获取选中数据
msg="";
idlist="";
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
for(var i=0; i<data.length;i++){
msg=msg+"周"+(i+1)+":"+data[i].sportName+" ";
idlist =idlist+data[i].sportId+",";
}
}
,getCheckLength: function(){ //获取选中数目
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
}
,isAll: function(){ //验证是否全选
var checkStatus = table.checkStatus('idTest');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
function submitmychose(){
$('#hqsj').trigger("click");
}
</script>
来源:https://blog.csdn.net/qt_lls/article/details/88392726
0
投稿
猜你喜欢
- python来写一个试试吧,这里使用了cPAMIE模块,代码如下:代码from cPAMIE import PAMIEie=PAMIE(&q
- 假如某个电脑生产商,它的数据库中保存着整机和配件的产品信息。用来保存整机产品信息的表叫做pc;用来保存配件供货信息的表叫做parts。在pc
- 今天笔者想对pandas中的行进行去重操作,找了好久,才找到相关的函数先看一个小例子from pandas import Series, D
- 我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合
- 这是一个自动化程度较高的程序,运行本程序后会从chrome中读取cookies用于登录人人影视签到,并且会自动添加一个windows 任务计
- 我们经常会遇到数据库磁盘空间爆满的问题,或由于归档日志突增、或由于数据文件过多、大导致磁盘使用紧俏。这里主要说的场景是磁盘空间本身很大,但表
- 二进制日志二进制日志中以“事件”的形式记录了数据库中数据的变化情况,对于MySQL数据库的灾难恢复起
- mysql服务启动,但是连接不上,如何解决?登陆报错: root@localhost:~# mysql -u root -p &
- 关于Mysql的触发器,基本上每个Mysql教程里都有讲到,但是我发现那些教程里讲的都是如何处理其他表的数据。在Mysql中写触发器操作本表
- 导语《我的世界》是一款自由度极高的游戏,每个新存档的开启,就像是作为造物主的玩家在虚拟空间开辟了一个全新的宇宙。方块连接世界,云游大好河山。
- 安装Pycharm进行Python开发时,经常右下角提示No R interpreter defined,处理方式:1、安装R,然后将R的路
- 简介在日常开发中,我们的大部分时间都会花在阅读traceback模块信息以及调试代码上。本文我们将改进traceback模块,让其中的提示信
- 引言: 由于MySQL的数据库太大,默认安装的/var盘已经再也无法容纳新增加的数据,没有办法,只能想办法转移数据的目录。 下面我整理一下把
- 本文为大家分享了mysql8.0.15安装配置方法图文教程,供大家参考,具体内容如下将下好的压缩包解压后得到下图文件新建my.ini文件(注
- 今天需要做一个翻译的工具,找到之前写过的有道翻译,已经不能用了,最后看到百度翻译还不错,不过官方版本是Python2,我需要Python3,
- 词云图什么是词云图,相信大家肯定不会感到陌生,一本书统计里面出现的词频,然后可视化展示,让读者快速的了解这个主题纲要,这就是词云的直接效果。
- 介绍asyncore库是python的一个标准库,提供了以异步的方式写入套接字服务的客户端和服务器的基础结构。操作网络的时候可以直接使用so
- 本系列不会对python语法,理论作详细说明;所以不是一个学习教材;而这里只是我一个学习python的某些专题的总结。1. random()
- 很多人认为python中的字典是无序的,因为它是按照hash来存储的,但是python中有个模块collections(英文,收集、集合),
- 本文实例为大家分享了HTML5 Canvas实现的一个画板代码,供大家参考,具体内容如下<!DOCTYPE html><h