20260529172730

2026-05-29 17:27:31 +08:00
1 parent f86b77dc69
commit 8b08d18010
@@ -1,298 +0,0 @@
 <!DOCTYPE html>
 <html lang="zh">
 <head>
 <meta charset="UTF-8" />
 <title>主子表分页编辑 Demo</title>
 <style>
  body {
    font-family: Arial;
    padding: 20px;
    background: #f5f6f8;
  }
  .container {
    background: #fff;
    padding: 16px;
    border-radius: 10px;
  }
  h2 {
    margin: 10px 0;
  }
  /* 主表 */
  .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
  input {
    padding: 6px;
    flex: 1;
  }
  /* 表格 */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 6px;
    text-align: left;
  }
  td input {
    width: 100%;
    border: none;
    outline: none;
  }
  /* 分页 */
  .pager {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  button {
    padding: 5px 10px;
    cursor: pointer;
  }
  .tag {
    font-size: 12px;
    padding: 2px 6px;
    background: #ffecb3;
    border-radius: 4px;
  }
  .deleted {
    background: #ffe5e5;
    text-decoration: line-through;
  }
  .toolbar {
    margin-top: 10px;
    display: flex;
    gap: 10px;
  }
 </style>
 </head>
 <body>
 <div class="container">
  <h2>主表</h2>
  <div class="form-row">
    <input id="mainName" placeholder="主表名称" />
    <input id="mainCode" placeholder="主表编码" />
  </div>
  <h2>子表（分页编辑）</h2>
  <div class="toolbar">
    <button onclick="addRow()">新增行</button>
    <button onclick="submitAll()">提交全部</button>
  </div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>
  <div class="pager">
    <button onclick="prevPage()">上一页</button>
    <span id="pageInfo"></span>
    <button onclick="nextPage()">下一页</button>
  </div>
 </div>
 <script>
 /**
 * =========================
 * 模拟后端数据
 * =========================
 */
 const serverData = [];
 for (let i = 1; i <= 50; i++) {
  serverData.push({
    id: i,
    name: "物料-" + i,
    qty: Math.floor(Math.random() * 100)
  });
 }
 /**
 * =========================
 * 核心状态
 * =========================
 */
 let page = 1;
 const pageSize = 5;
 // ⭐ 子表缓存（核心）
 const cache = new Map();
 /**
 * =========================
 * 拉取数据（模拟分页接口）
 * =========================
 */
 function fetchPageData(page) {
  const start = (page - 1) * pageSize;
  const list = serverData.slice(start, start + pageSize);
  return list.map(item => {
    const cached = cache.get(item.id);
    return cached ? { ...item, ...cached } : item;
  });
 }
 /**
 * =========================
 * 渲染表格
 * =========================
 */
 function render() {
  const data = fetchPageData(page);
  const tbody = document.getElementById("tbody");
  tbody.innerHTML = "";
  data.forEach(row => {
    if (row._deleted) return;
    const tr = document.createElement("tr");
    if (row.isNew) tr.classList.add("deleted");
    tr.innerHTML = `
      <td>${row.id}</td>
      <td>
        <input value="${row.name || ""}" 
          onchange="onEdit(${row.id}, 'name', this.value)" />
      </td>
      <td>
        <input value="${row.qty || 0}" 
          onchange="onEdit(${row.id}, 'qty', this.value)" />
      </td>
      <td>
        ${row.isNew ? '<span class="tag">新增</span>' : ''}
        <button onclick="removeRow(${row.id})">删除</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
  document.getElementById("pageInfo").innerText =
    `第 ${page} / ${Math.ceil(serverData.length / pageSize)} 页`;
 }
 /**
 * =========================
 * 编辑缓存
 * =========================
 */
 function onEdit(id, field, value) {
  const old = cache.get(id) || { id };
  const updated = { ...old, [field]: value, isDirty: true };
  cache.set(id, updated);
 }
 /**
 * =========================
 * 新增
 * =========================
 */
 function addRow() {
  const tempId = "tmp_" + Date.now();
  const newRow = {
    id: tempId,
    name: "",
    qty: 0,
    isNew: true
  };
  cache.set(tempId, newRow);
  serverData.unshift(newRow); // 模拟插入数据源
  render();
 }
 /**
 * =========================
 * 删除（逻辑删除）
 * =========================
 */
 function removeRow(id) {
  const row = cache.get(id) || { id };
  cache.set(id, { ...row, _deleted: true });
  render();
 }
 /**
 * =========================
 * 分页
 * =========================
 */
 function prevPage() {
  if (page > 1) {
    page--;
    render();
  }
 }
 function nextPage() {
  if (page < Math.ceil(serverData.length / pageSize)) {
    page++;
    render();
  }
 }
 /**
 * =========================
 * 提交全部（核心）
 * =========================
 */
 function submitAll() {
  const all = Array.from(cache.values());
  const inserted = all.filter(i => i.isNew);
  const updated = all.filter(i => i.isDirty && !i.isNew);
  const deleted = all.filter(i => i._deleted);
  console.log("主表：", {
    name: document.getElementById("mainName").value,
    code: document.getElementById("mainCode").value
  });
  console.log("新增：", inserted);
  console.log("修改：", updated);
  console.log("删除：", deleted);
  alert("数据已输出到控制台（F12查看）");
 }
 /**
 * init
 */
 render();
 </script>
 </body>
 </html>