<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui 表格条件字段添加与值覆盖</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.9.6/dist/css/layui.min.css">
<style>
body {
padding: 20px;
background-color: #f2f2f2;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn-group {
display: flex;
gap: 10px;
}
.empty-tip {
text-align: center;
padding: 30px;
color: #999;
}
.condition-panel {
margin-bottom: 15px;
padding: 15px;
background-color: #f8f8f8;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>销售数据表 - 条件字段添加与值覆盖</h2>
<div class="btn-group">
<button class="layui-btn" id="addSingle">添加一行</button>
<button class="layui-btn layui-btn-normal" id="addFromArray">从数组添加</button>
<button class="layui-btn layui-btn-danger" id="clearAll">清空表格</button>
</div>
</div>
<div class="condition-panel">
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">条件类型</label>
<div class="layui-input-inline">
<select id="conditionType" class="layui-select">
<option value="A">类型A - 特殊折扣</option>
<option value="B">类型B - 批发价格</option>
<option value="C">类型C - VIP价格</option>
<option value="D">类型D - 促销活动</option>
</select>
</div>
<div class="layui-form-mid">选择产品类型，不同类型会修改基础字段值</div>
</div>
</div>
</div>
<table id="saletable" lay-filter="table"></table>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.9.6/dist/layui.min.js"></script>
<script>
layui.use(['table', 'jquery', 'form'], function(){
var table = layui.table;
var $ = layui.$;
var form = layui.form;
// 示例数据数组
var dataToAdd = [
{
name: "贝尔莫彩片半年抛（棕）",
brand: "贝尔莫彩片半年抛（棕）",
brands: "贝尔莫彩片半年抛（棕）45-0.00",
count: "1",
total: "0",
goodsname: "C0173-0.00-0.00",
goodsid: "C0173",
barcodes: "",
batchNo: "123",
expiryDate: "2031-10-06",
productionDate: "2025-10-07",
vendorid: "G00143",
sph: "-0.00",
cyl: "-0.00",
model: "45",
valid: "2190",
reglicense: "国械注准第456号",
factory: "安抚",
factorylicense: "123",
type: "A", // 这个字段将用于条件判断
types: "隐形眼镜",
buy: "0",
buyave: "0",
pay: "0",
sale: "150",
unit: "片"
},
{
name: "示例产品B",
brand: "示例品牌B",
brands: "示例品牌B-规格",
count: "2",
total: "0",
goodsname: "C0174-0.00-0.00",
goodsid: "C0174",
barcodes: "123456789",
batchNo: "124",
expiryDate: "2032-10-06",
productionDate: "2026-10-07",
vendorid: "G00144",
sph: "-1.00",
cyl: "-0.50",
model: "46",
valid: "2000",
reglicense: "国械注准第789号",
factory: "示例工厂",
factorylicense: "456",
type: "B", // 这个字段将用于条件判断
types: "隐形眼镜",
buy: "100",
buyave: "50",
pay: "120",
sale: "200",
unit: "片"
},
{
name: "示例产品C",
brand: "示例品牌C",
brands: "示例品牌C-规格",
count: "3",
total: "0",
goodsname: "C0175-0.00-0.00",
goodsid: "C0175",
barcodes: "987654321",
batchNo: "125",
expiryDate: "2033-10-06",
productionDate: "2027-10-07",
vendorid: "G00145",
sph: "-2.00",
cyl: "-1.00",
model: "47",
valid: "1800",
reglicense: "国械注准第101号",
factory: "示例工厂C",
factorylicense: "789",
type: "C", // 这个字段将用于条件判断
types: "隐形眼镜",
buy: "120",
buyave: "60",
pay: "150",
sale: "250",
unit: "片"
}
];
// 初始化表格
table.render({
elem: '#saletable',
data: [{
stockname: "",
brands: "",
number: 0,
sale: 0,
total: 0,
goodsid: "",
type: "",
discount: "",
special_note: "",
condition_field: ""
}],
page: false,
totalRow: true,
cols: [[
{type: 'numbers', title: '序号', totalRowText: '合计'},
{field: 'stockname', title: '产品名称', minWidth: 150},
{field: 'brands', title: '品牌规格', minWidth: 150},
{field: 'number', title: '数量', minWidth: 100, totalRow: true},
{field: 'sale', title: '售价', minWidth: 100},
{field: 'total', title: '总金额', minWidth: 120, totalRow: true},
{field: 'goodsid', title: '商品ID', minWidth: 100},
{field: 'type', title: '类型', minWidth: 80},
{field: 'discount', title: '折扣信息', minWidth: 120},
{field: 'special_note', title: '特别说明', minWidth: 150},
{field: 'condition_field', title: '条件字段', minWidth: 120},
{title: '操作', toolbar: '#barDemo', minWidth: 100}
]]
});
// 从数组添加数据
$('#addFromArray').on('click', function(){
// 获取当前表格数据
var tableData = table.cache.saletable || [];
// 检查当前是否只有空行
var isEmptyTable = tableData.length === 1 &&
(!tableData[0].stockname || tableData[0].stockname === "") &&
tableData[0].number === 0;
if (isEmptyTable) {
// 如果是空表，替换空行
tableData = [];
}
// 添加数组中的所有数据
dataToAdd.forEach(function(item) {
// 创建基础行数据 - 这是初始设置
var rowData = {
stockname: item.name || item.brand || "",
brands: item.brands,
number: parseInt(item.count) || 1,
sale: parseFloat(item.sale) || 0,
total: parseFloat(item.total) || 0,
goodsid: item.goodsid || "",
type: item.type || "",
discount: "无折扣", // 默认值
special_note: "标准产品", // 默认值
condition_field: "默认条件字段" // 默认值
};
// 根据条件修改基础行数据 - 这里的赋值会覆盖前面的值
if (item.type === 'A') {
// 类型A：特殊折扣，修改售价和折扣信息
rowData.sale = rowData.sale * 0.8; // 8折
rowData.discount = "8折优惠";
rowData.special_note = "VIP专享特价";
rowData.condition_field = "条件A字段值";
// 重新计算总金额
rowData.total = rowData.number * rowData.sale;
} else if (item.type === 'B') {
// 类型B：批发价格，修改数量和售价
rowData.number = rowData.number * 2; // 数量翻倍
rowData.sale = rowData.sale * 0.7; // 7折
rowData.discount = "批发价7折";
rowData.special_note = "批量采购优惠";
rowData.condition_field = "条件B字段值";
// 重新计算总金额
rowData.total = rowData.number * rowData.sale;
} else if (item.type === 'C') {
// 类型C：VIP价格，修改售价和添加特别说明
rowData.sale = rowData.sale * 0.9; // 9折
rowData.discount = "VIP专享9折";
rowData.special_note = "尊贵VIP客户专享";
rowData.condition_field = "条件C字段值";
// 重新计算总金额
rowData.total = rowData.number * rowData.sale;
} else if (item.type === 'D') {
// 类型D：促销活动，修改多个字段
rowData.sale = rowData.sale * 0.5; // 5折
rowData.number = rowData.number + 1; // 买一送一
rowData.discount = "买一送一，5折优惠";
rowData.special_note = "限时促销活动";
rowData.condition_field = "条件D字段值";
// 重新计算总金额
rowData.total = rowData.number * rowData.sale;
}
tableData.push(rowData);
});
// 重载表格
table.reload('saletable', {
data: tableData
});
// 更新合计行
updateTotalRow();
});
// 添加一行
$('#addSingle').on('click', function(){
// 获取当前表格数据
var tableData = table.cache.saletable || [];
var conditionType = $('#conditionType').val();
// 检查当前是否只有空行
var isEmptyTable = tableData.length === 1 &&
(!tableData[0].stockname || tableData[0].stockname === "") &&
tableData[0].number === 0;
// 创建基础行数据
var newRow = {
stockname: '新产品',
brands: '品牌规格',
number: 1,
sale: 100,
total: 100,
goodsid: 'NEW001',
type: conditionType,
discount: "无折扣",
special_note: "标准产品",
condition_field: "默认条件字段"
};
// 根据条件修改基础行数据
if (conditionType === 'A') {
newRow.sale = newRow.sale * 0.8;
newRow.discount = "8折优惠";
newRow.special_note = "VIP专享特价";
newRow.condition_field = "条件A字段值";
newRow.total = newRow.number * newRow.sale;
} else if (conditionType === 'B') {
newRow.number = newRow.number * 2;
newRow.sale = newRow.sale * 0.7;
newRow.discount = "批发价7折";
newRow.special_note = "批量采购优惠";
newRow.condition_field = "条件B字段值";
newRow.total = newRow.number * newRow.sale;
} else if (conditionType === 'C') {
newRow.sale = newRow.sale * 0.9;
newRow.discount = "VIP专享9折";
newRow.special_note = "尊贵VIP客户专享";
newRow.condition_field = "条件C字段值";
newRow.total = newRow.number * newRow.sale;
} else if (conditionType === 'D') {
newRow.sale = newRow.sale * 0.5;
newRow.number = newRow.number + 1;
newRow.discount = "买一送一，5折优惠";
newRow.special_note = "限时促销活动";
newRow.condition_field = "条件D字段值";
newRow.total = newRow.number * newRow.sale;
}
if (isEmptyTable) {
// 如果是空表，替换空行
tableData = [newRow];
} else {
// 否则添加新行
tableData.push(newRow);
}
// 重载表格
table.reload('saletable', {
data: tableData
});
// 更新合计行
updateTotalRow();
});
// 监听工具条
table.on('tool(table)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('确定删除该行吗？', function(index){
// 获取当前表格数据
var tableData = table.cache.saletable || [];
// 如果删除后没有数据了，保留一个空行
if (tableData.length <= 1) {
table.reload('saletable', {
data: [{
stockname: "",
brands: "",
number: 0,
sale: 0,
total: 0,
goodsid: "",
type: "",
discount: "",
special_note: "",
condition_field: ""
}]
});
} else {
obj.del();
}
layer.close(index);
updateTotalRow();
});
}
});
// 清空表格 - 保留一个空行
$('#clearAll').on('click', function(){
layer.confirm('确定清空表格所有数据吗？', function(index){
table.reload('saletable', {
data: [{
stockname: "",
brands: "",
number: 0,
sale: 0,
total: 0,
goodsid: "",
type: "",
discount: "",
special_note: "",
condition_field: ""
}]
});
layer.close(index);
});
});
// 更新合计行
function updateTotalRow() {
// 获取当前表格数据
var tableData = table.cache.saletable || [];
// 计算总数量和总金额
var totalNumber = 0;
var totalAmount = 0;
tableData.forEach(function(item) {
totalNumber += parseInt(item.number) || 0;
totalAmount += parseFloat(item.total) || 0;
});
// 更新合计行显示
$('.layui-table-total .layui-table-cell').each(function(index) {
var $cell = $(this);
if (index === 3) { // 数量列
$cell.text(totalNumber);
} else if (index === 5) { // 总金额列
$cell.text(totalAmount.toFixed(2));
}
});
}
});
</script>
<!-- 表格操作列模板 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</body>
</html>
版权归属：
Administrator
许可协议：
本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权
评论区