数据分列功能

问题：如何实现数据分列功能

背景：

在Excel中提供了对于符合某种结构的数据，根据特定分隔符，对原始内容进行分割，从而生成多列的功能。

实现步骤：

目前SpreadJS设计器上还没有内置该功能，但通过调用SpreadJS现有API，可以实现分列功能。

1. 创建HTML结构

<body>
    <!-- designer容器 -->
    <div id="designer_host" style="width:100%;height:98vh;border:1px solid darkgray"></div>
    <!-- 设置分列的div 默认隐藏 z-index层级高于designer -->
    <div id="split_model" >
        <p>
            <label>请选择拆分符号：</label>
            <select id='split_symbol'>
                <option value='.'>点</option>
                <option value=' '>空格</option>
                <option value=','>逗号</option>
                <option value=':'>冒号</option>
                <option value=';'>分号</option>
            </select>
        </p>
        <p>
            <button id='cancel'>取消</button>
            <button id='split'>确定</button>
        </p>
        
    </div>
</body>

2. 分列主体逻辑

function sliceData(designer) {
  let select = document.getElementById("split_symbol");
  let index = select.selectedIndex;
  let symbol = select.options[index].value;
  let spread = designer.getWorkbook();
  let sheet = spread.getActiveSheet();
  let selection = sheet.getSelections()[0];
  let { row, col, rowCount, colCount } = selection; // 分列功能只能用在一列
  if (colCount !== 1) {
    alert("分列仅支持一列，请重新选择数据");
    return;
  } //选中一整列时row=1,需要将row替换为0，否则获取数据有问题
  row == -1 ? (row = 0) : null; // getArray获取选中区域数据
  let splitArray = sheet.getArray(row, col, rowCount, colCount);
  console.log(splitArray);
  let maxLen = 0; //需要添加的列数 //选区数据根据符号分割逻辑，确定最终需要添加的列数
  for (let i = 0; i < splitArray.length; i++) {
    if (splitArray[i] && splitArray[i][0] != null) {
      let newArray = splitArray[i][0].split(symbol);
      if (newArray.length > maxLen) {
        maxLen = newArray.length;
      }
      splitArray[i] = newArray;
    }
  }
  sheet.suspendPaint(); //性能优化 暂停绘制 数据量大时有用
  sheet.addColumns(col + 1, maxLen);
  sheet.setArray(row, col + 1, splitArray);
  console.log(splitArray);
  sheet.resumePaint();
}

3. 自定义designer，在数据tab下加上分列按钮

let config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
  sliceColumn: {
    title: "sliceColumn",
    text: "分列",
    iconClass: "ribbon-button-slice-column",
    bigButton: "true",
    commandName: "Welcome",
    execute: () => {
      document.getElementById("split_model").style.visibility = "visible";
    },
  },
};
config.ribbon[3].buttonGroups.push({
  label: "自定义的内容", // "thumbnailClass": "welcome",
  commandGroup: {
    children: [
      {
        direction: "vertical",
        commands: ["sliceColumn"],
      },
    ],
  },
});
let designer = new GC.Spread.Sheets.Designer.Designer(
  document.getElementById("designer_host"),
  config
);

4. 设置表单内容，添加监听事件

let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
sheet.defaults.colWidth = 80;
sheet.setArray(0, 0, [
  ["admin.aaa"],
  ["admin.bbb"],
  ["admin.ccc"],
  ["user.aaa"],
  ["user.bbb"],
  ["user.ccc"],
]);

document.getElementById("split").addEventListener("click", function () {
  sliceData(designer);
  document.getElementById("split_model").style.visibility = "hidden";
});
document.getElementById("cancel").addEventListener("click", function () {
  document.getElementById("split_model").style.visibility = "hidden";
});

最终演示效果及测试demo如下。

sliceColumn

数据分列.html

作者: Winny.Zhang | 审核：Lynn.Dou | 更新时间：2023.12.28