重载时：layui error hint: The table instance with ID 'tableId' not found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layui table下拉框_table日期选择器_表格数据校验代码demo示例</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script type="text/javascript" src="/layui/xm-select.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body ">
<form class="layui-form">
<div id="commodityName" class="xm-select-demo layui-inline" style="width: 155px"></div>
<div id="styleNumber" class="xm-select-demo layui-inline" style="width: 155px;"></div>
<div class="layui-inline layui-show-xs-block">
<button class="layui-btn" lay-submit="" lay-filter="sreach"><i
class="layui-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">提交生产</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
</body>
<script>
var SUCCESS_CODE = 0;
layui.config({
base: ''
}).extend({
tableEdit: 'layui/tableEdit'
}).use(['table', 'tableEdit', 'layer','form'], function () {
var table = layui.table, tableEdit = layui.tableEdit, $ = layui.$;
var form=layui.form;
var params = [];
var commodityNames = xmSelect.render({
el: '#commodityName',
filterable: true,
tips: '系列',
height: '200px',
size: 'mini',
data: [],
on: function (data) {
//这里的data就是用户选择的数据
var selectedValues = [];
var selectcommodityNames = [];
for (var i = 0; i < data.arr.length; i++) {
selectedValues.push(data.arr[i].value);
selectcommodityNames.push(data.arr[i].value);
}
if (selectedValues.length === 0) {
// 如果没有选择值，则清空第二个下拉列表的数据源
styleNumbers.update({data: []});
return;
}
$.ajax({
url: 'CommodityByStyleNumber',
method: 'GET',
dataType: "json",
traditional: true, //设置为true以启用传统的序列化方式
async: true,
data: {CommodityName: selectedValues},
success: function (response) {
var data = [];
for (var i = 0; i < response.length; i++) {
data.push({
name: response[i].stylenumber,
value: response[i].stylenumber
});
}
styleNumbers.update({data: data});
},
error: function (error) {
console.log('接口请求失败', error);
}
});
}
});
var styleNumbers = xmSelect.render({
el: '#styleNumber',
filterable: true,
tips: '款式',
height: '200px',
size: 'mini',
data: [] // 先将数据源置空
});
$.ajax({
url: 'GroupCommodityName', // 替换为实际的接口地址
method: 'GET',
dataType: "json",
async: true,
success: function (response) {
var data = []; // 创建一个空数组
// 处理接口返回的数据，将其转化为xmSelect的数据格式
for (var i = 0; i < response.length; i++) {
data.push({
name: response[i].commodityname,
value: response[i].commodityname
});
}
// 更新xmSelect的数据源
commodityNames.update({data: data});
},
error: function (error) {
console.log('接口请求失败', error);
}
});
$.ajax({
url: 'GroupCsmaterialMaterialType', // 替换为实际的接口地址
method: 'GET',
dataType: "json",
async: true,
success: function (response) {
// 处理接口返回的数据，将其转化为xmSelect的数据格式
for (var i = 0; i < response.length; i++) {
params.push({
name: response[i],
value: response[i]
});
}
},
error: function (error) {
console.log('接口请求失败', error);
}
});
var cols = table.render({
elem: '#tableId'
, id: 'id'
, url: 'SelectBom'
, height: 'full-90'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, page: true
, cols: [
[
{type: 'checkbox'}
, {
field: 'commodityname', title: '商品名称', templet: function (data) {
return data.pz_commoditysize.pz_commodity.commodityname
}
}
, {
field: 'stylenumber', title: '商品款式', templet: function (data) {
return data.pz_commoditysize.pz_commodity.stylenumber
}
}
, {
field: 'commodityitemnumber', title: '商品货号', templet: function (data) {
return data.pz_commoditysize.commodityitemnumber
}
}
, {
field: 'colournumber', title: '颜色编码', templet: function (data) {
return data.pz_commoditysize.pz_colourtable.colournumber
}
}
, {
field: 'pantssize', title: '尺码', templet: function (data) {
return data.pz_commoditysize.pz_size.pantssize
}
}
, {
field: 'materialtypeMap', title: '物料类型', width: 150, event: 'materialtypeMap',
config: {type: 'select', data: params, cascadeSelectField: 'materialnameMap'}
, templet: function (data) {
return data.materialtypeMap && data.materialtypeMap.value ? data.materialtypeMap.value : '';
}
}
, {
field: 'materialnameMap',
title: '物料名称',
width: 150,
event: 'materialnameMap',
config: {type: 'select', data: params, cascadeSelectField: 'materialnoMap'}
, templet: function (data) {
return data.materialnameMap && data.materialnameMap.value ? data.materialnameMap.value : ''
}
}
, {
field: 'materialnoMap',
title: '物料货号',
width: 150,
event: 'materialnoMap',
config: {type: 'select', data: params, cascadeSelectField: 'supplierMap'}
, templet: function (data) {
return data.materialnoMap && data.materialnoMap.value ? data.materialnoMap.value : '';
}
}
, {
field: 'supplierMap',
title: '供应商',
width: 150,
event: 'supplierMap',
config: {type: 'select', data: params, cascadeSelectField: 'supplieritemnumberMap'}
, templet: function (data) {
return data.supplierMap && data.supplierMap.value ? data.supplierMap.value : '';
}
}
, {
field: 'supplieritemnumberMap',
title: '供应商货号',
width: 150,
event: 'supplieritemnumberMap'
,
config: {type: 'select', data: params, cascadeSelectField: 'supplycolornumberMap'},
templet: function (data) {
return data.supplieritemnumberMap && data.supplieritemnumberMap.value ? data.supplieritemnumberMap.value : '';
}
}
, {
field: 'supplycolornumberMap', title: '供应商色号', width: 150, event: 'supplycolornumberMap'
, config: {type: 'select', data: params}, templet: function (data) {
return data.supplycolornumberMap && data.supplycolornumberMap.name ? data.supplycolornumberMap.value : '';
}
}
, {
field: 'supplierprice',
title: '价格',
width: 120,
event: 'supplierprice',
config: {
type: 'input', verify: {type: 'required'}
}, templet: function (data) {
return data.pzCsmaterialSupplier.supplierprice;
}
}
, {
field: 'materialsize',
title: '单件用料',
width: 120,
event: 'materialsize',
config: {type: 'input', verify: {type: 'required'}}
}
, {
field: 'lossrate',
title: '损耗',
width: 120,
event: 'lossrate',
config: {type: 'input', verify: {type: 'required'}}
}
, {
field: 'commodityquantity',
title: '生产数量',
width: 120,
event: 'commodityquantity',
config: {type: 'input', verify: {type: 'required'}}
}
, {
field: 'needquantity',
title: '需求物料数量',
width: 120
}
]
]
, parseData: function (res) {
var result;
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {
"code": res.code,
"msg": res.msg,
"count": res.count,
"data": result
}
}
}).config.cols;
form.on('submit(sreach)', function () {
var commodityName = commodityNames.getValue('value');
var styleNumber=styleNumbers.getValue('value');
console.log(commodityName)
table.reload('tableId', {
where: commodityNames, // 传递新的搜索条件
styleNumbers
// 不传页码就是不重置页码
}, 'data');
return false;
})
/**
* 参数cols是table.render({})中的cols属性值
* aop代理是基于event点击事件进行操作的，
* 因此cols中务必开启event点击事件！
**/
var aopTable = tableEdit.aopObj(cols); //获取一个aop对象
var trs;
aopTable.on('tool(tableEvent)', function (obj) {
trs = obj;
var field = obj.field; //单元格字段
var value = obj.value; //修改后的值
var data = obj.data; //当前行旧数据
var event = obj.event; //当前单元格事件属性值
var update = {};
update[field] = value;
// 临时更改数据
data.pzCsmaterialSupplier = data.pzCsmaterialSupplier || {};
data.pzCsmaterialSupplier.supplierprice = field === 'supplierprice' ? value : data.pzCsmaterialSupplier.supplierprice;
//把value更新到行中
obj.update(update);
if (['commodityquantity', 'lossrate', 'materialsize'].includes(field)) {
var commodityquantity = field === "commodityquantity" ? parseFloat(value) : parseFloat(data.commodityquantity || 0);
var lossrate = field === "lossrate" ? parseFloat(value) : parseFloat(data.lossrate || 0) / 100;
var materialsize = field === "materialsize" ? parseFloat(value) : parseFloat(data.materialsize || 0);
var needquantity = Math.round((commodityquantity * materialsize + (commodityquantity * materialsize * lossrate)) * 100) / 100;
obj.update({needquantity: needquantity});
}
});
/**
* 级联下拉框 => 点击事件生成下拉框之前的回调函数
* 主要用于 => 动态获取单元格下拉数据
* tableEvent => table的lay-filter属性值
* 如示例代码所示
*/
// 级联下拉框点击事件生成下拉框之前的回调函数
tableEdit.on('clickBefore(tableEvent)', function (obj) {
var cascadeSelectData = obj.data; //级联数据
var cascadeSelectField = obj.field; //级联字段
if (Array.isArray(cascadeSelectData)) {
cascadeSelectData = cascadeSelectData[0];
}
function fetchData(url, dataKey, requestData) {
return $.ajax({
url: url,
method: 'GET',
dataType: "json",
traditional: true,
async: true,
data: requestData,
success: function (response) {
console.log(response)
var data;
if (response.length > 0 && typeof response[0] === 'string') {
// 第一种格式
data = response.map(function (item) {
return {name: item, value: item};
});
} else if (response.length > 0 && typeof response[0] === 'object') {
// 第二种格式
data = response.map(function (item) {
return {name: item.csmaterialid, value: item.supplycolornumber};
});
} else {
console.error('Unexpected response format');
return;
}
tableEdit.callbackFn("async(tableEvent)", {data: data, enabled: false});
},
error: function (error) {
console.log('接口请求失败', error);
}
});
}
if (cascadeSelectField === "materialtypeMap") {
fetchData('GroupCsmaterialMaterialName', 'materialtype', {materialtype: cascadeSelectData.name});
} else if (cascadeSelectField === "materialnameMap") {
fetchData('GroupCsmaterialMaterialNo', 'materialname', {
materialtype: trs.data.materialtypeMap.name,
materialname: cascadeSelectData.name
});
} else if (cascadeSelectField === "materialnoMap") {
// 可以继续添加下一级联动的数据获取，比如'supplierMap'
fetchData('GroupSupplier', 'materialno', {
materialtype: trs.data.materialtypeMap.name,
materialname: trs.data.materialnameMap.name,
materialno: cascadeSelectData.name
});
} else if (cascadeSelectField === "supplierMap") {
// 可以继续添加下一级联动的数据获取，比如'supplierMap'
fetchData('GroupSupplieritemnumber', 'supplier', {
materialtype: trs.data.materialtypeMap.name,
materialname: trs.data.materialnameMap.name,
materialno: trs.data.materialnoMap.name,
supplier:cascadeSelectData.name
});
}else if (cascadeSelectField === "supplieritemnumberMap") {
// 可以继续添加下一级联动的数据获取，比如'supplierMap'
fetchData('GroupSupplycolornumber', 'supplieritemnumber', {
materialtype: trs.data.materialtypeMap.name,
materialname: trs.data.materialnameMap.name,
materialno: trs.data.materialnoMap.name,
supplier: trs.data.supplierMap.name,
supplieritemnumber:cascadeSelectData.name
});
}
});
//头工具栏事件
table.on('toolbar(tableEvent)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
layer.prompt(function(val, index){
var data = checkStatus.data.map(function(item) {
return {
...item,
supplier: item.supplierMap.value,
supplieritemnumber:item.supplieritemnumberMap.value,
supplycolornumber:item.supplycolornumberMap.value,
csmaterialid:item.supplycolornumberMap.name,
commodityid:item.pz_commoditysize.commodityid,
supplierprice:item.pzCsmaterialSupplier.supplierprice,
throwNumber:val
}
});
$.ajax({
url: 'addProduce', // 替换为实际的接口地址
method: 'POST',
contentType: 'application/json',
dataType: "json",
async: true,
data: JSON.stringify(data),
success: function (response) {
layer.close(index);
if(response.success===true){
layer.msg('添加成功');
}else {
layer.msg('添加失败');
}
},
error: function (error) {
layer.msg('添加失败');
console.log('接口请求失败', error);
}
});
});
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
});
</script>
</html>
