15.1.0绑定table自动生成行的样式和之前的不一样

Richard.Huang

本帖最后由 Richard.Huang 于 2024-3-18 15:39 编辑

产品：SpreadJS
版本：V15.1.0

image.png280884398.png

table绑定后设置table.expandBoundRows(true);
但是新生成的行和之前的样式不一致。
然后前面的行数是不固定的，有什么好的方法能使它的样式统一？

Richard.Huang · Richard.Huang

zjk 发表于 2024-3-1 13:47
我上传了使用的ssjson文件，调用方法，看看可以不

您好，
SpreadJS的样式有单元格样式、行列样式。对于列样式，新增行是会继承的。
通过您提供的ssjson测试来看您是设置了单元格样式，所以新增行的数据没有继承前面单元格的样式。
因此您可以将原单元格样式设置为列样式，再次测试下。
示例代码：
sheet.setStyle(-1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
具体请参考学习指南：https://demo.grapecity.com.cn/sp ... /basic-style/purejs

或者您可以在每次setDataSource之后，对表格区域的单元格样式拷贝他上一行的样式来解决该问题，以下是按照这个想法实现的一个代码：

var len = sheet.tables.all().length;
for (var i = 0; i < len; i++) {
sheet.tables.all()[i].expandBoundRows(true); // 设置循序拓展
}
var tmp = {
lhzc: [
{
zh: "test",
side: "test",
describ: "test",
path: "test",
clyj: "test",
cljg: "test",
},
{
zh: "test",
side: "test",
describ: "test",
path: "test",
clyj: "test",
cljg: "test",
},
{
zh: "test",
side: "test",
describ: "test",
path: "test",
clyj: "test",
cljg: "test",
},
{
zh: "test",
side: "test",
describ: "test",
path: "test",
clyj: "test",
cljg: "test",
},
],
};
sheet.suspendPaint(); // 挂起绘制
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(tmp);
sheet.setDataSource(source);
// 拷贝样式
function copyTableStyle(sheet, table) {
let range = table.dataRange();
for (let i = 0; i < range.rowCount - 1; i++) {
for (let j = 0; j < sheet.getColumnCount(); j++) {
sheet.copyTo(
range.row + i,
j,
range.row + i + 1,
j,
1,
1,
GC.Spread.Sheets.CopyToOptions.style
);
}
}
}
for (var i = 0; i < len; i++) {
copyTableStyle(sheet, sheet.tables.all()[i]); // 轮询每个表格，并让拓展区域拷贝上一行的样式
}
sheet.resumePaint(); // 恢复绘制

复制代码

Richard.Huang · Richard.Huang

您好，我在SpreadJSV15中没有复现您所描述的问题，请问能否提供一份可供我们复现的demo，方便我们进行调研和测试，为您提供更加准确的解决方案：
3.gif69306944.png

zjk · zjk

Richard.Huang 发表于 2024-3-1 10:51
您好，我在SpreadJSV15中没有复现您所描述的问题，请问能否提供一份可供我们复现的demo，方便我们进行调研 ...

我上传了使用的ssjson文件，调用方法，看看可以不

zjk · zjk

Richard.Huang 发表于 2024-3-1 15:55
您好，
SpreadJS的样式有单元格样式、行列样式。对于列样式，新增行是会继承的。
通过您提供的ssjson测 ...

我使用了copyTableStyle的方法，样式一样了，但是还有个问题，就是我第一列和第二列有单元格的合并，除了addSpan还有什么好的方法不？因为每个表的行数不固定，用addSpan我就需要算行索引，有点麻烦

Richard.Huang · Richard.Huang

zjk 发表于 2024-3-2 10:23
我使用了copyTableStyle的方法，样式一样了，但是还有个问题，就是我第一列和第二列有单元格的合并，除了 ...

您好，我们最好一个问题一个帖子，期望您当前帖子问题解决之后还有其他新问题，请发新帖提问。

对于您的单元格合并问题，目前有三种解决方案
1. 如您所述，自己计算行索引未知，并用addSpan手动添加合并单元格
2. 使用自动合并单元格，按照列方向上自动合并：https://demo.grapecity.com.cn/sp ... uto-merge#timestamp
3. 升级V17.0.0，使用报表模块reportsheet，将您需要自动合并的列的单元格属性设置成分组即可：
参考资料：https://gcdn.grapecity.com.cn/showtopic-200931-1-1.html。
体验地址：https://demo.grapecity.com.cn/spreadjs/v17.0-reportsheet/
image.png325628966.png

zjk · zjk

Richard.Huang 发表于 2024-3-4 10:09
您好，我们最好一个问题一个帖子，期望您当前帖子问题解决之后还有其他新问题，请发新帖提问。

对于您 ...

好的，下次我分开提问。然后我刚才发现，周六的时候我试了他的样式是可以复制的，但是今天我又试了一遍发现新增的行样式没有复制，这之前我没有改动代码。这是我现在方法，麻烦帮我看看是我的写法有问题嘛
taizhangBinding() {
            this.visible = true;
            let timer = setInterval(() => {
                  if (this.rspread) {//判定spread是否准备好
                     if (this.dataurl) {
                        let sheet = this.rspread.getActiveSheet();
                        let source = new GC.Spread.Sheets.Bindings.CellBindingSource(this.dataurl);
                        let tableArray = [];
                        let tabledata = [];
                        tableArray = sheet.tables.all();
                        for (let i = 0; i < tableArray.length; i++) {
                              let table = tableArray;
                              let tabledataname = table.bindingPath();
                              tabledata = this.dataurl[tabledataname];
                              if (tabledata.length == 1) {
                                 //因为模板里是两行的，所以为了避免数据长度不够造成表格行数减少，追加一个空值
                                 this.dataurl[tabledataname].push({});
                              } else if (tabledata.length == 0) {
                                 this.dataurl[tabledataname] = [{}, {}]
                              }
                              table.expandBoundRows(true);
                              this.copyTableStyle(sheet, table)
                        }
                        let rowCount = sheet.getRowCount();
                        sheet.setDataSource(source);
                        //自适适应行高
                        for (let i = 2; i < rowCount; i++) {
                              sheet.autoFitRow(i);
                        }
                        this.addPics(sheet, this.dataurl.allPic, rowCount);
                        sheet.options.isProtected = true;
                        sheet.options.protectionOptions.allowResizeRows = true;
                        sheet.options.protectionOptions.allowResizeColumns = true;

                        sheet.repaint();
                        this.setSheetConfig();
                     } else {
                        alert("请选择需要报表的行");
                     }
                     clearInterval(timer);
                  }
            }, 500)
         },
         copyTableStyle(sheet, table) {
            console.log(sheet,227)
            let range = table.dataRange();
            for (let i = 0; i < range.rowCount - 1; i++) {
                  for (let j = 0; j < sheet.getColumnCount(); j++) {
                     sheet.copyTo(
                        range.row + i,
                        j,
                        range.row + i + 1,
                        j,
                        1,
                        1,
                        GC.Spread.Sheets.CopyToOptions.style
                     );
                  }
            }
         },

Richard.Huang · Richard.Huang

zjk 发表于 2024-3-4 10:19
好的，下次我分开提问。然后我刚才发现，周六的时候我试了他的样式是可以复制的，但是今天我又试了一遍发 ...

您的代码没有太大问题，您所说的新增一行指的是，用户在行头右键新增一行吗？如果是的话，那么样式没有复制的原因和上面我解释的是一样的：SpreadJS的样式有单元格样式、行列样式。对于列样式，新增行是会继承的。通过您提供的ssjson测试来看您是设置了单元格样式，所以新增行的数据没有继承前面单元格的样式。

解决办法和数据绑定时拷贝行样式一样，您可以通过监听行变化事件来动态拷贝行样式：https://demo.grapecity.com.cn/sp ... s.Events#rowchanged

Richard.Huang · Richard.Huang

您好，请问楼主的问题是否得到解决，如果仍然存在问题，欢迎继续跟帖询问

zjk · zjk

Richard.Huang 发表于 2024-3-13 11:14
您好，请问楼主的问题是否得到解决，如果仍然存在问题，欢迎继续跟帖询问

已经好了，谢谢

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

[已处理] 15.1.0绑定table自动生成行的样式和之前的不一样

最佳答案

10 个回复

SpreadJS 认证

SpreadJS 高级认证