[{"id":"ff052704-1389-4029-bcdd-73c6cbe9f807","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8e72e33e-b4ab-4fb3-98fc-a0b148134aed","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"c90d5fdf-420f-4978-8bf5-c9a2bb4334b3","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"900e6cab-065d-4f1c-844d-efa3c074e270","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"760b37c7-c713-4b24-b9ba-4bfe7d8437a6","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"89c707ed-9841-4e53-96fb-940cc3214804","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"64e2f4a3-2303-4bfa-8a93-6c23ef01de58","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"aa71a884-c5bc-4842-8d6a-873dfd645167","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"2605431b-dc80-491d-886e-28981595d277","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"69e79655-e015-4f9a-a230-2a25c988c926","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a570c8e7-07a2-47da-965b-da44fd1fa5cf","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"86662220-9b9e-4940-9ced-d22642ea49a8","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"24769ecd-2b08-4a85-b318-4f533bbf8393","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a244ead7-a2c6-47a3-ac17-c5dbfa337362","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"04e73782-aa78-4dfe-a4f9-e72ed4c78a11","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4f41e22e-eb51-49e5-aeae-a42dd6bf352c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"790bc77a-9216-48fd-b8f9-fbc374ebb155","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"21c6131f-0f2d-41d1-9284-6ad9ee803c1f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"7ded3a22-15eb-49b8-a488-e83c2cd872eb","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"33638a1c-7196-42c1-a96d-38b2d9ba8ac4","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4a0842a3-20b1-40c3-8e00-cd5941ffdf53","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"6e6ac5b1-1501-4e28-89cc-525139488537","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b0576ca2-cb84-4390-9f95-9354ec20eda5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"55fd3bb8-18d4-4edb-9640-ca3a365b798f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"dacc7931-6785-4675-be31-80930403cf7b","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"63c577e6-6cf9-497e-94e1-2307f7d3f498","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1b88a165-2563-437e-99bb-ae30bd4b56db","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"adf3817f-7667-4a4c-8a5f-767b0b7e1e3e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"3a083583-1d5f-492b-b450-34b2b5c775b8","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5d37413b-3600-4da9-9700-feea54355f59","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a5a73576-16ea-4cbc-925c-ef547389eaa5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1126cfab-6210-4e28-bee0-02c113fb7a0c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"09a66339-64c0-415c-b142-0691587a8e4a","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"0baaf91d-84f6-404c-a487-735226b6d5b6","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5b7aeac5-c755-426a-95c7-1ae8e547179a","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"57c94653-8893-403b-a5b1-0d1e33a0bd0f","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]}]
产品首页 在线 Demo 产品文档 API 参考 技术社区
立即试用
(Showing Draft Content)

交替行样式

问题：如何用条件规则实现交替行样式效果

背景：

表格中默认存在交替行样式显示，需求在非表格（table）区域也希望实现此效果。

解决方案：

一行一行添加添加是一种解决方案，另外我们可以通过添加公式条件规则实现这个需求。

image

想要实现这种效果则需要两个公式。一个是ISODD，一个是ROW。ISODD用于判断数字是否是奇数，ROW用于返回引用的行号。具体代码如下：

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
var ranges = [new GC.Spread.Sheets.Range(0, 0, 10, 5)];
sheet.conditionalFormats.addFormulaRule("=ISODD(ROW(A1))", style, ranges);

下面是实现效果，供参考：

image


问题：如何在SpreadJS中实现过滤后始终显示交替行样式

背景：

在Gird或者Sheet表格中如果需要展示大量的行数据时，往往需要拖动垂直滚动条。

如果每条行数据本身又比较类似，每行的背景色相同，使用人员很容易找不到数据对应的具体是哪一行。

交替行样式在这个时候可以让表格变的更加易读，因此很多Gird或者Sheet类的表格控件大都支持交替行样式设置。

在SpreadJS中如何实现呢交替行效果呢？

解决方案：

Table 表格本身提供了交替行样式，通过设置 table.bandRows(true);即可给 Table 设置交替行样式，且在过滤后样式仍然可以保持。

有时候，我们需要在非表格区域也实现交替行样式，可以通过上面介绍的添加公式条件规则实现这个需求，也可以采用一行一行添加的方式去设置。

下面代码是在初始化事件中给非表格区域设置交替行样式：

let sheet = spread.getSheet(0);
for(var r = 0;r < sheet.getRowCount();r++){

    if(sheet.getRowVisible(r)) {
        i++;
        if(i % 2 == 0)
            sheet.getRange(r, -1, 1, -1).backColor('#EEEEF8');
        else
            sheet.getRange(r, -1, 1, -1).backColor('white');
    }
}

设置后的效果如下：

image

但是如果我们添加了行过滤器，在过滤后此前设置的交替行样式可能就没法保持了。

093721pe2ve9h21zyfeetb


此时，可以通过RangeFiltered事件，在每次筛选后重新设置样式，即可保持交替行样式。

参考代码如下：

sheet.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
  let i = 0;
  for (r = 0; r < sheet.getRowCount(); r++) {
    console.log(sheet.getRowVisible(r));
    if (sheet.getRowVisible(r)) {
      i++;
      if (i % 2 == 0) sheet.getRange(r, -1, 1, -1).backColor("lightseagreen");
      else sheet.getRange(r, -1, 1, -1).backColor("white");
    }
  }
});

设置后的效果：

093924nvn4knxvlv6skpkv

值得注意的是，交替行样式实质上是直接设置的单元格背景色，因此如果是载入了带单元格样式的workbook，再设置上述代码，会覆盖原有的单元格背景色。

作者: Grapecity.China | 审核：Clark.Pan | 更新时间：2023.09.26