layui中table表行中复选框获取ID操-作js实现

具体效果

选择layui table的复选框后点击删除可以获取选中值的ID

1.下面先说一下table属性值

table头部要加上  lay-data="{id:'tables'}" lay-data的id属性

 <table class="layui-table I106_table" lay-data="{id:'tables'}" lay-skin="line" lay-filter="demo">

表格头部定义checkbox

<th lay-data="{type:'checkbox', fixed: 'left', width:50 }"></th>

还要在设置个ID的隐藏列

<th lay-data="{field: 'id',style:'display:none;',minWidth:'0%',width:'0%',type:'space'}"></th>

在body里面的tr行中复选框 直接<td></td>

隐藏ID列<td>ID值加入</td>

 

2.下面就是JS了

<script>
	var table = null;
	
    layui.use('table',function () {
		  table = layui.table;
		  //监听表格复选框选择
		  table.on('checkbox(demo)', function(obj){
			console.log(obj)
		  });
    })
	//绑定的删除事件
	function del(){
		console.log(getRowFexId("id"));
	}
	
	
	//获取选中行FexId属性值公共方法
	//value 为传入的  {field: 'id',style:'display:none;'} field值
	//返回结果 是这一列被选中的 用,隔开的字符串
	function getRowFexId(value){
	    var checkStatus = table.checkStatus('tables')
		,data = checkStatus.data,arr = new Array();;
		for(var i = 0;i<data.length;i++){
			arr.push(data[i][value]);
		}
		return arr.join(",");  
	}
	
</script>

结果如下点击删除