你使用的是 **Layui 框架**的前端表格（`layui-table`），并结合了 PHP 渲染后端数据。现在你的需求是：
> 在每行添加
一个“编辑”按钮，点击后根据 `category` 字段判断：
- 如果是“不良品”，弹出输入框让用户修改 `prepared_qty`；
- 如果不是“不良品”，则允许用户输入多个箱号（每箱
10 个单位），自动计算 `prepared_qty = 箱号数量 ×
10`；
- 最后提交更新到后台
数据库。
---
### ✅ 实现方案
我们将通过以下步骤实现：
1. 在表格中增加一列“操作”，包含【编辑】按钮；
2. 使用 Layui 的 `lay-event` 监听按钮点击；
3. 判断 `category` 类型，动态显示不同弹窗；
4. 提交数据到 PHP 后台接口进行
数据库更新。
---
### ✅ 修改后的 HTML + JavaScript 代码
```html
<div class="layui-card-body layui-table-body layui-table-main">
<table class="layui-table layui-form" id="demo" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', sort:true, width:80, fixed:'left'}">No.</th>
<th lay-data="{field:'plant', fixed:'left'}">厂别</th>
<th lay-data="{field:'kubie'}">库别</th>
<th lay-data="{field:'category'}">出货类别</th>
<th lay-data="{field:'so_number'}">票号</th>
<th lay-data="{field:'pallet_number'}">板号</th>
<th lay-data="{field:'liaohao'}">料号</th>
<th lay-data="{field:'name'}">品名</th>
<th lay-data="{field:'demand'}">需求数量</th>
<th lay-data="{field:'prepared_qty'}">备料数量</th>
<th lay-data="{field:'creator'}">创建人</th>
<th lay-data="{field:'create_time', width:
160}">上传时间</th>
<th lay-data="{fixed:'right', align:'center', toolbar: '#barDemo'}">操作</th>
</tr>
</thead>
<tbody>
<?php $i = 0; foreach
($dataArr as $w
) { $i++; ?>
<tr data-id="<?= $w['id'] ?>"
data-category="<?= htmlspecialchars
($w['category']
) ?>"
data-prepared-qty="<?= $w['prepared_qty'] ?>"
data-so-number="<?= $w['so_number'] ?>">
<td><?= $i ?></td>
<td><?= htmlspecialchars
($w['plant']
) ?></td>
<td><?= htmlspecialchars
($w['kubie']
) ?></td>
<td><?= htmlspecialchars
($w['category']
) ?></td>
<td><?= htmlspecialchars
($w['so_number']
) ?></td>
<td><?= htmlspecialchars
($w['pallet_number']
) ?></td>
<td><?= htmlspecialchars
($w['material']
) ?></td>
<td><?= htmlspecialchars
($w['name']
) ?></td>
<td><?= $w['demand'] ?></td>
<td><?= $w['prepared_qty'] ?></td>
<td><?= htmlspecialchars
($w['creator']
) ?></td>
<td><?= htmlspecialchars
($w['create_time']
) ?></td>
<td>
<button class="layui-btn layui-btn-xs edit-btn">编辑</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- 工具栏模板 -->
<script type="text/html" id="barDemo">
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
</script>
<!-- 引入 layui -->
<script src="https://cdn.jsdelivr.net/npm/layui-v2.7.6/dist/layui.js"></script>
<script>
layui.use
(['layer', 'table'], function
(){
var layer = layui.layer;
var table = layui.table;
// 监听工具条事件（虽然我们用原生按钮，但也可以监听）
$
('.edit-btn'
).on
('click', function
() {
var tr = $
(this
).closest
('tr'
);
var category = tr.data
('category'
);
var soNumber = tr.data
('so-number'
);
var preparedQty = tr.data
('prepared-qty'
);
if
(category === '不良品'
) {
// 不良品：直接输入 prepared_qty
layer.prompt
({
formType: 0,
title: '修改备料数量',
value: preparedQty
}, function
(value, index
) {
if
(!value || isNaN
(value
) || value <= 0
) {
layer.msg
('请输入有效的数量'
);
return;
}
updateToServer
(soNumber, parseFloat
(value
));
layer.close
(index
);
}
);
} else {
// 非不良品：输入多行箱号
layer.open
({
title: '刷入箱号（每箱
10个）',
area: ['400px', '300px'],
content: '<textarea id="boxInput" placeholder="请逐行输入箱号..." style="width:90%;height:200px;margin:
10px;"></textarea>',
btn: ['确定', '取消'],
yes: function
(index
) {
var boxText = document.getElementById
('boxInput'
).value.trim
();
if
(!boxText
) {
layer.msg
('请输入箱号'
);
return;
}
var boxLines = boxText.split
('\n'
).filter
(function
(line
) {
return line.trim
() !== '';
}
);
var newQty = boxLines.length *
10;
layer.confirm
('共 ' + boxLines.length + ' 个箱号，备料数量为 ' + newQty + '，确认提交？', function
(cIndex
) {
updateToServer
(soNumber, newQty
);
layer.close
(cIndex
);
layer.close
(index
);
}
);
}
}
);
}
}
);
// 提交更新到服务器
function updateToServer
(soNumber, preparedQty
) {
$.ajax
({
url: 'update_prepared_qty.php', // 后台处理脚本
type: '
POST',
data: {
so_number: soNumber,
prepared_qty: preparedQty
},
dataType: 'json',
success: function
(res
) {
if
(res.success
) {
layer.msg
('更新成功'
);
location.reload
(); // 可优化为局部刷新
} else {
layer.msg
('更新失败: ' + res.message
);
}
},
error: function
() {
layer.msg
('网络
错误，请重试'
);
}
}
);
}
}
);
</script>
```
---
### ✅ 后端 PHP 接口文件：`update_prepared_qty.php`
```php
<?php
header
('Content-Type: application/json'
);
// 假设你已连接
数据库
$pdo = new PDO
("mysql:host=localhost;dbname=your_db", "username", "password"
);
$pdo->setAttribute
(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION
);
if
($_
POST['so_number'] && isset
($_
POST['prepared_qty']
)) {
$so_number = trim
($_
POST['so_number']
);
$prepared_qty =
(float
)$_
POST['prepared_qty'];
try {
$stmt = $pdo->prepare
("UPDATE your_table SET prepared_qty = ? WHERE so_number = ?"
);
$result = $stmt->execute
([$prepared_qty, $so_number]
);
echo json_encode
(['success' => true]
);
} catch
(Exception $e
) {
echo json_encode
(['success' => false, 'message' => $e->getMessage
()]
);
}
} else {
echo json_encode
(['success' => false, 'message' => '参数缺失']
);
}
?>
```
---
### ✅ 功能说明
| 功能 | 描述 |
|------|------|
| 编辑按钮 | 每行右侧有“编辑”按钮 |
| 数据绑定 | 使用 `data-*` 属性存储关键字段（如 category、so_number） |
| 条件弹窗 | 根据 `category` 显示不同输入方式 |
| 自动计算 | 非不良品按箱数×
10计算 quantity |
| 安全提交 | 使用 AJAX 提交到 PHP 接口更新
数据库 |
---
### ✅ 注意事项
1. **防止 XSS 攻击**：所有输出使用 `htmlspecialchars
()` 转义。
2. **SQL 注入防护**：后端使用预处理语句（PDO）。
3. **字段匹配**：确保 `so_number` 是唯一标识符或能定位到记录。
4. **可扩展性**：
未来可用 Layui 表格重载代替 `location.reload
()`。
---
### ✅ 示例效果
- 点击“不良品”行 → 输入数字 → 提交 → 更新 `prepared_qty`
- 点击“正常品”行 → 输入 5 行箱号 → 提交 → `prepared_qty = 50`
但category为不良品时，无单行文本框弹出
本文介绍了一种将文件导入数据库的方法，并详细展示了如何通过检查文件名及类型来更新数据库记录的过程。文中提供了一段示例代码，解释了如何将文件内容保存到数据库的 memo 字段，并在树形视图中添加相应的节点。
扫一扫
3511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
