layui 监听表格复选框选中值的方法

作者:键盘侠

时间:2026-10-22

浏览:132

本文介绍如何在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监听表格复选框选中值的方法分享完毕,希望能为读者提供参考,感谢支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章