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

選択セルの外観を確認することができます。セルの背景色、アクティブセルの周囲に罫線を設定、罫線の色、罫線のスタイルを変更することができます。選択されたセルの背景色を選択色で塗りつぶすだけではなく、選択されたセルの背景色と選択色を合成させる、または選択色を表示しないことも可能です。

アクティブセルを罫線で囲む（ShowFocusRectangle = true）設定をした場合、アクティブセルの背景色は変更されず、アクティブセル以外の選択範囲の背景色が変更されます。

アクティブセルを罫線で囲む

	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
11	1011	稲並　勝五郎	ｲﾅﾐｼｮｳｺﾞﾛｳ	1962/02/18	男	A	営業部	1984/04/01	shougorou_inami@bbb.or.jp
12	1012	穎原　紀代一	ｴｲﾊﾗｷﾖｶｽﾞ	1965/02/13	男	O	営業部	1987/04/01	kiyokazu_eihara@bbb.or.jp

ソースコード

C#
VB
ASPX

別ウィンドウで表示

using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Configuration;

public partial class selectionstyle : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        string js = "var spid='" + FpSpread1.ClientID + "';";
        ClientScript.RegisterStartupScript(this.GetType(), "onStartUpScript", js, true);

        if (IsPostBack) return;

        // データ連結
        DataSet ds = new DataSet();
        ds.ReadXml(MapPath("../App_Data/data.xml"));
        FpSpread1.DataSource = ds;
        
        FarPoint.Web.Spread.SheetView sheet = FpSpread1.Sheets[0];
        
        // SPREAD初期化
        InitSpread(sheet);
    }

    private void InitSpread(FarPoint.Web.Spread.SheetView sheet)
    {
        int i;
        Random r = new Random(DateTime.Now.Hour * DateTime.Now.Minute * DateTime.Now.Second + DateTime.Now.Millisecond);

        // SPREAD設定
        FpSpread1.CommandBar.Visible = false;
        FpSpread1.CssClass = "spreadStyle";
        FpSpread1.UseClipboard = false;

        // フォントサイズの設定
        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.PageSize = sheet.RowCount;

        // 列幅の設定
        sheet.Columns[0].Width = 36;
        sheet.Columns[1].Width = 88;
        sheet.Columns[2].Width = 91;
        sheet.Columns[3].Width = 80;
        sheet.Columns[4].Width = 36;
        sheet.Columns[5].Width = 46;
        sheet.Columns[6].Width = 49;
        sheet.Columns[7].Width = 80;
        sheet.Columns[8].Width = 181;

        // 背景色の設定
        for (i = 0; i < FpSpread1.ActiveSheetView.RowCount; i++)
        {
            FpSpread1.ActiveSheetView.Cells[i, 3].BackColor = System.Drawing.Color.FromArgb(r.Next(0, 255), r.Next(0, 255), r.Next(0, 255));
        }

        // 縦方向の揃え位置を中央に設定
        sheet.DefaultStyle.VerticalAlign = VerticalAlign.Middle;
    }
   
    protected void FpSpread1_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
    {
        if (e.CommandName.StartsWith("SetSelectionBackColor"))
        {
            string[] strCom = e.CommandName.Split('.');

            System.Drawing.Color bc = System.Drawing.ColorTranslator.FromHtml(strCom[1]);
            FpSpread1.ActiveSheetView.SelectionBackColor = bc;
        }
        else if (e.CommandName.StartsWith("SetSBackColorStyle"))
        {
            string[] strCom = e.CommandName.Split('.');

            if (strCom[1] == "None")
            {
                FpSpread1.ActiveSheetView.SelectionBackColorStyle = FarPoint.Web.Spread.SelectionBackColorStyles.None;
            }
            else if (strCom[1] == "SelectionBackColor")
            {
                FpSpread1.ActiveSheetView.SelectionBackColorStyle = FarPoint.Web.Spread.SelectionBackColorStyles.SelectionBackColor;
            }
            else if (strCom[1] == "SemiTransparentSelectionBackColor")
            {
                FpSpread1.ActiveSheetView.SelectionBackColorStyle = FarPoint.Web.Spread.SelectionBackColorStyles.SemiTransparentSelectionBackColor;
            }
        }
        else if (e.CommandName.StartsWith("ShowFocusRectangle"))
        {
            string[] strCom = e.CommandName.Split('.');

            FpSpread1.ShowFocusRectangle = Convert.ToBoolean(strCom[1]);
        }
        else if (e.CommandName.StartsWith("SetBorderColor"))
        {
            string[] strCom = e.CommandName.Split('.');

            System.Drawing.Color bc = System.Drawing.ColorTranslator.FromHtml(strCom[1]);
            FpSpread1.FocusRectangleBorderColor = bc;
        }
        else if (e.CommandName.StartsWith("SetBorderStyle"))
        {
            string[] strCom = e.CommandName.Split('.');

            if (strCom[1] == "Solid")
            {
                FpSpread1.FocusRectangleBorderStyle = FarPoint.Web.Spread.FocusBorderStyle.Solid;
            }
            else if (strCom[1] == "Dotted")
            {
                FpSpread1.FocusRectangleBorderStyle = FarPoint.Web.Spread.FocusBorderStyle.Dotted;
            }
            else if (strCom[1] == "Dashed")
            {
                FpSpread1.FocusRectangleBorderStyle = FarPoint.Web.Spread.FocusBorderStyle.Dashed;
            }
        }
    }
}


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

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim js As String = "var spid='" + FpSpread1.ClientID & "';"
        ClientScript.RegisterStartupScript(Me.GetType(), "onStartUpScript", js, True)

        If IsPostBack Then
            Return
        End If

        ' データ連結
        Dim ds As New System.Data.DataSet()
        ds.ReadXml(MapPath("../App_Data/data.xml"))
        FpSpread1.DataSource = ds

        ' SPREAD初期化
        InitSpread(FpSpread1.Sheets(0))
    End Sub

    Private Sub InitSpread(ByVal sheet As FarPoint.Web.Spread.SheetView)
        Dim i As Integer
        Dim r As New Random(DateTime.Now.Hour * DateTime.Now.Minute * DateTime.Now.Second + DateTime.Now.Millisecond)

        ' SPREAD設定
        FpSpread1.CommandBar.Visible = False
        FpSpread1.CssClass = "spreadStyle"
        FpSpread1.UseClipboard = False

        ' フォントサイズの設定
        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.PageSize = sheet.RowCount

        ' 列幅の設定
        sheet.Columns(0).Width = 36
        sheet.Columns(1).Width = 88
        sheet.Columns(2).Width = 91
        sheet.Columns(3).Width = 80
        sheet.Columns(4).Width = 36
        sheet.Columns(5).Width = 46
        sheet.Columns(6).Width = 49
        sheet.Columns(7).Width = 80
        sheet.Columns(8).Width = 181

        ' 背景色の設定
        For i = 0 To FpSpread1.ActiveSheetView.RowCount - 1
            FpSpread1.ActiveSheetView.Cells(i, 3).BackColor = System.Drawing.Color.FromArgb(r.Next(0, 255), r.Next(0, 255), r.Next(0, 255))
        Next

        ' 縦方向の揃え位置を中央に設定
        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("SetSelectionBackColor") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            Dim bc As System.Drawing.Color = System.Drawing.ColorTranslator.FromHtml(strCom(1))
            FpSpread1.ActiveSheetView.SelectionBackColor = bc
        ElseIf e.CommandName.StartsWith("SetSBackColorStyle") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            If strCom(1) = "None" Then
                FpSpread1.ActiveSheetView.SelectionBackColorStyle = FarPoint.Web.Spread.SelectionBackColorStyles.None
            ElseIf strCom(1) = "SelectionBackColor" Then
                FpSpread1.ActiveSheetView.SelectionBackColorStyle = FarPoint.Web.Spread.SelectionBackColorStyles.SelectionBackColor
            ElseIf strCom(1) = "SemiTransparentSelectionBackColor" Then
                FpSpread1.ActiveSheetView.SelectionBackColorStyle = FarPoint.Web.Spread.SelectionBackColorStyles.SemiTransparentSelectionBackColor
            End If
        ElseIf e.CommandName.StartsWith("ShowFocusRectangle") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            FpSpread1.ShowFocusRectangle = Convert.ToBoolean(strCom(1))
        ElseIf e.CommandName.StartsWith("SetBorderColor") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            Dim bc As System.Drawing.Color = System.Drawing.ColorTranslator.FromHtml(strCom(1))
            FpSpread1.FocusRectangleBorderColor = bc
        ElseIf e.CommandName.StartsWith("SetBorderStyle") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            If strCom(1) = "Solid" Then
                FpSpread1.FocusRectangleBorderStyle = FarPoint.Web.Spread.FocusBorderStyle.Solid
            ElseIf strCom(1) = "Dotted" Then
                FpSpread1.FocusRectangleBorderStyle = FarPoint.Web.Spread.FocusBorderStyle.Dotted
            ElseIf strCom(1) = "Dashed" Then
                FpSpread1.FocusRectangleBorderStyle = FarPoint.Web.Spread.FocusBorderStyle.Dashed
            End If
        End If
    End Sub
