用意するもの
SPREAD for .NET 3.0J Web Forms Edition (評価版でOK)
http://www.grapecity.com/japan/support/database/dotnet_trialversions.htm
Visual Web Developer ※2008か2005のExpressでOK。サンプルは両Ver有。
http://www.microsoft.com/japan/msdn/vstudio/Express/
--------------------------------------------------------------------------------
Spreadでのセルイベント
Sample1のClientScript プロジェクト です。
デフォルト設定でインストールしたのならば
file:///C:/Program%20Files/SpreadNETWeb3/Samples/VB/ClientScript/ にあります。
Cの場合は
file:///C:/Program%20Files/SpreadNETWeb3/Samples/CS/ClientScriptCS/ となります。
中身はVBかCの違いでやっていることは同じです。
動かせば、同じ画面で同じ挙動をします。
まぁ、サンプルについてはサンプルヘルプを見れば説明がありますので、
一度は目に通しておきましょう。
サンプルヘルプ
file:///C:/Program%20Files/SpreadNETWeb3/Samples/Help/samplesmenu.html
さて、セルイベントのサンプルですが
Default.aspx.vb
[vb]
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack Then
Return
End If
'クライアントのScriptを有効化する
Me.FpSpread1.EnableClientScript = True
'【2008】Me.FpSpread1_Sheet1.EnableClientScript = True
'FpSpread1のフォントサイズを8ポイントに設定する
Me.FpSpread1.ActiveSheetView.DefaultStyle.Font.Size = System.Web.UI.WebControls.FontUnit.Point(8)
'【2008】Me.FpSpread1_Sheet1.DefaultStyle.Font.Size = System.Web.UI.WebControls.FontUnit.Point(8)
'FpSpread1の高さを200pxに設定する
Me.FpSpread1.Height = System.Web.UI.WebControls.Unit.Pixel(200)
'【2008】Me.FpSpread1_Sheet1.Height = System.Web.UI.WebControls.Unit.Pixel(200)
'FpSpread1の横幅を400pxに設定する
Me.FpSpread1.Width = System.Web.UI.WebControls.Unit.Pixel(400)
'【2008】Me.FpSpread1_Sheet1.Width = System.Web.UI.WebControls.Unit.Pixel(400)
'行数を設定する
Me.FpSpread1.ActiveSheetView.RowCount = 100
'【2008】Me.FpSpread1_Sheet1.Rows.Count = 100
'列数を設定する
Me.FpSpread1.ActiveSheetView.ColumnCount = 20
'【2008】Me.FpSpread1_Sheet1.Columns.Count = 20
'行数を制限する
Me.FpSpread1.ActiveSheetView.PageSize = 20
'【2008】Me.FpSpread1_Sheet1.PageSize = 20
'セル型自動設定を有効化
Me.FpSpread1.ActiveSheetView.DataAutoCellTypes = True
'【2008】Me.FpSpread1_Sheet1.DataAutoCellTypes = True
'DataSetの列から自動的に列を生成するように設定
Me.FpSpread1.ActiveSheetView.AutoGenerateColumns = True
'【2008】Me.FpSpread1_Sheet1.AutoGenerateColumns = True
'数式指定モードを指定する(A1形式とR1C1形式の2つがあります)
Me.FpSpread1.ActiveSheetView.ReferenceStyle = FarPoint.Web.Spread.Model.ReferenceStyle.R1C1
'【2008】Me.FpSpread1_Sheet1.ReferenceStyle = FarPoint.Win.Spread.Model.ReferenceStyle.R1C1
'表のスキンを適用する
Me.FpSpread1.ActiveSheetView.ActiveSkin = FarPoint.Web.Spread.DefaultSkins.Classic2
'【2008】Me.FpSpread1_Sheet1.ActiveSkin = FarPoint.Win.Spread.DefaultSkins.Classic2
'セルを連結する(開始行(0スタート),開始列(0スタート),列方向の連結数,行方向の連結数)
Me.FpSpread1.ActiveSheetView.AddSpanCell(0, 0, 1, 1)
'【2008】Me.FpSpread1_Sheet1.AddColumnHeaderSpanCell(0, 0, 1, 1)
'高さ変更の抑止
Me.FpSpread1.ActiveSheetView.RowHeader.Rows.Default.Resizable = True
'【2008】Me.FpSpread1_Sheet1.RowHeader.Rows.Default.Resizable = False
'幅変更の抑止
Me.FpSpread1.ActiveSheetView.ColumnHeader.Columns.Default.Resizable = True
'【2008】Me.FpSpread1_Sheet1.ColumnHeader.Columns.Default.Resizable = False
'1列目をチェックボックス化
Dim chkbx As New FarPoint.Web.Spread.CheckBoxCellType
FpSpread1.ActiveSheetView.Columns(0).CellType = chkbx
Dim i As Integer
'行のコンボボックスアイテムを作成
For i = 1 To FpSpread1.ActiveSheetView.PageSize
DropDownList1.Items.Add(New ListItem(i.ToString(), (i - 1).ToString()))
Next
'列のコンボボックスアイテムを作成
For i = 1 To FpSpread1.ActiveSheetView.ColumnCount
DropDownList2.Items.Add(New ListItem(i.ToString(), (i - 1).ToString()))
Next
End Sub
End Class[/vb]
サンプルそのままだと意外とシンプルすぎなので、コメントや他の要素も付け加えて見ました。
デフォルトを見たい場合はダウンロードしたSPREADに含まれるサンプルをみてくださいな。
注意しておくべき点として、SPREADでR1C1形式を使ったセル参照をする際の指定方法が混乱しやすいです。
SPREADでは「FpSheet.Cells(0,0)」のように行列の座標は0から始まります。
しかし、R1C1形式では1から始まるので1つずれます。
うっかり通常のセル指定と同じように、
0を開始位置として考えてセルを指定すると1行1列左上のセルを参照してしまいます。
具体的にはこの記事がわかりやすいかと思います。
【VB.NET】Spread for .NETのR1C1形式でのセル参照の注意点
まぁ、あんまり使う機会はないような気もしますが(自分だけかな？)
一方、ASPというかHTML側。
Default.aspx
[html]<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="FarPoint.Web.SpreadJ" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head id="Head1" runat="server">
<title>クライアントスクリプトの使用</title>
<script type="text/javascript">
window.onload=init;
function init()
{
var spread = document.getElementById("FpSpread1");
if(document.all)
{
spread.onCallBackStart = cstart;
spread.onActiveCellChanging = activecellChanging;
spread.onDataChanged = dataChanged;
}
else
{
spread.addEventListener("CallBackStart",cstart,false);
spread.addEventListener("ActiveCellChanging",activecellChanging,false);
spread.addEventListener("DataChanged",dataChanged,false);
}
}
function cstart(event)
{
if (event.command == "Next")
{
if (!confirm("次のページに移動しますか？"))
{
event.cancel = true;
}
}
else if (event.command == "Prev")
{
if (!confirm("前のページに移動しますか？"))
{
event.cancel = true;
}
}
}
function activecellChanging(event)
{
var lbl12 = document.getElementById("Label12");
var spread = document.getElementById("FpSpread1");
var row;
var col;
if(document.all)
{
row = spread.ActiveRow;
col = spread.ActiveCol;
}
else
{
row = spread.GetActiveRow();
col = spread.GetActiveCol();
}
lbl12.innerHTML = "セル移動：" + "Cell(" + row + "," + col + ")→" + "Cell(" + event.row + "," + event.col + ")";
}
function dataChanged(e)
{
var e = e || window.event;
var lbl13 = document.getElementById("Label13");
lbl13.innerHTML = "セルの値が" + e.cellValue + "に変更されました";
}
function setCheckBox()
{
var spread = document.getElementById("FpSpread1");
var roco = spread.GetRowCount();
spread.ScrollTo(0,0);
for (var i = 0;i < roco;i++)
{
spread.SetValue(i,0,"true",false);
}
}
function clearCheckBox()
{
var spread = document.getElementById("FpSpread1");
var roco = spread.GetRowCount();
spread.ScrollTo(0,0);
for (var i = 0;i < roco;i++)
{
spread.SetValue(i,0,"false",false);
}
}
function getRowColCount()
{
var spread = document.getElementById("FpSpread1");
var roco = spread.GetRowCount();
var coco = spread.GetColCount();
alert("行数：" + roco + ",列数：" + coco + ",全行数：" + spread.GetTotalRowCount());
}
function spScroll()
{
var row = document.getElementById("DropDownList1");
var col = document.getElementById("DropDownList2");
var spread = document.getElementById("FpSpread1");
spread.ScrollTo(row.value,col.value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="18px" Height="24px"
Style="position: static;" Text="クライアントスクリプトの使用"
></asp:Label><br />
<br />
<asp:Label ID="Label2" runat="server" Font-Size="14px" Style="position: static;" Text="このサンプルでは、クライアントスクリプトのいくつかの機能をご確認いただけます"></asp:Label><br />
<p><asp:Label ID="Label3" runat="server" Font-Size="14px" Style="position: static;" Text="(1)ドロップダウンリストで指定したセルをスクロールさせて表示します"></asp:Label>
<asp:Label ID="Label4" runat="server" Style="position: static; vertical-align: middle; text-align: center;" Text="行：" Height="16px" Font-Size="14px"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" Style="position: static;" Width="40px" Font-Size="14px">
</asp:DropDownList>
<asp:Label ID="Label5" runat="server" Style="position: static;" Text="列：" Font-Size="14px"></asp:Label>
<asp:DropDownList ID="DropDownList2" runat="server" Style="position: static;" Width="40px" Font-Size="14px">
</asp:DropDownList>
<input id="Button1" style="position: static; width: 80px; height: 24px;"
type="button" value="スクロール" onclick="spScroll();" /></p>
<p><asp:Label ID="Label6" runat="server" Font-Size="14px" Style="position: static;" Text="(2)1列目のチェックボックスを全てチェックします"></asp:Label>
<input id="Button2" style="position: static; width: 104px;"
type="button" value="チェック" onclick="setCheckBox();" /></p>
<p><asp:Label ID="Label7" runat="server" Font-Size="14px" Style="position: static;" Text="(3)1列目のチェックボックスを全てチェック解除します"></asp:Label>
<input id="Button3" style="position: static; width: 104px; height: 24px;"
type="button" value="チェック解除" onclick="clearCheckBox();" /></p>
<p><asp:Label ID="Label8" runat="server" Font-Size="14px" Style="position: static;" Text="(4)表示されている行数／列数、SPREADコントロール全体の行数を取得します"></asp:Label>
<input id="Button4" style="position: static; width: 104px;"
type="button" value="行数／列数" onclick="getRowColCount();" /></p>
<p><asp:Label ID="Label9" runat="server" Font-Size="14px" Height="16px" Style="position: static;" Text="(5)ページナビゲーションボタン押下で確認ウィンドウを表示します"></asp:Label> </p>
<p><asp:Label ID="Label10" runat="server" Font-Size="14px" Height="16px"
Style="position: static;" Text="(6)アクティブセルの移動をラベルに表示します"></asp:Label>
<asp:Label ID="Label12" runat="server" Height="16px" Style="position: static;" Width="280px" ForeColor="Blue" Font-Size="14px">ラベル</asp:Label> </p>
<p><asp:Label ID="Label11" runat="server" Font-Size="14px" Height="16px"
Style="position: static;" Text='(7)編集されたセルの値をラベルに表示します'></asp:Label>
<asp:Label ID="Label13" runat="server" ForeColor="Green" Height="16px" Style="position: static;" Width="280px" Font-Size="14px">ラベル</asp:Label> </p>
<FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="Black" BorderStyle="Solid"
BorderWidth="1px" Height="200" Style="position: static;" Width="400">
<CommandBar BackColor="Control" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
ButtonShadowColor="ControlDark" />
<Sheets>
<FarPoint:SheetView SheetName="Sheet1">
</FarPoint:SheetView>
</Sheets>
</FarPoint:FpSpread></div>
</form>
</body>
</html>
[/html]
ほとんどJavascriptがメインであって、ASPやSPREADの特殊な記述はありません。
表示に関してはvbファイル側でほぼ完結しているということですね。
ランキング参加中
にほんブログ村
GMOブログセンター
CoRichブログランキング
ビジネスブログ100選
 http://www.grapecity.com/japan/support/databa){kind=link}