layui中弹出层出现数据表格
function popup(result) {
layui.use('table', function () {
var table = layui.table;
layer.open({
type: 1,
area: ["700px", '430px'],
title: "选择",
maxmin: false,
content: '<div><table lay-filter="templateTable"></table></div>', //先定义一个数据表格的div框
success: function (index, layero) {
table.render({
elem: '#templateTable'
, height: 300
, width: '100%'
, data: result //result格式为[{},{}],此处用的是固定数据,也可以用url来请求后台获取数据,如果使用url要根据layui规定的格式返回才可以渲染上,例：{"code": 0,"msg": "","count": 1000,"data": [{}, {}]} 或者使用parseData进行转化也可以
, cols: [[ //设置数据表格表头
{checkbox: true} //开启复选框
,{field: 'path', title: '文件名称', width: 700, hide: true}
,{field:'qad1', width: 165, title: 'QAD号'}
,{field:'sid', width: 165, title: 'yst',hide: true}
,{field:'describe1', width: 165, title: '物料描述1'}
,{field:'describe2', width: 165, title: '物料描述2'}
,{field:'company', width: 165, title: '设计单位'}
,{field:'qad2', width: 165, title: 'QAD号'}
,{field:'describe3', width: 165, title: '物料描述1'}
,{field:'describe4', width: 165, title: '物料描述2'}
,{field:'partNumber', width: 165, title: '零件号'}
,{field:'company2', width: 165, title: '设计单位'}
,{field:'place', width: 165, title: '地点'}
,{field:'reference', width: 165, title: '参考号'}
,{field:'workingNum', width: 165, title: '工序号'}
,{field:'purchaseStock', width: 165, title: '采购地点/制造地点'}
,{field:'supplierName', width: 165, title: '供应商名称'}
]]
, page: true //使用分页
, limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100] //动态设置每页显示数据的条数
, limit: 10 //默认每页多少条
});
table.on('checkbox(templateTable)', function (obj) { //监听复选框,获取选择到的值
obj_data = obj.data; //获取到选中复选框上的一行数据
let path=obj_data.path; //获取某个字段的值
console.log(path);
})
},
btn: ['确定', '关闭'],
yes: function (index, layero) {
$.post("/sBom/save", {sid: obj_data.sid,qad1: obj_data.qad1,describe1:obj_data.describe1,describe2:obj_data.describe2,company:obj_data.company,
company2:obj_data.company2,describe3:obj_data.describe3,describe4:obj_data.describe4,partNumber:obj_data.partNumber,place:obj_data.place,purchaseStock:obj_data.purchaseStock,
qad2:obj_data.qad2,reference:obj_data.reference,supplierName:obj_data.supplierName,workingNum:obj_data.workingNum},function (obj) {
if (obj.code==200){
tableIns.reload();//重载表格
}
layer.msg(obj.msg);
})
layer.close(layer.index); //点击确定之后执行yes函数,关闭弹出层
}
});
});
}