当你的layui表格要做全选+删除功能【兼容ie8】
<!-- 全选 -->
<div class="choose">
<input type="checkbox" id="chooseAll" name="" title="全选" lay-skin="primary" onclick="chooseall">
<span onclick="delAll()" lay-submit lay-filter="delete">删除记录</span>
</div>
<td>
<!-- <input type="checkbox"> -->
<input type="checkbox" data-id="{{ item.id }}" lay-skin="primary" name="idList[]" value="{{item.id}}">
</td>
// 全选/取消全选
var flag = true;
var chooseAllstr = '';
$('.choose').on('click', '.layui-form-checkbox', function() {
var cb = $(".layui-form-checkbox");
$(".layui-form-checkbox").each(function() {
if (flag) {
$(this).addClass('layui-form-checked')
} else {
$(this).removeClass('layui-form-checked')
}
})
flag = !flag;
})
// 删除全选的数据
function delAll() {
chooseAllstr = '';
$(".layui-form-checked").each(function() {
if ($(this).parent().find('input').data("id") && $(this).parent().find('input').data("id") != undefined) {
chooseAllstr += $(this).parent().find('input').data("id") + ','
}
})
if (chooseAllstr != '') {
//询问框
layer.confirm('确认删除全部记录吗?', {
btn: ['删除', '取消'] //按钮
}, function() {
ajax('/pu/ScancodeBehavior/Delete', { idList: chooseAllstr }, function(data) {
if (data.success) {
layer.closeAll();
popupSuccess(data.msg);
getList(param, function(data) {
if (Number(data.count) != 0) {
var getTpl = tabletpl.innerHTML,
view = document.getElementById('table-adm');
laytpl(getTpl).render(data.list, function(html) {
view.innerHTML = html;
});
-------------------------------------------------------------------
如果想用layui的name属性获取选中的数据:
<span lay-submit lay-filter="deteleSubmit">删除记录</span>
拼接为逗号分割的字符串,供接口传参,进行删除
form.on('submit(deteleSubmit)', function(data) {
var shuzu = [];
var arr = '';
Object.keys(data.field).forEach(function(key) {
shuzu.push(data.field[key]);
});
arr = shuzu.join(",");
})
当你的layui表格要做全选+删除功能【兼容ie8】的更多相关文章
- vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- checkbox做全选按钮
1.先写一个html页面,里面写一个全选按钮和几个复选框,实现下面2个要求 (1)点击全选按钮选中时,所有的复选框选中. (2)点击全选按钮取消选中时,所有复选框取消选中. <input typ ...
- 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 11.8 开课二个月零四天 (Jquery取属性值,做全选,去空格)
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- php大力力 [042节] 今天做了一个删除功能
php大力力 [042节] 今天做了一个删除功能 if(isset($_GET['action'])){ if($_GET['action']=="del"){ $sql = &q ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- DevExpress 中 在做全选的全消功能的时候 加快效率
在做 DevExpress 中对增加的选择 Check列 控制全选的全消时通过以下代码红色字代码效率会有明显的提升: private void CheckedRow() { try { splashS ...
随机推荐
- 网络-01-端口号-linux端口详解大全
0 | 无效端口,通常用于分析操作系统1 | 传输控制协议端口服务多路开关选择器2 | 管理实用程序3 | 压缩进程5 | 远程作业登录7 | 回显9 | 丢弃11 | 在线用户13 | 时间17 | ...
- Sql语法注意事项
#分组 group by 作用:group by 子句可以将结果集按照指定的字段值一样的记录进行分组,配合聚合函数 可以进行组内统计的工作. 注意1:当在select中时,查询的内容中如果包含聚合函数 ...
- context使用
1. 概述 go语言中goroutine之间的关联关系,缺乏维护,在erlang中有专门的机制来保障新开协程的生命周期,在go语言中,只能通过channel + select来实现,但不够直观,很绕. ...
- [C++ Primer Plus] 第10章、对象和类(二)课后习题
1. bank.h #include <string> using namespace std; class BankAccount { private: std::string m_na ...
- Python day 05
day05 数据类型 今日内容 字典 补充 .extend() users = [1,2,3,4] people = [5,6,7,8] users.extend(people) people.ext ...
- JS(JavaScript)的初了解8(更新中···)
1.函数都有返回值…… 而方法的本质也是函数,所以也有返回值. Document.getElementById() 返回的是获取的标签 getElementsByClassName()和getElem ...
- Use SourceLink enables a great source debugging experience
posts Exploring .NET Core's SourceLink - Stepping into the Source Code of NuGet packages you don't o ...
- 实验一:c++简单程序设计(1)
实验结论 编程练习2-28 switch版源码: #include <iostream> using namespace std; int main(void) { cout <&l ...
- subing用法
sql中substring截取,start位置索引由1开始 c#中substring截取,start位置索引由0开始
- ssm框架如果想要跨域请求,cors跨域
<!-- 跨域 --> <mvc:cors> <mvc:mapping path="/**"/> </mvc:cors> 在spri ...