1行おきのスタイル

シートのAlternatingRowsオブジェクトにて1行おきの背景色や文字色などのスタイルを設定することができます。また、AlternatingRowsのCountプロパティにて3行おきのスタイル設定なども可能です。

このサンプルではドロップダウンリストの項目を変更することで奇数行および偶数行の背景色、文字色が変更されます。
奇数行    偶数行
 ID氏名カナ生年月日性別血液型部署入社日メールアドレス
11001亀甲 滋万キコウ シゲマ1950/02/04A人事部1972/04/01sigema_kikou@abc.co.jp
21002寒田 希世カンダ キヨ1959/06/28B人事部1981/04/01kiyo_kanda@bbb.or.jp
31003小和瀬 澄オワセ キヨ1969/03/06A人事部1991/04/01kiyo_owase@aaa.co.jp
41004宇夫 早余子ウブ サヨコ1976/07/28O人事部1998/04/01sayoko_ubu@bbb.or.jp
51005宇田津 聖智ウダツ キヨトモ1965/09/04A営業部1987/04/01kiyotomo_udatu@abc.co.jp
61006茨城 昭児イバラキ ショウジ1963/04/28O営業部1985/04/01shouzi_ibaraki@xyz.ne.jp
71007石ヶ休 椎茄イシガキュウ シイナ1953/02/21O営業部1975/04/01siina_isigagyuu@abc.co.jp
81008赤司 恵治郎アカツカサ ケイジロウ1968/08/02O経理部1990/04/01keizirou_akatukasa@abc.co.jp
91009小橋 仰一オハシ ギョウイチ1972/03/02B経理部1994/04/01gyouiti_ohasi@abc.co.jp
101010一重 公大イチジュウ コウダイ1964/04/19B経理部1986/04/01koudai_itizyuu@xyz.ne.jp
   

ソースコード

別ウィンドウで表示
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class rowcolcell_alternatingrow : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            return;
        }

        // SPREADの設定
        InitSpread(FpSpread1);

        // シート設定
        InitSpreadStyles(FpSpread1.Sheets[0]);
    }

    private void InitSpread(FarPoint.Web.Spread.FpSpread spread)
    {
        //データ連結
        System.Data.DataSet ds = new System.Data.DataSet();
        ds.ReadXml(MapPath("../App_Data/data.xml"));
        spread.DataSource = ds;

        spread.CssClass = "spreadStyle";
        spread.UseClipboard = false;

        string clientScript = "<script language=\"JavaScript\">";
        clientScript += "function SetForeColor(color)";
        clientScript += "{";
        clientScript += "var spread = document.getElementById(\"" + FpSpread1.ClientID + "\");";
        clientScript += "spread.CallBack(\"ForeColor.\"+color);";
        clientScript += "}";
        clientScript += "function SetBackColor(color)";
        clientScript += "{";
        clientScript += "var spread = document.getElementById(\"" + FpSpread1.ClientID + "\");";
        clientScript += "spread.CallBack(\"BackColor.\"+color);";
        clientScript += "}";
        clientScript += "</script>";

        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alternatingrowScript", clientScript, false);
    }

    private void InitSpreadStyles(FarPoint.Web.Spread.SheetView sheet)
    {
        // フォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%");
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%");

        // 列幅の設定
        sheet.Columns[8].Width = 200;

        // 1行おきにスタイルを設定します
        sheet.AlternatingRows.Count = 2;

        // 縦方向の揃え位置を中央に設定
        sheet.DefaultStyle.VerticalAlign = VerticalAlign.Middle;
    }

    protected void FpSpread1_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
    {
        if (e.CommandName.StartsWith("ForeColor"))
        {
            string[] strCom = e.CommandName.Split('_');
            int row = Convert.ToInt32(strCom[1]);

            // 文字色を変更
            int n = strCom[0].IndexOf(".") + 1;
            System.Drawing.Color fc = System.Drawing.Color.FromName(strCom[0].Substring(n));
            FpSpread1.Sheets[0].AlternatingRows[row].ForeColor = fc;
        }
        else if (e.CommandName.StartsWith("BackColor"))
        {
            string[] strCom = e.CommandName.Split('_');
            int row = Convert.ToInt32(strCom[1]);

            // 背景色を変更
            int n = strCom[0].IndexOf(".") + 1;
            System.Drawing.Color fc = System.Drawing.Color.FromName(strCom[0].Substring(n));
            FpSpread1.Sheets[0].AlternatingRows[row].BackColor = fc;
        }
    }
}

