layui表格+行数据详情展示页(数据请求一次)

本文介绍如何利用layui表格实现数据一次性请求并在点击详情按钮时展示数据的详细方法。通过将数据加载到表格tr的data属性,然后利用layui的事件监听获取所需子数据。在layer展示页面的表格中,采用遍历方式动态生成内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

data数据加载 赋值到tr的data属性

//用行数据赋值data的方式,每一行的展示数据放到该行的data属性里
	var row = $("tbody").find('tr');
	console.log(row);
	for(var i = 0, len = res.data.length; i < len; i++) { // 这里的i是代表数组的下标
		row[i].setAttribute('data', JSON.stringify(res.data[i].user))
	}

需求:表格数据请求一次数据,点击详情按钮,显示数据
思路: layui 数据表格中有个优点,点击按钮事件获取data,就可以拿到子数据。
我一开始想到是用行数据赋值data的方式,每一行的展示数据放到该行的data属性里,现在发现不用了,layui数据表格太强大了!
layer展示页的表格:用遍历的方法写的。附上代码

//点击详情按钮事件
table.on('tool(detailButton)', function(obj){
	var responseData = obj.data;//这里拿到该行的所有数据
    if(obj.event === 'detail'){
		var content = '';
		var rows ='';
		//遍历数据
		for(var i = 0; i < responseData.user.length; i++) {
			var text = '';
			if(responseD
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值