【v17.0.2】设置table列样式

sheet初始化table不添加行数据，设置table样式，及设置列为combo。在设置行项目就没有样式及combo

您好，您只要对应的在设置table的columnLayoutStyle时，为style设置对应的cellType属性即可：

1. // 设置样式
   
2. for (let i = 0; i < 6; i++) {
   
3.   var tempStyle = sheet.getActualStyle(0, 0);
   
4.   if (i == 4) {
   
5.     tempStyle.cellType = new GC.Spread.Sheets.CellTypes.ComboBox();// 注意这里cellType属性
   
6.   }
   
7.   table.columnLayoutStyle(i, {
   
8.     data: tempStyle,
   
9.   });
   
10. }

复制代码

您好，我按照您的描述进行了测试，但是并没有复现您所描述的问题，能否提供一份可供我们复现的demo，方便我们更加精准的去确定问题所在，附件是我测试使用的demo，您也可以下载到本地进行测试

sheet.tables.add('table1', 0, 0, 1,1);

table.columnLayoutStyle设置第一列自定义样式
在添加数据源，就没有自定义的样式。

心素如简 发表于 2024-5-9 17:41
sheet.tables.add('table1', 0, 0, 1,1);

table.columnLayoutStyle设置第一列自定义样式

您可以检查一下是否将autoGenerateColumns设置为false
table.autoGenerateColumns(false);// 设置了这个后应该就不会出现样式不生效的问题了

Richard.Huang 发表于 2024-5-10 14:04
您可以检查一下是否将autoGenerateColumns设置为false
table.autoGenerateColumns(false);// 设置了这个 ...

const spread = new GC.Spread.Sheets.Workbook($("#ss")[0], { sheetCount : 1 });
        console.log(spread.toJSON());
        var sheet = spread.getActiveSheet();
        // 获取样式
        const cellStyle = sheet.getActualStyle(0, 5)
        console.log(cellStyle);
        sheet.setStyle(0,0,{...cellStyle,backColor:'red'});
        var spreadNS = GC.Spread.Sheets;
        var data = {
            name: 'Jones', region: 'East',
            sales: [
                {orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99, isDelivered: true},
                {orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99, isDelivered: false},
                {orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99, isDelivered: false}
            ]
        };
        var convert = function (item) {
            return item['cost'] + '$';
        }
        var table = sheet.tables.add('tableSales', 1, 0, 5, 5);
        for (let i = 0; i < 6; i++) {
            table.columnLayoutStyle(i, {
                data: sheet.getActualStyle(0, 0),
            });
        }
        // 自动生成列
        table.autoGenerateColumns(false);
        // 交替行样式
        table.bandRows(false);
        var tableColumn1 = new spreadNS.Tables.TableColumn(1, "orderDate", "Order Date", "yyyy-mm-dd");
        var tableColumn2 = new spreadNS.Tables.TableColumn(2, "item", "Item");
        var tableColumn3 = new spreadNS.Tables.TableColumn(3, "units", "Units");
        var tableColumn4 = new spreadNS.Tables.TableColumn(4, "cost", "Cost", null, null, convert);
        var tableColumn5 = new spreadNS.Tables.TableColumn(5, "isDelivered", "Delivered", null, new spreadNS.CellTypes.ComboBox());
        table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);
这个样式是没有复制上。

您好，您需要先设置绑定路径后设置对应的表格样式信息，最后才绑定数据，这样就不会有问题，我对您的代码进行了修改，您尝试一下：

1. console.log(spread.toJSON());
   
2. var sheet = spread.getActiveSheet();
   
3. // 获取样式
   
4. const cellStyle = sheet.getActualStyle(0, 5);
   
5. console.log(cellStyle);
   
6. sheet.setStyle(0, 0, { ...cellStyle, backColor: "red" });
   
7. var spreadNS = GC.Spread.Sheets;
   
8. var data = {
   
9.   name: "Jones",
   
10.   region: "East",
    
11.   sales: [
    
12.     {
    
13.       orderDate: "1/6/2013",
    
14.       item: "Pencil",
    
15.       units: 95,
    
16.       cost: 1.99,
    
17.       isDelivered: true,
    
18.     },
    
19.     {
    
20.       orderDate: "4/1/2013",
    
21.       item: "Binder",
    
22.       units: 60,
    
23.       cost: 4.99,
    
24.       isDelivered: false,
    
25.     },
    
26.     {
    
27.       orderDate: "6/8/2013",
    
28.       item: "Pen Set",
    
29.       units: 16,
    
30.       cost: 15.99,
    
31.       isDelivered: false,
    
32.     },
    
33.   ],
    
34. };
    
35. var convert = function (item) {
    
36.   return item["cost"] + "$";
    
37. };
    
38. var table = sheet.tables.add("tableSales", 1, 0, 5, 5);
    
39. var tableColumn1 = new spreadNS.Tables.TableColumn(
    
40.   1,
    
41.   "orderDate",
    
42.   "Order Date",
    
43.   "yyyy-mm-dd"
    
44. );
    
45. var tableColumn2 = new spreadNS.Tables.TableColumn(2, "item", "Item");
    
46. var tableColumn3 = new spreadNS.Tables.TableColumn(3, "units", "Units");
    
47. var tableColumn4 = new spreadNS.Tables.TableColumn(
    
48.   4,
    
49.   "cost",
    
50.   "Cost",
    
51.   null,
    
52.   null,
    
53.   convert
    
54. );
    
55. var tableColumn5 = new spreadNS.Tables.TableColumn(
    
56.   5,
    
57.   "isDelivered",
    
58.   "Delivered",
    
59.   null,
    
60.   new spreadNS.CellTypes.ComboBox()
    
61. );
    
62. table.bind(
    
63.   [tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5],
    
64.   "sales"
    
65. );
    
66. // 设置样式
    
67. for (let i = 0; i < 6; i++) {
    
68.   table.columnLayoutStyle(i, {
    
69.     data: sheet.getActualStyle(0, 0),
    
70.   });
    
71. }
    
72. table.autoGenerateColumns(false);
    
73. table.bandRows(false);
    
74. // 绑定数据
    
75. sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({sales:data.sales}))

复制代码

Richard.Huang 发表于 2024-5-14 17:25
您好，您需要先设置绑定路径后设置对应的表格样式信息，最后才绑定数据，这样就不会有问题，我对您的代码进 ...

这样的话先设置的ComboBox列就没有了。

心素如简 发表于 2024-5-15 16:16
这样的话先设置的ComboBox列就没有了。

了解了，确实会有这样一个问题，至于该现象的原因我们还需要进行进一步的调研定位。后续有相关调研进展我会第一时间在本贴中进行跟进。

Richard.Huang 发表于 2024-5-16 13:53
您好，您只要对应的在设置table的columnLayoutStyle时，为style设置对应的cellType属性即可：

这样的话就会出现一个问题，就是新增一行数据也是没有ComboBox的。