Partial Public Class rowcolcell_alternatingrow
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If IsPostBack Then
            Return
        End If

        ' SPREADの設定
        InitSpread(FpSpread1)

        ' シート設定
        InitSpreadStyles(FpSpread1.Sheets(0))
    End Sub

    Private Sub InitSpread(ByVal spread As FarPoint.Web.Spread.FpSpread)
        'データ連結
        Dim ds As New System.Data.DataSet()
        ds.ReadXml(MapPath("../App_Data/data.xml"))
        spread.DataSource = ds

        spread.CssClass = "spreadStyle"
        spread.UseClipboard = False

        Dim clientScript As String = "<script language=""JavaScript"">"
        clientScript += "function SetForeColor(color)"
        clientScript += "{"
        clientScript += "var spread = document.getElementById(""" + FpSpread1.ClientID & """);"
        clientScript += "spread.CallBack(""ForeColor.""+color);"
        clientScript += "}"
        clientScript += "function SetBackColor(color)"
        clientScript += "{"
        clientScript += "var spread = document.getElementById(""" + FpSpread1.ClientID & """);"
        clientScript += "spread.CallBack(""BackColor.""+color);"
        clientScript += "}"
        clientScript += "</script>"

        ScriptManager.RegisterClientScriptBlock(Me, Me.[GetType](), "alternatingrowScript", clientScript, False)
    End Sub

    Private Sub InitSpreadStyles(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' フォントサイズの設定
        sheet.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.ColumnHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.RowHeader.DefaultStyle.Font.Size = FontUnit.Parse("80%")
        sheet.SheetCorner.DefaultStyle.Font.Size = FontUnit.Parse("80%")

        ' 列幅の設定
        sheet.Columns(8).Width = 200

        ' 1行おきにスタイルを設定します
        sheet.AlternatingRows.Count = 2

        ' 縦方向の揃え位置を中央に設定
        sheet.DefaultStyle.VerticalAlign = VerticalAlign.Middle
    End Sub

    Protected Sub FpSpread1_ButtonCommand(ByVal sender As Object, ByVal e As FarPoint.Web.Spread.SpreadCommandEventArgs) Handles FpSpread1.ButtonCommand
        If e.CommandName.StartsWith("ForeColor") Then
            Dim strCom As String() = e.CommandName.Split("_"c)
            Dim row As Integer = Convert.ToInt32(strCom(1))

            ' 文字色を変更
            Dim n As Integer = strCom(0).IndexOf(".") + 1
            Dim fc As System.Drawing.Color = System.Drawing.Color.FromName(strCom(0).Substring(n))
            FpSpread1.Sheets(0).AlternatingRows(row).ForeColor = fc
        ElseIf e.CommandName.StartsWith("BackColor") Then
            Dim strCom As String() = e.CommandName.Split("_"c)
            Dim row As Integer = Convert.ToInt32(strCom(1))

            ' 背景色を変更
            Dim n As Integer = strCom(0).IndexOf(".") + 1
            Dim fc As System.Drawing.Color = System.Drawing.Color.FromName(strCom(0).Substring(n))
            FpSpread1.Sheets(0).AlternatingRows(row).BackColor = fc
        End If
    End Sub
End Class

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
         CodeFile="alternatingrow.aspx.cs" Inherits="rowcolcell_alternatingrow" %>

<%@ Register Assembly="FarPoint.Web.SpreadJ" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Label ID="Label1" runat="server" Text="奇数行"></asp:Label>
    <select style="WIDTH: 75px" tabIndex="-1" onchange="SetForeColor(this[this.selectedIndex].text + '_0');this.selectedIndex=0;">
        <option value="" selected>文字色</option>
        <option style="color: #ffffff; background-color: black" value="#000000">Black</option>
        <option style="background-color: gray" value="#808080">Gray</option>
        <option style="background-color: darkgray" value="#A9A9A9">DarkGray</option>
        <option style="background-color: lightgrey" value="#D3D3D3">LightGray</option>
        <option style="background-color: white" value="#FFFFFF">White</option>
        <option style="background-color: aquamarine" value="#7FFFD4">Aquamarine</option>
        <option style="background-color: blue" value="#0000FF">Blue</option>
        <option style="color: #ffffff; background-color: navy" value="#000080">Navy</option>
        <option style="color: #ffffff; background-color: purple" value="#800080">Purple</option>
        <option style="background-color: deeppink" value="#FF1493">DeepPink</option>
        <option style="background-color: violet" value="#EE82EE">Violet</option>
        <option style="background-color: pink" value="#FFC0CB">Pink</option>
        <option style="color: #ffffff; background-color: darkgreen" value="#006400">DarkGreen</option>
        <option style="color: #ffffff; background-color: green" value="#008000">Green</option>
        <option style="background-color: yellowgreen" value="#9ACD32">YellowGreen</option>
        <option style="background-color: yellow" value="#FFFF00">Yellow</option>
        <option style="background-color: orange" value="#FFA500">Orange</option>
        <option style="background-color: red" value="#FF0000">Red</option>
        <option style="background-color: brown" value="#A52A2A">Brown</option>
        <option style="background-color: burlywood" value="#DEB887">BurlyWood</option>
        <option style="background-color: beige" value="#F5F5DC">Beige</option>
    </select>
    <select style="WIDTH: 75px" tabIndex="-1" onchange="SetBackColor(this[this.selectedIndex].text + '_0');this.selectedIndex=0;">
        <option value="" selected>背景色</option>
        <option style="color: #ffffff; background-color: black" value="#000000">Black</option>
        <option style="background-color: gray" value="#808080">Gray</option>
        <option style="background-color: darkgray" value="#A9A9A9">DarkGray</option>
        <option style="background-color: lightgrey" value="#D3D3D3">LightGray</option>
        <option style="background-color: white" value="#FFFFFF">White</option>
        <option style="background-color: aquamarine" value="#7FFFD4">Aquamarine</option>
        <option style="background-color: blue" value="#0000FF">Blue</option>
        <option style="color: #ffffff; background-color: navy" value="#000080">Navy</option>
        <option style="color: #ffffff; background-color: purple" value="#800080">Purple</option>
        <option style="background-color: deeppink" value="#FF1493">DeepPink</option>
        <option style="background-color: violet" value="#EE82EE">Violet</option>
        <option style="background-color: pink" value="#FFC0CB">Pink</option>
        <option style="color: #ffffff; background-color: darkgreen" value="#006400">DarkGreen</option>
        <option style="color: #ffffff; background-color: green" value="#008000">Green</option>
        <option style="background-color: yellowgreen" value="#9ACD32">YellowGreen</option>
        <option style="background-color: yellow" value="#FFFF00">Yellow</option>
        <option style="background-color: orange" value="#FFA500">Orange</option>
        <option style="background-color: red" value="#FF0000">Red</option>
        <option style="background-color: brown" value="#A52A2A">Brown</option>
        <option style="background-color: burlywood" value="#DEB887">BurlyWood</option>
        <option style="background-color: beige" value="#F5F5DC">Beige</option>
    </select>
      
    <asp:Label ID="Label2" runat="server" Text="偶数行"></asp:Label>
    <select style="WIDTH: 75px" tabIndex="-1" onchange="SetForeColor(this[this.selectedIndex].text + '_1');this.selectedIndex=0;">
        <option value="" selected>文字色</option>
        <option style="color: #ffffff; background-color: black" value="#000000">Black</option>
        <option style="background-color: gray" value="#808080">Gray</option>
        <option style="background-color: darkgray" value="#A9A9A9">DarkGray</option>
        <option style="background-color: lightgrey" value="#D3D3D3">LightGray</option>
        <option style="background-color: white" value="#FFFFFF">White</option>
        <option style="background-color: aquamarine" value="#7FFFD4">Aquamarine</option>
        <option style="background-color: blue" value="#0000FF">Blue</option>
        <option style="color: #ffffff; background-color: navy" value="#000080">Navy</option>
        <option style="color: #ffffff; background-color: purple" value="#800080">Purple</option>
        <option style="background-color: deeppink" value="#FF1493">DeepPink</option>
        <option style="background-color: violet" value="#EE82EE">Violet</option>
        <option style="background-color: pink" value="#FFC0CB">Pink</option>
        <option style="color: #ffffff; background-color: darkgreen" value="#006400">DarkGreen</option>
        <option style="color: #ffffff; background-color: green" value="#008000">Green</option>
        <option style="background-color: yellowgreen" value="#9ACD32">YellowGreen</option>
        <option style="background-color: yellow" value="#FFFF00">Yellow</option>
        <option style="background-color: orange" value="#FFA500">Orange</option>
        <option style="background-color: red" value="#FF0000">Red</option>
        <option style="background-color: brown" value="#A52A2A">Brown</option>
        <option style="background-color: burlywood" value="#DEB887">BurlyWood</option>
        <option style="background-color: beige" value="#F5F5DC">Beige</option>
    </select>
    <select style="WIDTH: 75px" tabIndex="-1" onchange="SetBackColor(this[this.selectedIndex].text + '_1');this.selectedIndex=0;">
        <option value="" selected>背景色</option>
        <option style="color: #ffffff; background-color: black" value="#000000">Black</option>
        <option style="background-color: gray" value="#808080">Gray</option>
        <option style="background-color: darkgray" value="#A9A9A9">DarkGray</option>
        <option style="background-color: lightgrey" value="#D3D3D3">LightGray</option>
        <option style="background-color: white" value="#FFFFFF">White</option>
        <option style="background-color: aquamarine" value="#7FFFD4">Aquamarine</option>
        <option style="background-color: blue" value="#0000FF">Blue</option>
        <option style="color: #ffffff; background-color: navy" value="#000080">Navy</option>
        <option style="color: #ffffff; background-color: purple" value="#800080">Purple</option>
        <option style="background-color: deeppink" value="#FF1493">DeepPink</option>
        <option style="background-color: violet" value="#EE82EE">Violet</option>
        <option style="background-color: pink" value="#FFC0CB">Pink</option>
        <option style="color: #ffffff; background-color: darkgreen" value="#006400">DarkGreen</option>
        <option style="color: #ffffff; background-color: green" value="#008000">Green</option>
        <option style="background-color: yellowgreen" value="#9ACD32">YellowGreen</option>
        <option style="background-color: yellow" value="#FFFF00">Yellow</option>
        <option style="background-color: orange" value="#FFA500">Orange</option>
        <option style="background-color: red" value="#FF0000">Red</option>
        <option style="background-color: brown" value="#A52A2A">Brown</option>
        <option style="background-color: burlywood" value="#DEB887">BurlyWood</option>
        <option style="background-color: beige" value="#F5F5DC">Beige</option>
    </select>
    <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px" onbuttoncommand="FpSpread1_ButtonCommand">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark" />
        <Sheets>
            <FarPoint:SheetView SheetName="Sheet1">
            </FarPoint:SheetView>
        </Sheets>
    </FarPoint:FpSpread>
</asp:Content>