End Class

<%@ Page MasterPageFile="~/MasterPage.master" Language="c#" AutoEventWireup="true" 
         Inherits="selectionstyle" CodeFile="selectionstyle.aspx.cs" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        function SetSelectionBackColor(color) {
            var spread = document.getElementById(spid);
            spread.CallBack("SetSelectionBackColor." + color);
        }
        function SetSBackColorStyle(sbstyle) {
            var spread = document.getElementById(spid);
            spread.CallBack("SetSBackColorStyle." + sbstyle);
        }
        function ShowFocusRectangle(val) {
            var spread = document.getElementById(spid);
            spread.CallBack("ShowFocusRectangle." + val);
        }
        function SetBorderColor(bdcolor) {
            var spread = document.getElementById(spid);
            spread.CallBack("SetBorderColor." + bdcolor);
        }
        function SetBorderStyle(bstyle) {
            var spread = document.getElementById(spid);
            spread.CallBack("SetBorderStyle." + bstyle);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <select style="width: 85px" tabindex="-1" onchange="SetSelectionBackColor(this[this.selectedIndex].value);this.selectedIndex=0;">
	    <option value="">選択色</option>
	    <option style="color: #ffffff; background-color: black" value="#000000">Black</option>
	    <option style="background-color: #808080" value="#808080">Gray</option>
	    <option style="background-color: #A9A9A9" value="#A9A9A9">DarkGray</option>
	    <option style="background-color: #D3D3D3" value="#D3D3D3">LightGray</option>
	    <option style="background-color: #FFFFFF" value="#FFFFFF">White</option>
	    <option style="background-color: #7FFFD4" value="#7FFFD4">Aquamarine</option>
	    <option style="background-color: #0000FF" value="#0000FF">Blue</option>
	    <option style="color: #ffffff; background-color: #000080" value="#000080">Navy</option>
	    <option style="color: #ffffff; background-color: #800080" value="#800080">Purple</option>
	    <option style="background-color: #FF1493" value="#FF1493">DeepPink</option>
	    <option style="background-color: #EE82EE" value="#EE82EE">Violet</option>
	    <option style="background-color: #FFC0CB" value="#FFC0CB">Pink</option>
	    <option style="color: #ffffff; background-color: #006400" value="#006400">DarkGreen</option>
	    <option style="color: #ffffff; background-color: #008000" value="#008000">Green</option>
	    <option style="background-color: #9ACD32" value="#9ACD32">YellowGreen</option>
	    <option style="background-color: #FFFF00" value="#FFFF00">Yellow</option>
	    <option style="background-color: #FFA500" value="#FFA500">Orange</option>
	    <option style="background-color: #FF0000" value="#FF0000">Red</option>
	    <option style="background-color: #A52A2A" value="#A52A2A">Brown</option>
	    <option style="background-color: #DEB887" value="#DEB887">BurlyWood</option>
	    <option style="background-color: #F5F5DC" value="#F5F5DC">Beige</option>
    </select>
	<select style="width: 140px" tabindex="-1" onchange="SetSBackColorStyle(this[this.selectedIndex].value);">
		<option value="">選択色のスタイル</option>
		<option value="None">選択色を表示しない</option>
        <option value="SelectionBackColor">背景色を塗りつぶす</option>
        <option value="SemiTransparentSelectionBackColor">選択色を透過させる</option>
	</select>
    <br />
    <asp:CheckBox ID="chkRectangle" runat="server" 
            Text="アクティブセルを罫線で囲む" onclick="ShowFocusRectangle(this.checked);" />
    <select style="width: 100px" tabindex="-1" onchange="SetBorderColor(this[this.selectedIndex].value);this.selectedIndex=0;">
	    <option value="">選択枠の色</option>
	    <option style="color: #ffffff; background-color: black" value="#000000">Black</option>
	    <option style="background-color: #808080" value="#808080">Gray</option>
	    <option style="background-color: #A9A9A9" value="#A9A9A9">DarkGray</option>
	    <option style="background-color: #D3D3D3" value="#D3D3D3">LightGray</option>
	    <option style="background-color: #FFFFFF" value="#FFFFFF">White</option>
	    <option style="background-color: #7FFFD4" value="#7FFFD4">Aquamarine</option>
	    <option style="background-color: #0000FF" value="#0000FF">Blue</option>
	    <option style="color: #ffffff; background-color: #000080" value="#000080">Navy</option>
	    <option style="color: #ffffff; background-color: #800080" value="#800080">Purple</option>
	    <option style="background-color: #FF1493" value="#FF1493">DeepPink</option>
	    <option style="background-color: #EE82EE" value="#EE82EE">Violet</option>
	    <option style="background-color: #FFC0CB" value="#FFC0CB">Pink</option>
	    <option style="color: #ffffff; background-color: #006400" value="#006400">DarkGreen</option>
	    <option style="color: #ffffff; background-color: #008000" value="#008000">Green</option>
	    <option style="background-color: #9ACD32" value="#9ACD32">YellowGreen</option>
	    <option style="background-color: #FFFF00" value="#FFFF00">Yellow</option>
	    <option style="background-color: #FFA500" value="#FFA500">Orange</option>
	    <option style="background-color: #FF0000" value="#FF0000">Red</option>
	    <option style="background-color: #A52A2A" value="#A52A2A">Brown</option>
	    <option style="background-color: #DEB887" value="#DEB887">BurlyWood</option>
	    <option style="background-color: #F5F5DC" value="#F5F5DC">Beige</option>
    </select>
    <select style="width: 120px" tabindex="-1" onchange="SetBorderStyle(this[this.selectedIndex].value);this.selectedIndex=0;">
		<option value="">選択枠のスタイル</option>
		<option value="Solid">実線</option>
        <option value="Dotted">点線</option>
        <option value="Dashed">破線</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">
        </CommandBar>
        <Sheets>
            <FarPoint:SheetView SheetName="Sheet1">
            </FarPoint:SheetView>
        </Sheets>
    </FarPoint:FpSpread>
</asp:Content>

このページの先頭へ戻る