SPREAD for ASP.NETデモアプリケーション

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

このサンプルではドロップダウンリストの項目を変更することで奇数行および偶数行の背景色、文字色が変更されます。

奇数行　　偶数行

	ID	氏名	カナ	生年月日	性別	血液型	部署	入社日	メールアドレス
1	1001	亀甲　滋万	ｷｺｳｼｹﾞﾏ	1950/02/04	男	A	人事部	1972/04/01	sigema_kikou@abc.co.jp
2	1002	寒田　希世	ｶﾝﾀﾞｷﾖ	1959/06/28	女	B	人事部	1981/04/01	kiyo_kanda@bbb.or.jp
3	1003	小和瀬　澄	ｵﾜｾｷﾖ	1969/03/06	男	A	人事部	1991/04/01	kiyo_owase@aaa.co.jp
4	1004	宇夫　早余子	ｳﾌﾞｻﾖｺ	1976/07/28	女	O	人事部	1998/04/01	sayoko_ubu@bbb.or.jp
5	1005	宇田津　聖智	ｳﾀﾞﾂｷﾖﾄﾓ	1965/09/04	男	A	営業部	1987/04/01	kiyotomo_udatu@abc.co.jp
6	1006	茨城　昭児	ｲﾊﾞﾗｷｼｮｳｼﾞ	1963/04/28	男	O	営業部	1985/04/01	shouzi_ibaraki@xyz.ne.jp
7	1007	石ヶ休　椎茄	ｲｼｶﾞｷｭｳｼｲﾅ	1953/02/21	男	O	営業部	1975/04/01	siina_isigagyuu@abc.co.jp
8	1008	赤司　恵治郎	ｱｶﾂｶｻｹｲｼﾞﾛｳ	1968/08/02	男	O	経理部	1990/04/01	keizirou_akatukasa@abc.co.jp
9	1009	小橋　仰一	ｵﾊｼｷﾞｮｳｲﾁ	1972/03/02	男	B	経理部	1994/04/01	gyouiti_ohasi@abc.co.jp
10	1010	一重　公大	ｲﾁｼﾞｭｳｺｳﾀﾞｲ	1964/04/19	男	B	経理部	1986/04/01	koudai_itizyuu@xyz.ne.jp

ソースコード

C#
VB
ASPX

別ウィンドウで表示

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;

        // １行おきにスタイルを設定します
        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

        ' １行おきにスタイルを設定します
        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>

このページの先頭へ戻る