本文介绍如何在layui表格中监听复选框的选中状态,并将选中的ID值通过数组收集后传递给后台。核心在于利用table.on('checkbox')事件,区分单选与全选操作,动态维护选中ID数组,最终在ajax请求中作为ids参数提交。
layui表格复选框监听与后台传参实现
实现目标如下:
在进行ajax异步请求后台接口时,需要获取并传入表格中复选框所选中行的ID值。
注意:需要在渲染form的on方法中的done回调函数内加入相关逻辑。
done:function(res){
table_data=res.data;
}
将复选框选中的ID值添加到一个数组中,随后将该数组作为ids参数传递到后台接口。
//自定义数组
var table_data=new Array();
var ids =new Array();
table.on('checkbox(push_port_table)', function(obj){
if(obj.checked==true){
if(obj.type=='one'){
ids.push(obj.data.id);
}else{
for(var i=0;i<table_data.length;i++){
ids.push(table_data[i].id);
}
}
}else{
if(obj.type=='one'){
for(var i=0;i<ids.length;i++){
if(ids[i]==obj.data.id){
// ids.remove(i);用这个方法会报错not a function
//ids.pop(); 建议用这个
ids.splice(i,1);
}
}
}else{
for(var i=0;i<ids.length;i++){
for(var j=0;j<table_data.length;j++){
if(ids[i]==table_data[j].id){
// ids.remove(i);
// ids.pop();
ids.splice(i,1);
}
}
}
}
}
console.log(ids);
console.log(table_data);
});
以上关于layui监听表格复选框选中值的方法分享完毕,希望能为读者提供参考,感谢支持。