SpreadJS实现数据分列功能

收藏 · 2021-11-25 16:53 上传

本帖最后由 Winny 于 2021-11-25 16:53 编辑

在Excel中提供了对于符合某种结构的数据，根据特定分隔符，对原始内容进行分割，从而生成多列的功能。目前SpreadJS设计器上还没有内置该功能，但通过调用SpreadJS现有API,其实完全可以实现分列功能。本文会详细介绍该功能的实现方法。

1. 创建HTML结构

<body>
<div id="designer_host" style="width:100%;height:98vh;border:1px solid darkgray"></div>
<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见文章末尾。

		自动登录	找回密码
密码			立即注册

SpreadJS实现数据分列功能

0 个回复

浏览过的版块