ナビゲーション リンクのスキップ
 新機能 の展開 新機能
 InputMan連携 の展開 InputMan連携
 マルチタッチ機能 の展開 マルチタッチ機能
 セル、行、列、ヘッダ の展開 セル、行、列、ヘッダ
 シート の展開 シート
 スタイル の縮小 スタイル
 選択 の展開 選択
 セル型 の展開 セル型
 編集 の展開 編集
 ソート の展開 ソート
 フィルタリング の展開 フィルタリング
 グループ化 の展開 グループ化
 ページング の展開 ページング
 スクロール の展開 スクロール
 データ連結 の展開 データ連結
 階層表示 の展開 階層表示
 コマンドバー の展開 コマンドバー
 チャート の展開 チャート
 数式 の展開 数式
 インポート/エクスポート の展開 インポート/エクスポート
 クライアント側スクリプト の展開 クライアント側スクリプト

罫線

SPREAD設定可能な罫線のスタイルは9種類です。 セルの罫線は線種、線の幅、色を任意に設定可能です。また、表示する罫線の位置(上下左右)も任意に指定できます。

※SPREADの初期状態では罫線ではなく、グリッド線が表示されています。 罫線の設定をすると、グリッド線よりも罫線が優先されます。

このサンプルでは意図的に初期処理でグリッド線を非表示にしています。 ドロップダウンリストから罫線のスタイル、幅、色を指定することができます。
罫線スタイル   罫線サイズ 罫線の色
 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
111011稲並 勝五郎イナミ ショウゴロウ1962/02/18A営業部1984/04/01shougorou_inami@bbb.or.jp
121012穎原 紀代一エイハラ キヨカズ1965/02/13O営業部1987/04/01kiyokazu_eihara@bbb.or.jp

ソースコード

別ウィンドウで表示
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Configuration;

