根据用户选择的行和列数据构造数据结构(跨行跨列)

方案一

这段代码的功能是根据用户选择的行和列数据，生成一个适合复制粘贴的字符串表格。代码会先按列的 id 从小到大排序，再根据行列的选择关系将数据按顺序填入表格，每行之间使用换行符分隔，每列之间使用制表符分隔。如果某一行缺少对应列的数据，则在该位置插入空格。

注意事项

列排序 ：代码先根据 id 对所选列数据进行排序，确保生成的表格中列顺序一致。
行列对应关系 ：每列数据包含一个 _X_ROW_KEY 属性，表示它对应的行。代码会检查列和行的 _X_ROW_KEY 是否匹配，只有匹配的列才会填入数据，否则填入空位。
空位占位：如果某行在某列没有数据，为了保持列对齐，会插入空字符串。

代码字段解释

selectedRows：用户选择的行数据，每行数据代表一个完整的数据对象，其中包含了字段 id、name、sex 等字段，并用 _X_ROW_KEY 标记它属于哪一行。
selectedColumns：用户选择的列数据，每列包含 field（对应行的字段）、title（列标题）、id（列的唯一标识）等属性。_X_ROW_KEY 数组标记该列在哪些行中有数据。
sortedColumns：排序后的列数组，确保列输出时按 id 的升序排列。

代码实现

javascript 复制代码

// 所选行数据
const selectedRows = [
  { "id": 1, "name": "张三", "age": 30, "sex": "男", "job": "前端", "address": "中国xxxxxxxxxx", "_X_ROW_KEY": "row_8" },
  { "id": 2, "name": "李四", "age": 30, "sex": "男", "job": "后端", "address": "中国xxxxxxxxxx", "_X_ROW_KEY": "row_10" }
];

// 所选列数据
const selectedColumns = [
  { "property": "name", "field": "name", "title": "姓名", "width": 100, "fixed": "left", "align": "left", "filterMultiple": true, "id": "col_09", "_X_ROW_KEY": ["row_8"] },
  { "property": "job", "field": "job", "title": "职务", "width": 100, "fixed": "left", "align": "left", "filterMultiple": true, "id": "col_34", "_X_ROW_KEY": ["row_10"] },
  { "property": "address", "field": "address", "title": "地址", "width": 100, "fixed": "left", "align": "left", "filterMultiple": true, "id": "col_35", "_X_ROW_KEY": ["row_10","row_8"] },
  { "property": "sex", "field": "sex", "title": "性别", "width": 100, "fixed": "left", "align": "left", "filterMultiple": true, "id": "col_10", "_X_ROW_KEY": ["row_8","row_10"] }
];

// 组装数据结构并生成拼接字符串
function assembleSelectedDataString(selectedRows, selectedColumns) {
  // 对 selectedColumns 按列的 id 从小到大排序，确保输出中列的顺序一致
  const sortedColumns = selectedColumns.sort((a, b) => parseInt(a.id.replace("col_", "")) - parseInt(b.id.replace("col_", "")));

  // 初始化一个空数组，用来存储每一行的拼接数据
  const rows = [];

  // 遍历行数据，对每一行处理一次
  selectedRows.forEach(row => {
    const rowKey = row._X_ROW_KEY; // 获取当前行的唯一标识符，用来匹配列数据
    const rowData = []; // 存储当前行对应的每列数据

    // 遍历排序后的列数据，保证列顺序输出正确
    sortedColumns.forEach(column => {
      // 检查当前列是否包含该行数据的 _X_ROW_KEY
      if (column._X_ROW_KEY.includes(rowKey)) {
        // 如果列的 _X_ROW_KEY 包含当前行的 rowKey，则插入对应的字段值
        rowData.push(row[column.field]);
      } else {
        // 如果不包含，则插入空字符串，占位使列对齐
        rowData.push("");
      }
    });

    // 将当前行数据（用制表符连接每列数据）添加到 rows 数组中
    rows.push(rowData.join("\t"));
  });

  // 将所有行数据连接成一个字符串，每行之间用换行符分隔
  return rows.join("\n");
}

// 调用函数获取拼接后的字符串
const selectedDataString = assembleSelectedDataString(selectedRows, selectedColumns);
console.log(selectedDataString);

示例输出

html 复制代码

