~徒然なる雑記帳~

みなずきめい.ねっと

ASP.net SPREAD プログラム

Spreadでのセルイベント

投稿日:

用意するもの
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>&nbsp;</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>&nbsp;</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>&nbsp;</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ファイル側でほぼ完結しているということですね。

にほんブログ村 IT技術ブログ プログラム・プログラマーへ
にほんブログ村

ランキング参加中
にほんブログ村
GMOブログセンター
CoRichブログランキング
ビジネスブログ100選

-ASP.net, SPREAD, プログラム
-, ,

Copyright© みなずきめい.ねっと , 2018 All Rights Reserved.