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;" onclick="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>
- 10分钟搞懂TensorBoard用法
- 【最新TensorFlow1.4.0教程02】利用Eager Execution 自定义操作和梯度 (可在 GPU 运行)
- 清北集训Day1T3 LYK loves jumping(期望DP)
- C#进阶系列——WebApi 接口参数不再困惑:传参详解上
- MySQL之多表查询
- 万能pb_ds头文件—bits/extc++.h
- 区块链开发之Go语言—文件系统
- MySQL之单表查询
- C#进阶系列——WebApi 接口参数不再困惑:传参详解 下
- 区块链开发之Go语言—字符串和字节
- MySQL之表的约束
- 【NIPS2017前沿】半监督学习需要Bad GAN,清华特奖学霸与苹果AI总监提出(附Ruslan教授深度学习教程pdf下载)
- MySQL之表的数据类型
- C#注册表情缘
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Redis-Java项目应用(Jedis、SpringBoot整合、工具类模板)
- 微软被指剽窃他人开源作品!作者被迫终止该项目
- 秋招系列 | 推荐岗史上最强面经来袭(上)
- 一个Tomcat 如何部署多个项目?附多种解决方案及详细步骤!
- 初识SpringCloud
- .NET程序设计复习总结
- Ribbon讲解与应用
- break, continue 和 return 的用法及区别
- JavaWeb 图书管理系统
- 深度学习-多分类问题
- umi项目中dva effects异常处理
- Eureka应用
- 深度学习-回归问题
- R语言安装ggbiplot
- IDEA 一键部署 Spring Boot 到 Docker,这个骚操作你会了吗?