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

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(responseData.user[i].userId != '0'){
				text += '' + responseData.createDate + '';
				if(i==0) text += '' + responseData.user[i].userId + '大赢家';
				else text += '' + responseData.user[i].userId + '';
				text += '' + responseData.user[i].nike  + '';
				text += '' + responseData.user[i].score  + '';
			}
			rows += '' + text + '';
		}
		content += '
\ 对局详情\
' content += '
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ ' content += ''+rows+'' content += '
对局时间玩家ID玩家昵称积分
'; layer.open({ type: 1 ,title: '详情' //显示标题栏 ,closeBtn: false , area: ['600px', '400px'] ,shade: 0.8 ,id: 'LAY_layuipro' //设定一个id,防止重复弹出 ,btn: ['确定'] ,moveType: 0 //拖拽模式,0或者1 ,content: content ,success: function(layero){ } }); } });

附上参考图
layui表格+行数据详情展示页(数据请求一次)_第1张图片
layui表格+行数据详情展示页(数据请求一次)_第2张图片

你可能感兴趣的:(Layui-项目实践)