张三	男		中国xxxxxxxxxx
	男	后端	中国xxxxxxxxxx

方案二

这段代码的目的是根据输入的行数据和列数据生成一个格式化的字符串，字符串中的列使用制表符 (\t) 分隔，行使用换行符 (\n) 分隔，方便输出和阅读。每一列的数据会根据最大列宽对齐，以确保输出的格式整齐。

javascript 复制代码

const data = [
  { "rowIndex": 2, "columnIndex": 5, "value": "2218123959094757194" },
  { "rowIndex": 2, "columnIndex": 6, "value": "2-6" },
  { "rowIndex": 3, "columnIndex": 5, "value": "2218123959094757194" },
  { "rowIndex": 3, "columnIndex": 6, "value": "3-6" },
  { "rowIndex": 4, "columnIndex": 5, "value": "2218123959094757194" },
  { "rowIndex": 4, "columnIndex": 6, "value": "4-6" },
  { "rowIndex": 5, "columnIndex": 5, "value": "2218123959094757194" },
  { "rowIndex": 5, "columnIndex": 6, "value": "5-6" },
  { "rowIndex": 6, "columnIndex": 5, "value": "2218123959094757194" },
  { "rowIndex": 7, "columnIndex": 7, "value": "7-7-7-7-7-7" },
  { "rowIndex": 7, "columnIndex": 8, "value": "7-8-7-8-7-8" },
];

// 定义一个函数，用于生成格式化的表格字符串
function generateCompactTableString(data) {
  // 计算表格的最大行索引
  const maxRow = Math.max(...data.map(item => item.rowIndex));
  
  // 提取所有列索引并去重、排序，得到一个有序的列索引数组
  const columnIndices = Array.from(new Set(data.map(item => item.columnIndex))).sort((a, b) => a - b);

  // 创建一个二维数组，用于存储每个单元格的内容
  // 行数为 maxRow + 1，列数为 columnIndices 的长度，初始化为空字符串
  const table = Array.from({ length: maxRow + 1 }, () => Array(columnIndices.length).fill(""));

  // 遍历输入数据，将值填入对应的表格位置
  data.forEach(item => {
    const { rowIndex, columnIndex, value } = item; // 解构出行索引、列索引和值
    const colIndex = columnIndices.indexOf(columnIndex); // 找到列索引在表格中的位置
    if (colIndex !== -1) { // 如果该列索引存在
      table[rowIndex][colIndex] = value; // 将值填入表格
    }
  });

  // 计算每列的最大宽度，以便后续对齐
  const columnWidths = columnIndices.map((_, colIndex) => 
    Math.max(...table.map(row => row[colIndex].length)) // 计算每列的最大字符长度
  );

  // 过滤掉空行
  const nonEmptyRows = table.filter(row => row.some(cell => cell !== "")); // 只保留至少有一个非空单元格的行

  // 将表格内容转换为字符串，用制表符分隔列
  return nonEmptyRows.map(row => 
    row.map((cell, colIndex) => 
      cell.padEnd(columnWidths[colIndex]) // 确保每列宽度一致，使用空格填充
    ).join("\t") // 用制表符连接列
  ).join("\n"); // 用换行符连接行
}

// 输出格式化后的表格字符串
const compactTableString = generateCompactTableString(data);
console.log(compactTableString); // 打印输出结果

各字段解释

data：一个包含多个对象的数组。每个对象代表一个单元格的数据，包含以下字段：
- rowIndex：表示数据所在的行索引（从0开始计数）。
- columnIndex：表示数据所在的列索引（从0开始计数）。
- value：该单元格要显示的内容。
generateCompactTableString(data)：一个函数，用于生成格式化的表格字符串。
- 参数：data，上面定义的数组。
- 返回值：格式化后的表格字符串，列用制表符分隔，行用换行符分隔。
maxRow ：通过遍历 data 数组，找出最大的 rowIndex 值，以确定表格的行数。
columnIndices ：使用 Set 来提取并去重所有的 columnIndex，然后将其排序，得到一个有序的列索引数组。
table ：一个二维数组，用于存储每个单元格的内容。它的行数为 maxRow + 1，列数为 columnIndices 的长度，初始时填充为空字符串。
padEnd：用于确保每列的宽度一致，通过在每个单元格内容后面填充空格。