你使用的是 [Layui](https://www.layui.site/) 框架的表格（`layui-table`），并结合 PHP 渲染了表格数据。现在你的需求是：
> 在表格第一列每个单元格中添加一个“编辑”按钮，点击后：
> - 如果当前行的 `category` 字段值为 **不良品**，则弹出一个单行输入框，允许用户输入 `prepared_qty`（备料数量），提交后更新数据库。
> - 如果 `category` 为非不良品，则弹出一个多行文本域（textarea），让用户输入多个箱号（每行一个），系统自动计算：`prepared_qty = 箱号数量 × 10`，然后提交更新。
---
### ✅ 实现方案
我们将通过以下步骤实现：
1. 使用 Layui 的自定义列渲染功能，在第一列插入“编辑”按钮；
2. 绑定按钮点击事件；
3. 根据 `category` 判断类型，动态显示不同表单；
4. 提交数据到
后台（PHP）进行数据库更新。
---
### ✅ 前端代码修改（
HTML +
JavaScript）
#### 修改第一列，加入按钮和 Layui 渲染逻辑
将原来的 `<th>` 和 `<td>` 结构稍作调整，使用 Layui 的列模板（`templet`）来渲染按钮。
```
html
<div class="layui-card-body layui-table-body layui-table-main">
<table class="layui-table layui-form" id="demo" lay-data="page:true, url:'<
?php echo $_SERVER['PHP_SELF'];
?>'" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', sort:true, width:80, fixed:'left', title:'No.', templet: '#btnTpl'}">操作</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,fixed:'right'}">上传时间</th>
</tr>
</thead>
</table>
<!-- 按钮模板 -->
<script type="text/
html" id="btnTpl">
<button class="layui-btn layui-btn-xs" onclick="openEditModal('{{ d.category }}', '{{ d.id }}')">编辑</button>
</script>
</div>
```
> 注意：这里我们假设每一行有一个唯一标识 `id`（来自数据库主键）。如果没有，请确保 `$dataArr` 中包含一个唯一的 `id` 字段。
---
### ✅
JavaScript 弹窗与逻辑处理
```
html
<script src="https://cdn.jsdelivr.net/npm/layui-v2.9.10/dist/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
// 全局
变量存储当前行 ID
let currentRowId = null;
// 打开编辑弹窗
window.openEditModal = function(category, id) {
currentRowId = id;
let form
Html = '';
if (category === '不良品') {
form
Html = `
<div style="padding:20px;">
<label>请输入备料数量：</label>
<input type="number" id="prepared_qty_input" name="prepared_qty" placeholder="请输入数量" class="layui-input">
</div>`;
} else {
form
Html = `
<div style="padding:20px;">
<label>请刷入箱号（每行一个）：</label>
<textarea id="box_numbers" placeholder="例如：\\nA001\\nA002\\nA003" rows="6" class="layui-textarea"></textarea>
<div style="margin-top:10px;color:#666;">自动计算：备料数量 = 箱号数量 × 10</div>
</div>`;
}
layer.open({
type: 1,
title: '编辑备料信息',
content: form
Html,
area: ['500px', '400px'],
btn: ['提交', '取消'],
success: function(layero, index){
// 可选：聚焦输入框
if (category !== '不良品') {
document.getElementById('box_numbers').focus();
}
},
yes: function(index, layero){
let preparedQty = 0;
if (category === '不良品') {
const val = document.getElementById('prepared_qty_input').value;
if (!val || isNaN(val) || val <= 0) {
layer.msg('请输入有效的数量');
return;
}
preparedQty = parseFloat(val);
} else {
const boxes = document.getElementById('box_numbers').value.trim();
if (!boxes) {
layer.msg('请输入至少一个箱号');
return;
}
const boxList = boxes.split('\n').filter(b => b.trim().length > 0);
preparedQty = boxList.length * 10; // 每个箱号对应10个单位
}
// 发送 AJAX 请求到后端
submitToBackend(currentRowId, preparedQty, function(success){
if (success) {
layer.msg('更新成功');
layer.close(index);
// 可刷新表格
location.reload(); // 或使用 table.reload('demo')
} else {
layer.msg('更新失败，请重试');
}
});
}
});
};
// 提交数据到后端
function submitToBackend(id, qty, callback) {
fetch('update_prepared_qty.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `id=${id}&prepared_qty=${qty}`
})
.then(res => res.json())
.then(data => {
callback(data.success);
})
.catch(err => {
console.error(err);
callback(false);
});
}
});
</script>
```
---
### ✅ 后端处理文件：`update_prepared_qty.php`
```php
<
?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // 生产环境应限制域名
header('Access-Control-Allow-Methods: POST');
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
echo json_encode(['success' => false, 'msg' => 'Method not allowed']);
exit;
}
$id = intval($_POST['id']
?? 0);
$prepared_qty = floatval($_POST['prepared_qty']);
if ($id <= 0) {
echo json_encode(['success' => false, 'msg' => '无效的ID']);
exit;
}
// 数据库连接（根据你的实际配置修改）
$pdo = new PDO("mysql:host=localhost;dbname=your_db;charset=utf8", "username", "password");
try {
$stmt = $pdo->prepare("UPDATE your_table_name SET prepared_qty =
?, update_time = NOW() WHERE id =
?");
$result = $stmt->execute([$prepared_qty, $id]);
if ($result && $stmt->rowCount() > 0) {
echo json_encode(['success' => true, 'msg' => '更新成功']);
} else {
echo json_encode(['success' => false, 'msg' => '未找到记录或无更改']);
}
} catch (Exception $e) {
error_log($e->getMessage());
echo json_encode(['success' => false, 'msg' => '数据库错误']);
}
?>
```
---
### 🔍 补充说明
- 确保你的数据库表中有 `id` 字段作为主键；
- 替换 `your_table_name`、数据库连接参数为你自己的；
- 若前端使用了 Layui 的异步加载（AJAX），建议用 `table.reload('demo')` 替代 `location.reload()`；
- 安全性提示：生产环境不要用 `*` 跨域，要验证权限。
---
### ✅ 效果示意
| No. | 操作（编辑按钮） | 厂别 | ... |
|-----|------------------|------|-----|
| 1 | [编辑] | A厂 | ... |
点击“编辑” → 弹窗 → 输入 → 自动计算 → 提交 → 更新数据库。
---
###
本文详细介绍了在使用KendoUI的textarea时，前台输入的空格多于一个存入后台后空格个数不对的问题。通过深入分析和排查，最终发现并解决了编码问题，确保了前后台数据的一致性。
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