public partial class border : 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;

        // スタイル設定
        InitSpreadStyles(FpSpread1.Sheets[0]);

        // SPREAD初期化
        InitSpread(FpSpread1.Sheets[0]);

        // クライアント側スクリプトの設定
        string clientScript = "<script language=\"JavaScript\">";
        clientScript += "function SetBorderStyle(bstyle)";
        clientScript += "{";
        clientScript += "var spread = document.getElementById(\"" + FpSpread1.ClientID + "\");";
        clientScript += "spread.CallBack(\"SetBorderStyle.\"+bstyle);";
        clientScript += "}";
        clientScript += "function SetBorderSize(bsize)";
        clientScript += "{";
        clientScript += "var spread = document.getElementById(\"" + FpSpread1.ClientID + "\");";
        clientScript += "spread.CallBack(\"SetBorderSize.\"+bsize);";
        clientScript += "}";
        clientScript += "function SetBorderColor(bcolor)";
        clientScript += "{";
        clientScript += "var spread = document.getElementById(\"" + FpSpread1.ClientID + "\");";
        clientScript += "spread.CallBack(\"SetBorderColor.\"+bcolor);";
        clientScript += "}";
        clientScript += "</script>";

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

    private void InitSpreadStyles(FarPoint.Web.Spread.SheetView sheet)
    {
        // 罫線の設定
        sheet.DefaultStyle.Border.BorderStyle = BorderStyle.None;
        sheet.DefaultStyle.Border.BorderColor = System.Drawing.Color.Black;
        sheet.DefaultStyle.Border.BorderSize = 1;
    }

    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.GridLines = GridLines.None;

        // 列幅の設定
        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("SetBorderStyle"))
        {
            string[] strCom = e.CommandName.Split('.');

            switch (strCom[1])
            {
                case "None":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.None;
                    break;
                case "Dotted":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Dotted;
                    break;
                case "Dashed":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Dashed;
                    break;
                case "Solid":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Solid;
                    break;
                case "Double":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Double;
                    break;
                case "Groove":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Groove;
                    break;
                case "Ridge":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Ridge;
                    break;
                case "Inset":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Inset;
                    break;
                case "Outset":
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Outset;
                    break;
            }
        }
        else if (e.CommandName.StartsWith("SetBorderSize"))
        {
            string[] strCom = e.CommandName.Split('.');

            FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderSize = Convert.ToInt16(strCom[1]);
        }
        else if (e.CommandName.StartsWith("SetBorderColor"))
        {
            string[] strCom = e.CommandName.Split('.');

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

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

        ' スタイル設定
        InitSpreadStyles(FpSpread1.Sheets(0))

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

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

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

    Private Sub InitSpreadStyles(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' 罫線の設定
        sheet.DefaultStyle.Border.BorderStyle = BorderStyle.None
        sheet.DefaultStyle.Border.BorderColor = System.Drawing.Color.Black
        sheet.DefaultStyle.Border.BorderSize = 1
    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.GridLines = GridLines.None

        ' 列幅の設定
        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 DDLbd_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        ' クライアント側の変更を確定
        FpSpread1.SaveChanges()

        Dim bdswk As New BorderStyle()
        Select Case DDLbd.SelectedValue
            Case "None"
                bdswk = BorderStyle.None
                Exit Select
            Case "Dotted"
                bdswk = BorderStyle.Dotted
                Exit Select
            Case "Dashed"
                bdswk = BorderStyle.Dashed
                Exit Select
            Case "Solid"
                bdswk = BorderStyle.Solid
                Exit Select
            Case "Double"
                bdswk = BorderStyle.Double
                Exit Select
            Case "Groove"
                bdswk = BorderStyle.Groove
                Exit Select
            Case "Ridge"
                bdswk = BorderStyle.Ridge
                Exit Select
            Case "Inset"
                bdswk = BorderStyle.Inset
                Exit Select
            Case "Outset"
                bdswk = BorderStyle.Outset
                Exit Select
        End Select
        FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = bdswk
    End Sub

    Protected Sub FpSpread1_ButtonCommand(ByVal sender As Object, ByVal e As FarPoint.Web.Spread.SpreadCommandEventArgs) Handles FpSpread1.ButtonCommand
        If e.CommandName.StartsWith("SetBorderStyle") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            Select Case strCom(1)
                Case "None"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.None
                    Exit Select
                Case "Dotted"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Dotted
                    Exit Select
                Case "Dashed"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Dashed
                    Exit Select
                Case "Solid"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Solid
                    Exit Select
                Case "Double"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Double
                    Exit Select
                Case "Groove"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Groove
                    Exit Select
                Case "Ridge"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Ridge
                    Exit Select
                Case "Inset"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Inset
                    Exit Select
                Case "Outset"
                    FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderStyle = BorderStyle.Outset
                    Exit Select
            End Select
        ElseIf e.CommandName.StartsWith("SetBorderSize") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderSize = Convert.ToInt16(strCom(1))
        ElseIf e.CommandName.StartsWith("SetBorderColor") Then
            Dim strCom As String() = e.CommandName.Split("."c)

            Dim bc As System.Drawing.Color = System.Drawing.Color.FromName(strCom(1))
            FpSpread1.ActiveSheetView.DefaultStyle.Border.BorderColor = bc
        End If
    End Sub
End Class
<%@ Page MasterPageFile="~/MasterPage.master" Language="c#" AutoEventWireup="true" 
         Inherits="border" CodeFile="border.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="DDLbd" runat="server" onchange="SetBorderStyle(this[this.selectedIndex].value);">
                <asp:ListItem value="None">罫線なし</asp:ListItem>
                <asp:ListItem value="Dotted">点線</asp:ListItem>
                <asp:ListItem value="Dashed">破線</asp:ListItem>
                <asp:ListItem value="Solid">実線</asp:ListItem>
                <asp:ListItem value="Double">ニ重線</asp:ListItem>
                <asp:ListItem value="Groove">くぼみ</asp:ListItem>
                <asp:ListItem value="Ridge">浮き出し</asp:ListItem>
                <asp:ListItem value="Inset">くぼみ表示</asp:ListItem>
                <asp:ListItem value="Outset">アウトセット</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>&nbsp;</td>
        <td>罫線サイズ</td>
        <td>
            <asp:DropDownList ID="DDLsize" runat="server" onchange="SetBorderSize(this[this.selectedIndex].value);">
                <asp:ListItem value="1"></asp:ListItem>
                <asp:ListItem value="2"></asp:ListItem>
                <asp:ListItem value="3"></asp:ListItem>
                <asp:ListItem value="4"></asp:ListItem>
                <asp:ListItem value="5"></asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>罫線の色</td>
        <td>
            <asp:DropDownList ID="DDLbc" runat="server" onchange="SetBorderColor(this[this.selectedIndex].value);">
		        <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>