如何在Suitelet中创建子列表与汇总信息框？

整体结构设计 #

将组件分为汇总信息区和子列表明细区两部分：

• 汇总区：展示field1、field2字段及对应值，保留你提供的左右对齐布局
• 子列表区：用标准表格展示每条订单记录的完整字段，匹配常规销售订单明细布局

完整实现代码 #

HTML结构

<!-- 销售订单汇总框容器 -->
<div class="order-summary-container">
  <!-- 汇总信息区 -->
  <table class="summary-table">
    <tr>
      <td class="field-label">field1</td>
      <td class="field-value">对应值1</td>
    </tr>
    <tr>
      <td class="field-label">field2</td>
      <td class="field-value">对应值2</td>
    </tr>
  </table>

  <!-- 子列表明细区 -->
  <div class="order-items-list">
    <h3>订单明细</h3>
    <table class="items-table">
      <thead>
        <tr>
          <th>字段1</th>
          <th>字段2</th>
          <th>其他字段</th>
        </tr>
      </thead>
      <tbody>
        <!-- 动态生成的明细行 -->
        <tr>
          <td>明细值1</td>
          <td>明细值2</td>
          <td>其他值1</td>
        </tr>
        <tr>
          <td>明细值3</td>
          <td>明细值4</td>
          <td>其他值2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS样式

/* 汇总框容器 */
.order-summary-container {
  width: 80%;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

/* 汇总信息表格 */
.summary-table {
  width: 100%;
  background-color: #e0e6ef;
  border-collapse: collapse;
}

.summary-table td {
  padding: 8px 12px;
}

.field-label {
  text-align: left;
  font-weight: 500;
}

.field-value {
  text-align: right;
}

/* 子列表区 */
.order-items-list {
  padding: 10px;
}

.order-items-list h3 {
  margin-top: 0;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

/* 明细表格 */
.items-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.items-table th, .items-table td {
  border: 1px solid #eee;
  padding: 8px 12px;
  text-align: left;
}

.items-table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

动态数据渲染（JS示例）

如果需要从后端获取数据并动态生成内容，可通过以下方式实现：

// 模拟后端返回的数据
const summaryData = {
  field1: "订单编号",
  value1: "SO202405001",
  field2: "订单总金额",
  value2: "¥1280.00"
};

const itemsData = [
  { field1: "商品A", field2: "¥399.00", other: "1件" },
  { field1: "商品B", field2: "¥881.00", other: "2件" }
];

// 渲染汇总信息
const summaryTable = document.querySelector('.summary-table');
summaryTable.innerHTML = `
  <tr>
    <td class="field-label">${summaryData.field1}</td>
    <td class="field-value">${summaryData.value1}</td>
  </tr>
  <tr>
    <td class="field-label">${summaryData.field2}</td>
    <td class="field-value">${summaryData.value2}</td>
  </tr>
`;

// 渲染明细列表
const itemsTbody = document.querySelector('.items-table tbody');
let itemsHtml = '';
itemsData.forEach(item => {
  itemsHtml += `
    <tr>
      <td>${item.field1}</td>
      <td>${item.field2}</td>
      <td>${item.other}</td>
    </tr>
  `;
});
itemsTbody.innerHTML = itemsHtml;

核心实现要点 #

1. 汇总区沿用你提供的表格布局逻辑，通过CSS类统一控制字段左对齐、值右对齐的样式
2. 子列表区采用带表头的标准表格，匹配常规销售订单的明细展示习惯，提升可读性
3. 样式使用独立类名管理，方便后续修改配色、间距等样式细节
4. 动态渲染部分通过循环拼接HTML，适配任意数量的订单明细记录

内容的提问来源于stack exchange，提问作者user15989047