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


猜你喜欢
- 1. 目标通过hadoop hive或spark等数据计算框架完成数据清洗后的数据在HDFS上爬虫和机器学习在Python中容易实现在Lin
- 登录注册系统是日常上网最普通的操作,我设了一个分类一步步完善注册登录系统,若哪里有误,请见谅。所用语言:php数据库 :mysql本次实现功
- 在编程时你一定碰到过时间触发的事件,在VB中有timer控件,而asp中没有, 假如你要不停地查询数据库来等待一个返回结果的话,我想你一定知
- 问题定义一个int型的一维数组,包含10个元素,分别赋值为1~10, 然后将数组中的元素都向前移一个位置,即,a[0]=a[1],a[1]=
- 一、复合查询1.1 多表查询实际开发中往往数据来自不同的表,所以需要多表查询,但是可以将多张表做笛卡尔积后的表当做是一张表,也就是单表查询。
- mysql 时间转换函数的用法DAYOFWEEK(date) 返回日期date的星期索引(1=星期天,2=
- 1、找到python的安装目录在python (版本号)\lib\idlelib目录下添加Clearwindow.py文件源代码如下:cla
- 如何向客户端推送“出错信息”?下面是推送代码:服务器端:on error resume nextconn=se
- 本章为大家介绍的模块,在python2的时候,并不受宠,主要的问题是存在安全漏洞,发现问题就要及时解决,因此在现在3版本中,已经得到了妥善的
- vue使用formData传递文件类型的数据1.需求 传递文件类型的数据和其
- 一个朋友给她的朋友买礼物。撕心裂肺、绞尽脑汁。最后蹦出来一个主意:“送打火机”我不知道小妞们通过哪的投票,就这么断定男人都喜欢打火机。导致一
- 最近工作需要把单片机读取的传感器电压数据实时在PC上通过曲线显示出来,刚好在看python, 就试着用了python 与uart端口通讯,并
- /* Cookie Library -- "Night of the Living Cookie" Version (2
- 背景介绍Pandas的DataFrame和Series在Matplotlib基础上封装了一个简易的绘图函数,使得数据处理过程中方便可视化查看
- Python 正则表达式正则表达式本身是独立于编程语言的知识,但是它又依附于编程语言,基本上我们所使用的编程语言都提供了对它的实现,当然了,
- 相对于Firefox2来说,Firefox3除了采用全新的Gecko 1.9引擎外,在性能、稳定性和安全性方面进行许多改进,在我们最关心的对
- 简洁版Windows10系统下,按Win+R键启动运行,输入cmd,进入命令窗口输入conda info --envs,查看conda 环境
- 在SQL Server中进行开发会让你身处险地,并且寻找快速解决方案。我们编辑了前十名关于SQL Server开发的常见问题。对常见的针对表
- isdigit() isalpha()用于判断字符串的类型要求1统计某个字符串中的数字数量并输出,例如字符串为“adsf
- TKinter库,Python 的 GUI 库非常多,之所以选择 Tkinter,一是最为简单,二是自带库,不需下载安装,随时使用,跨平台兼