layui表格使用复选框批量删除_layui数据表格批量删除

本文介绍了如何在layui表格中使用复选框实现批量删除功能。通过监听checkbox事件,动态管理选中行,并在点击删除按钮时执行删除操作。同时,展示了相关的表格配置,包括字段定义、数据加载和页面交互。
摘要由CSDN通过智能技术生成

@{

Layout= null;

}

List

var obj =[{

ProductID:1,

ProductName:"水杯",

}, ];var LogList = newArray();functioninitData()

{if (LogList.length > 0) {

$(JSON.parse(logId)).each(function(i, e) {var obj = LogList.find(function(i) {return i.LogId ==e.LogId;

})if (obj ===undefined) {

LogList.push(e);

}

})

}else{

LogList=JSON.parse(logId);

}

layui.use('table', function() {var table =layui.table;

table.reload('demo', {

data:LogList

});

});

}

layui.use(['layer', 'table'], function() {var layer =layui.layer;var table =layui.table;//第一个实例

table.render({

elem:'#demo', url:"@Url.Action("Index")"

//, data: LogList

, page: false //开启分页

, limit:100, text: {

none:'暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增

}

, toolbar:'#table-tool-bar', cols: [[//表头

{ field: 'LogId', type: "checkbox", title: '日志ID', sort: true, fixed: 'left'}

, { field:'LogId', title: '日志ID', }

, { field:'UserName', title: '用户名', }

, { field:'Description', title: '操作说明', sort: true}

, { field:'Brower', title: '浏览器'}

, { field:'OS', title: '操作系统', edit: "text"}

, { field:'IP', title: 'IP', sort: true}

, { field:'AddTime', title: '操作时间', sort: true}

]]

});var array =[];

table.on('checkbox(test)', function(obj) {var tr = obj.tr; //得到当前点击复选框的行元素对象

if (obj.type == 'all') { //点击全选按钮触发此处

var len =array.length;

array.splice(0, len); //全选后删除数组项,重新添加全选的dom元素

var i = 0;

$(obj.tr.prevObject[0].firstChild.rows).each(function(i, e) {var subarr = [$(e), $(obj.tr.prevObject[1].firstChild.rows[i])];

array.push(subarr);

i++;

})

}else{if (obj.checked) { //多选框被选中则添加dom元素到数组

array.push(tr);

}else {//取消多选框的选中则在数组中删除自己

var indexs = obj.tr[0].rowIndex; //获取取消选中的元素对象下标

array.forEach((item, index) =>{//当数组中任意一个元素的rowIndex值与取消复选框的元素对象属性rowIndex的下标值相等,则在数组中删除该元素

if (item[0].rowIndex ===undefined) {if (item[0][0].rowIndex ==indexs) {

array.splice(index,1);

}

}else{if (item[0].rowIndex ==indexs) {

array.splice(index,1);

}

}

})

}

}

});

table.on('toolbar(test)', function(obj) {var checkStatus =table.checkStatus(obj.config.id);switch(obj.event) {case 'add':

layer.open({

type:2,

title:"选择商品",

area: ['900px', '420px'],

shade:0.8,

shadeClose:true,

maxmin:true,

content:'@Url.Action("Index")'});break;case 'delete':

layer.msg('删除');

array.forEach((item)=>{

console.log(item);

item[0].remove(); //删除dom结构

item[1].remove();

})break;

};

});

$("button").click(function() {

console.log(layui.table.cache["demo"]);

})

});

test

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值