登录/注册

首页 › SpreadJS & GcExcel专区 › 求助中心 › 查看内容

24 主题	50 帖子	218 积分

积分: 218

587
金币
24
主题
50
帖子

最新发帖

[已处理] 【v15-vue】拆分单元格为多列

秋辞
初级会员 / 发表于：2022-8-21 11:34 / 查看：1325 / 回复：5

30金币

本帖最后由秋辞于 2022-8-22 11:40 编辑

想实现效果类似这种， image.png170669554.png

image.png170669554.png

，demo里的数据结构可以变，我已经放上了现在的数据结构。可以在demo里给实现一下吗？谢谢 image.png162240294.png

image.png162240294.png

databind_vue.zip

113 KB, 下载次数: 31

最佳答案

查看完整内容

主要代码是在colInfo中，分别获取计划时间和完成时间，然后设置列头为两行，进行合并单元格。最后实现效果为：

收藏

回复

5 个回复

倒序浏览

最佳答案

最佳答案

沉沉 
金牌服务用户 / 发表于：2022-8-21 11:34:06 来自 3^#

主要代码是在colInfo中，分别获取计划时间和完成时间，然后设置列头为两行，进行合并单元格。

const data = [
{
"PATIENT_ID": "932418",
"PATIENT_NAME": "张茂堃",
"AGE": "25岁",
"jiaGong":{planTime:'2021-01-01',finishTime:'2021-01-02'}
}, {
"PATIENT_ID": "932418",
"PATIENT_NAME": "张茂堃",
"AGE": "25岁",
"jiaGong":{planTime:'2021-01-01',finishTime:'2021-01-02'}
}
]
var colInfos = [
{ name: 'PATIENT_ID', displayName: '病人ID', size: 70, visible: false },
{ name: 'PATIENT_NAME', displayName: '姓名', size: 60,pageBread: false },
{ name: 'AGE', displayName: '年龄', size: 120 },
{ displayName: '计划时间', size: 60 ,value:function (item){
return item.jiaGong.planTime
}},
{ displayName: '完成时间', size: 60 ,value:function (item){
return item.jiaGong.finishTime
}},
];
sheet.autoGenerateColumns = false;
sheet.bindColumns(colInfos)
sheet.setDataSource(data);
sheet.setRowCount(2,GC.Spread.Sheets.SheetArea.colHeader)
sheet.addSpan(0, 0, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 0, "", GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 1, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 1, "姓名", GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 2, 2, 1, GC.Spread.Sheets.SheetArea.colHeader)
sheet.setValue(0,2,"年龄",GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 3, 1, 2, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0,3, '加工',GC.Spread.Sheets.SheetArea.colHeader);

复制代码

最后实现效果为：

image.png431160888.png

评分

参与人数 1	满意度 +5	收起理由
秋辞	+ 5

查看全部评分

回复 使用道具举报

Richard.Ma
超级版主 / 发表于：2022-8-22 11:59:44 2^#

你说的这种拆分单元格可以通过自定义单元格实现，具体可以参考一下在线示例中，第二列的写法，包括了显示和编辑
https://demo.grapecity.com.cn/sp ... types/custom/purejs

代码稍微修改后的效果
image.png307924498.png

image.png307924498.png

修改了69行开始paint方法中的代码

if (value) {
spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName, x, y, w, h, style, options]);
spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value.lastName, x+100, y, w, h, style, options]);
if (!ctx) {
return;
}
ctx.save();
// draw inside the cell's boundary
ctx.rect(x, y, w, h);
ctx.clip();
ctx.beginPath();
ctx.moveTo(x+100,y);
ctx.lineTo(x+100,y+h);
ctx.lineWidth = 0.5;
console.log(style);
ctx.stroke();
ctx.restore();

复制代码

SpreadJS v16.0 正式版发布

回复 使用道具举报

Richard.Ma
超级版主 / 发表于：2022-8-22 13:53:04 4^#

我明白你的意思，按照你现在的数据源结构没有办法做成这样，

如果你是希望这个实际就是两列的话，那么绑定的数据源中，“计划时间”和“完成时间”应该实际就是2列，最后表头只是加1行，然后合并单元格，效果如下

image.png459983519.png

image.png459983519.png

image.png210549925.png

当然，其他列的列头两行，也可以通过代码进行合并，这样看起来更好看一些

评分

参与人数 1	满意度 +5	收起理由
秋辞	+ 5

查看全部评分

SpreadJS v16.0 正式版发布

回复 使用道具举报

秋辞
初级会员 / 发表于：2022-8-24 12:16:18 5^#

Richard.Ma 发表于 2022-8-22 11:59
你说的这种拆分单元格可以通过自定义单元格实现，具体可以参考一下在线示例中，第二列的写法，包括了显示和 ...

感觉这种解决方式对用户来说还是太复杂，就不如给两行关键代码。已经用您下面给的那种方式解决了，谢谢~

回复 使用道具举报

Richard.Ma
超级版主 / 发表于：2022-8-24 12:33:38 6^#

好的，问题解决就行，这个确实是两种思路，取决于你这边的数据源结构，数据源结构可以改动的话，两列独立开确实是最好的

SpreadJS v16.0 正式版发布

回复 使用道具举报