罫線
SPREAD設定可能な罫線のスタイルは9種類です。
セルの罫線は線種、線の幅、色を任意に設定可能です。また、表示する罫線の位置(上下左右)も任意に指定できます。
※SPREADの初期状態では罫線ではなく、グリッド線が表示されています。
罫線の設定をすると、グリッド線よりも罫線が優先されます。
このサンプルでは意図的に初期処理でグリッド線を非表示にしています。
ドロップダウンリストから罫線のスタイル、幅、色を指定することができます。
罫線スタイル |
|
|
罫線サイズ |
|
罫線の色 |
|
| 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 |
|
ソースコード
別ウィンドウで表示
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> </td>
<td>罫線サイズ</td>
<td>
<asp:DropDownList ID="DDLsize" runat="server" onchange="SetBorderSize(this[this.selectedIndex].value);">
<asp:ListItem value="1">1</asp:ListItem>
<asp:ListItem value="2">2</asp:ListItem>
<asp:ListItem value="3">3</asp:ListItem>
<asp:ListItem value="4">4</asp:ListItem>
<asp:ListItem value="5">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>
|