实际效果：点击全选按钮，选择数据，点击获取选中行数据，自动赋值给明细表
因为利用layui生成按钮以及表格，所以需要引入layui。
表格内容为固定数据，如需要实现动态分页数据，自行实现，或者查看我另一篇博客文章：https://www.cnblogs.com/stfzhuang/p/17676056.html
实现JS：
<script>
$("#oTable0").find("tbody").find("tr:eq(1)").find("td:eq(4)").prepend("<button id='selectall' type='button' class='layui-btn layui-btn-xs layui-btn-normal'>全选按钮</button>")
$("#selectall").click( function(event){
// 在此处输入 layer 的任意代码
var index1 = layer.open({
type: 1, // page 层类型
area: ['800px', '600px'],
title: '采购订单号',
shade: 0.6, // 遮罩透明度
shadeClose: true, // 点击遮罩区域，关闭弹层
maxmin: true, // 允许全屏最小化
anim: 0, // 0-6 的动画形式，-1 不开启
content: "<table class='layui-hide' id='ID-table-demo-search'></table>"
});
layui.use(function(){
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
// 创建表格实例
table.render({
elem: '#ID-table-demo-search',
//url: 'https://layui.dev/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
cols: [[
//{type: 'radio', title: '?', fixed: true}, // 单选框
{checkbox: true, title: '?',fixed: true},
{field:'id', title: 'ID', width:80, sort: true, fixed: true},
{field:'username', title: '用户名', width:80},
{field:'sex', title: '性别', width:80, sort: true},
{field:'city', title: '城市', width:80},
{field:'sign', title: '签名'},
{field:'experience', title: '积分', sort: true, width:80}
]],
toolbar: "<div class='layui-btn-container' id='demo-toolbar-setRowChecked'><button class='layui-btn layui-btn-sm' lay-event='getCheckData'>获取选中行数据</button></div>",
data:[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"words":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"words":64928690,"classify":"词人","score":70.5},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"words":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"words":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"words":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"words":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"words":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"words":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"words":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"words":86801934,"classify":"词人","score":75},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"words":86801934,"classify":"词人","score":75},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"words":86801934,"classify":"词人","score":75}],
page: true,
height: 500
});
// 头工具栏事件
table.on('toolbar(ID-table-demo-search)', function(obj){
var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data; // 获取选中行数据
layer.alert(JSON.stringify(data)); // 显示 - 仅用于演示
console.log(data);
for(let i = 0 ; i < data.length; i++){
WfForm.addDetailRow("detail_1",{field19394:{value:data[i].id},field19395:{value:data[i].username}});
}
break;
};
layer.close(index1);
});
});
});
</script>
标签：username,city,layui,sex,experience,明细表,OA,sign,id From： https://www.cnblogs.com/stfzhuang/p/17769945.html