基于CSS Grid和ng-repeat动态渲染未知结构多维数组的网格布局问题

嘿，这需求我熟！要处理这种运行时才知道行列和列名的动态数据，用CSS Grid确实是个好选择，比硬写表格灵活多了。下面给你一套完整的实现方案：

步骤拆解 #

• 先从动态数据里提取所有列名（也就是对象的键），不管数据里的对象结构是不是完全一致，都能自动收集到所有可能的列。
• 用JavaScript动态配置Grid容器的列布局，让列数和列名数量匹配。
• 分别渲染表头和数据行，每个单元格对应Grid的一个项，通过样式让整体看起来像表格。

完整代码示例 #

HTML 结构 #

<!-- 用来承载Grid表格的容器 -->
<div id="dynamicGridTable"></div>

CSS 样式 #

#dynamicGridTable {
  display: grid;
  gap: 1px; /* 用来模拟表格的边框间距 */
  background-color: #ccc; /* 间隙的颜色就是表格的边框色 */
  margin: 20px;
}

/* 表头单元格样式 */
.grid-header {
  background-color: #f0f0f0;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

/* 数据单元格样式 */
.grid-cell {
  background-color: white;
  padding: 10px;
  text-align: left;
}

JavaScript 逻辑 #

// 模拟从Web服务获取的动态多维数组数据
const dynamicData = [
  { name: "Alice", age: 28, city: "New York" },
  { name: "Bob", age: 32, job: "Engineer" }, // 这个对象少了city，多了job
  { name: "Charlie", age: 24, city: "London", job: "Designer" }
];

// 第一步：提取所有唯一的列名
const allColumns = [...new Set(dynamicData.flatMap(item => Object.keys(item)))];

// 第二步：获取Grid容器，设置列模板
const gridContainer = document.getElementById('dynamicGridTable');
gridContainer.style.gridTemplateColumns = `repeat(${allColumns.length}, 1fr)`;

// 第三步：渲染表头
allColumns.forEach(column => {
  const headerCell = document.createElement('div');
  headerCell.className = 'grid-header';
  headerCell.textContent = column;
  gridContainer.appendChild(headerCell);
});

// 第四步：渲染每一行数据
dynamicData.forEach(rowData => {
  allColumns.forEach(column => {
    const cell = document.createElement('div');
    cell.className = 'grid-cell';
    // 如果当前行没有该列的数据，显示"-"或者空字符串都可以
    cell.textContent = rowData[column] ?? '-';
    gridContainer.appendChild(cell);
  });
});

关键细节说明 #

• 动态列配置：通过gridTemplateColumns = repeat(${allColumns.length}, 1fr)让每列自动均分容器宽度，你也可以根据需求改成固定宽度或者其他比例。
• 处理缺失字段：用rowData[column] ?? '-'来处理某些行缺少列数据的情况，避免显示undefined。
• 模拟表格边框：利用Grid的gap和容器背景色来实现表格的边框效果，比给每个单元格加边框更简洁。
• 灵活性：如果后续需要调整样式，比如高亮某列、响应式布局，直接修改CSS或者JS里的列模板就行，非常方便。

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