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

シートには、行または列（またはその両方）を区別するためのグリッド線を表示できます。グリッド線の表示を設定するには、シートの GridLinesプロパティを使用します。このプロパティは、System.Web.UI.WebControls名前空間のGridLines列挙体の設定を使用します。また、GridLineColorにより、グリッド線の色を設定することが可能です。
※グリッド線はシート全体に対する設定となります。特定の行や列、セルに対しては罫線を設定します。

このサンプルでドロップダウンリストからグリッド線のスタイルと色を設定することができます。

グリッド線の表示

グリッド線の色

	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 gridline : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        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);

        // クライアント側スクリプトの設定
        string clientScript = "<script language=\"JavaScript\">";
        clientScript += "function GridLineType(val)";
        clientScript += "{";
        clientScript += "var spread = document.getElementById(\"" + FpSpread1.ClientID + "\");";
        clientScript += "spread.CallBack(\"GridLineType.\"+val);";
        clientScript += "}";
        clientScript += "function GridLineColor(color)";
        clientScript += "{";
        clientScript += "var spread = document.getElementById(\"" + FpSpread1.ClientID + "\");";
        clientScript += "spread.CallBack(\"GridLineColor.\"+color);";
        clientScript += "}";
        clientScript += "</script>";

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

    private void InitSpread(FarPoint.Web.Spread.SheetView sheet)
    {
        // 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;

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

    protected void FpSpread1_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
    {
        if (e.CommandName.StartsWith("GridLineType"))
        {
            string[] strCom = e.CommandName.Split('.');

            switch (strCom[1])
            {
                case "None":
                    FpSpread1.ActiveSheetView.GridLines = GridLines.None;
                    break;
                case "Both":
                    FpSpread1.ActiveSheetView.GridLines = GridLines.Both;
                    break;
                case "Horizontal":
                    FpSpread1.ActiveSheetView.GridLines = GridLines.Horizontal;
                    break;
                case "Vertical":
                    FpSpread1.ActiveSheetView.GridLines = GridLines.Vertical;
                    break;
            }
        }
        else if (e.CommandName.StartsWith("GridLineColor"))
        {
            string[] strCom = e.CommandName.Split('.');

            System.Drawing.Color bc = System.Drawing.Color.FromName(strCom[1]);
            FpSpread1.ActiveSheetView.GridLineColor = bc;
        }
    }
}


Partial Public Class gridline
    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

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

        Dim sheet As FarPoint.Web.Spread.SheetView = FpSpread1.Sheets(0)

        ' SPREAD初期化
        InitSpread(sheet)

        ' クライアント側スクリプトの設定
        Dim clientScript As String = "<script language=""JavaScript"">"
        clientScript += "function GridLineType(val)"
        clientScript += "{"
        clientScript += "var spread = document.getElementById(""" + FpSpread1.ClientID & """);"
        clientScript += "spread.CallBack(""GridLineType.""+val);"
        clientScript += "}"
        clientScript += "function GridLineColor(color)"
        clientScript += "{"
        clientScript += "var spread = document.getElementById(""" + FpSpread1.ClientID & """);"
        clientScript += "spread.CallBack(""GridLineColor.""+color);"
        clientScript += "}"
        clientScript += "</script>"

        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "gridlineScript", clientScript, False)
    End Sub

    Private Sub InitSpread(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' 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

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

            Select Case strCom(1)
                Case "None"
                    FpSpread1.ActiveSheetView.GridLines = GridLines.None
                    Exit Select
                Case "Both"
                    FpSpread1.ActiveSheetView.GridLines = GridLines.Both
                    Exit Select
                Case "Horizontal"
                    FpSpread1.ActiveSheetView.GridLines = GridLines.Horizontal
                    Exit Select
                Case "Vertical"
                    FpSpread1.ActiveSheetView.GridLines = GridLines.Vertical
                    Exit Select
            End Select
        ElseIf e.CommandName.StartsWith("GridLineColor") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            Dim bc As System.Drawing.Color = System.Drawing.Color.FromName(strCom(1))
            FpSpread1.ActiveSheetView.GridLineColor = bc
        End If
    End Sub
End Class

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

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

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table>
        <tr>
        <td>グリッド線の表示</td>
        <td>
            <asp:DropDownList ID="DDLgd" runat="server" onchange="GridLineType(this[this.selectedIndex].value);">
                <asp:ListItem value="Both">水平・垂直方向両方を表示</asp:ListItem>
                <asp:ListItem value="Horizontal">水平方向のみ表示</asp:ListItem>
                <asp:ListItem value="Vertical">垂直方向のみ表示</asp:ListItem>
                <asp:ListItem value="None">グリッド線を非表示</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>&nbsp;</td>
        <td>グリッド線の色</td>
        <td>
            <asp:DropDownList ID="DDLgc" runat="server" onchange="GridLineColor(this[this.selectedIndex].value);">
                <asp:ListItem value="" selected>初期値</asp:ListItem>
		        <asp:ListItem style="COLOR: #ffffff; BACKGROUND-COLOR: black" value="Black">Black</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: gray" value="Gray">Gray</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: darkgray" value="DarkGray">DarkGray</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: lightgrey" value="LightGray">LightGray</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: white" value="White">White</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: aquamarine" value="Aquamarine">Aquamarine</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: blue" value="Blue">Blue</asp:ListItem>
		        <asp:ListItem style="COLOR: #ffffff; BACKGROUND-COLOR: navy" value="Navy">Navy</asp:ListItem>
		        <asp:ListItem style="COLOR: #ffffff; BACKGROUND-COLOR: purple" value="Purple">Purple</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: deeppink" value="DeepPink">DeepPink</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: violet" value="Violet">Violet</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: pink" value="Pink">Pink</asp:ListItem>
		        <asp:ListItem style="COLOR: #ffffff; BACKGROUND-COLOR: darkgreen" value="DarkGreen">DarkGreen
		        </asp:ListItem>
		        <asp:ListItem style="COLOR: #ffffff; BACKGROUND-COLOR: green" value="Green">Green</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: yellowgreen" value="YellowGreen">YellowGreen</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: yellow" value="Yellow">Yellow</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: orange" value="Orange">Orange</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: red" value="Red">Red</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: brown" value="Brown">Brown</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: burlywood" value="BurlyWood">BurlyWood</asp:ListItem>
		        <asp:ListItem style="BACKGROUND-COLOR: beige" value="Beige">Beige</asp:ListItem>   
            </asp:DropDownList>
        </td>       
        </tr>
    </table>
    <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>

このページの先頭へ戻る