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

キーマップ

クライアント側スクリプトで提供されるAddKeyMapメソッドを使用すると 次のセル／行、前のセル／行、最初の列、最後の列への移動などのアクションを発生させるキーボードのキーをマップできます。
また、指定した列にスクロールすることもできます。
[Tab]キー  ： 次の列に移動 次の行に移動
[Enter]キー： 次の列に移動 次の行に移動
 製品ID製品分類製品名前年比4月5月6月7月8月9月
110001乳製品酪農ミルク
5,5005,0004,5006,0005,5005,000
220001清涼飲料水いよかんドリンク
1,0003,0002,7002,7001,0003,000
320002清涼飲料水ぶどうジュース
3,0003,5004,8004,8003,0003,500
420003清涼飲料水マンゴードリンク
2,0001,0005001,0502,0001,000
530001ビール激辛ビール
5,5008,0008,50010,0005,5008,000
630002ビールモルトビール
3,0003,5002,7804,0003,0003,500
720004清涼飲料水ぶどうの街
500300200700500300
830003ビールオリエントの村
8,0009,5009,5809,0008,0009,500
940002焼酎吟醸 ほめごろし
6,0007,0009,0009,5006,0007,000
1040003焼酎大吟醸 オリエント
1,0005,0006,0005,0001,0005,000
1140005焼酎麦焼酎 ちこちこ
1,0001,5001,2001,2581,0001,500
1210002乳製品酪農ミルク（低脂肪）
501202380456501202
1330004ビールオリエントの里
963256365554868853
1430005ビールオリエントからの便り
5,4523,3662,5633,3365,5843,333
1530006ビールオリエントの森
103965365885757744
1630007ビールオリエントの町
3,6546,5453,2549,6561,2341,234
1730008ビールオリエントの未来都市
4,5674,4543,6545,9876,5366,633

ソースコード

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

public partial class clientaddkeymap : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string js = "var spid='" + FpSpread1.ClientID + "';";
        ClientScript.RegisterStartupScript(this.GetType(), "onStartUpScript", js, true);

        if (IsPostBack) return;

        // セル型の自動設定を無効化
        FpSpread1.ActiveSheetView.DataAutoCellTypes = false;

        // データ連結
        DataSet ds = new DataSet();
        ds.ReadXml(MapPath("../App_Data/datanum3.xml"));
        FpSpread1.DataSource = ds;

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

    private void InitSpread(FarPoint.Web.Spread.SheetView sheet)
    {
        int i;

        // SPREAD設定
        sheet.FpSpread.CommandBar.Visible = false;
        sheet.FpSpread.CssClass = "spreadStyle";
        sheet.FpSpread.ShowFocusRectangle = true;
        sheet.FpSpread.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 = 45;
        sheet.Columns[1].Width = 85;
        sheet.Columns[2].Width = 140;
        sheet.Columns[3].Width = 40;
        sheet.Columns[4].Width = 65;
        sheet.Columns[5].Width = 65;
        sheet.Columns[6].Width = 65;
        sheet.Columns[7].Width = 65;
        sheet.Columns[8].Width = 65;
        sheet.Columns[9].Width = 65;

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

        // 各列のセル型を設定
        FarPoint.Web.Spread.GeneralCellType gnr = new FarPoint.Web.Spread.GeneralCellType();
        gnr.FormatString = "#,##0";
        sheet.Columns[4, 9].CellType = gnr;
        sheet.Columns[4, 9].HorizontalAlign = HorizontalAlign.Right;
        sheet.Columns[3].HorizontalAlign = HorizontalAlign.Center;
        sheet.Columns[3].VerticalAlign = VerticalAlign.Middle;

        FarPoint.Web.Spread.ImageCellType icUp = new FarPoint.Web.Spread.ImageCellType();
        icUp.ImageUrl = "../images/uparrow.png";

        FarPoint.Web.Spread.ImageCellType icSmallUp = new FarPoint.Web.Spread.ImageCellType();
        icSmallUp.ImageUrl = "../images/smalluparrow.png";

        FarPoint.Web.Spread.ImageCellType icDown = new FarPoint.Web.Spread.ImageCellType();
        icDown.ImageUrl = "../images/downarrow.png";

        FarPoint.Web.Spread.ImageCellType icSmallDown = new FarPoint.Web.Spread.ImageCellType();
        icSmallDown.ImageUrl = "../images/smalldownarrow.png";

        for (i = 0; i < sheet.RowCount; i++)
        {
            if (sheet.Cells[i, 3].Value.ToString() == "◎")
            {
                sheet.Cells[i, 3].CellType = icUp;
            }
            else if (sheet.Cells[i, 3].Value.ToString() == "○")
            {
                sheet.Cells[i, 3].CellType = icSmallUp;
            }
            else if (sheet.Cells[i, 3].Value.ToString() == "△")
            {
                sheet.Cells[i, 3].CellType = icSmallDown;
            }
            else if (sheet.Cells[i, 3].Value.ToString() == "×")
            {
                sheet.Cells[i, 3].CellType = icDown;
            }

            sheet.Cells[i, 3].Value = "";
        }
    }   
}


Partial Public Class clientaddkeymap
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim js As String = "var spid='" + FpSpread1.ClientID & "';"
        ClientScript.RegisterStartupScript(Me.GetType(), "onStartUpScript", js, True)

        If IsPostBack Then
            Return
        End If

        ' セル型の自動設定を無効化
        FpSpread1.ActiveSheetView.DataAutoCellTypes = False

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

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

    Private Sub InitSpread(sheet As FarPoint.Web.Spread.SheetView)
        Dim i As Integer

        ' SPREAD設定
        sheet.FpSpread.CommandBar.Visible = False
        sheet.FpSpread.CssClass = "spreadStyle"
        sheet.FpSpread.ShowFocusRectangle = True
        sheet.FpSpread.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 = 45
        sheet.Columns(1).Width = 85
        sheet.Columns(2).Width = 140
        sheet.Columns(3).Width = 40
        sheet.Columns(4).Width = 65
        sheet.Columns(5).Width = 65
        sheet.Columns(6).Width = 65
        sheet.Columns(7).Width = 65
        sheet.Columns(8).Width = 65
        sheet.Columns(9).Width = 65

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

        ' 各列のセル型を設定
        Dim gnr As New FarPoint.Web.Spread.GeneralCellType()
        gnr.FormatString = "#,##0"
        sheet.Columns(4, 9).CellType = gnr
        sheet.Columns(4, 9).HorizontalAlign = HorizontalAlign.Right
        sheet.Columns(3).HorizontalAlign = HorizontalAlign.Center
        sheet.Columns(3).VerticalAlign = VerticalAlign.Middle

        Dim icUp As New FarPoint.Web.Spread.ImageCellType()
        icUp.ImageUrl = "../images/uparrow.png"

        Dim icSmallUp As New FarPoint.Web.Spread.ImageCellType()
        icSmallUp.ImageUrl = "../images/smalluparrow.png"

        Dim icDown As New FarPoint.Web.Spread.ImageCellType()
        icDown.ImageUrl = "../images/downarrow.png"

        Dim icSmallDown As New FarPoint.Web.Spread.ImageCellType()
        icSmallDown.ImageUrl = "../images/smalldownarrow.png"

        For i = 0 To sheet.RowCount - 1
            If sheet.Cells(i, 3).Value.ToString() = "◎" Then
                sheet.Cells(i, 3).CellType = icUp
            ElseIf sheet.Cells(i, 3).Value.ToString() = "○" Then
                sheet.Cells(i, 3).CellType = icSmallUp
            ElseIf sheet.Cells(i, 3).Value.ToString() = "△" Then
                sheet.Cells(i, 3).CellType = icSmallDown
            ElseIf sheet.Cells(i, 3).Value.ToString() = "×" Then
                sheet.Cells(i, 3).CellType = icDown
            End If

            sheet.Cells(i, 3).Value = ""
        Next
    End Sub
End Class

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

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

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        function setKeyMap(e) {
            var s = document.getElementById(spid);
            var e = e || window.event;
            var rd = e.target || e.srcElement;

            var kcode;
            if (rd.name == "tab")
                kcode = 9;
            if (rd.name == "enter")
                kcode = 13;

            if (!(rd.id.indexOf("col") < 0)) {
                s.AddKeyMap(kcode, false, false, false, "element.MoveToNextCell()");
                s.AddKeyMap(kcode, false, true, false, "element.MoveToPrevCell()");
            }
            if (!(rd.id.indexOf("row") < 0)) {
                s.AddKeyMap(kcode, false, false, false, "element.MoveToNextRow()");
                s.AddKeyMap(kcode, false, true, false, "element.MoveToPrevRow()");
            }
            
            s.focus();
        }       
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="position: relative; font-size:90%;">
        [Tab]キー&nbsp;&nbsp;：
        <input id="rdtabcol" style="position: static" type="radio" name="tab" checked="checked" onclick="setKeyMap(event);"/>
        次の列に移動
        <input id="rdtabrow" style="position: static" type="radio" name="tab" onclick="setKeyMap(event);"/>
        次の行に移動
    </div>
    <div style="position: relative; font-size:90%;">
        [Enter]キー：
        <input id="rdentercol" style="position: static" type="radio" name="enter" onclick="setKeyMap(event);"/>
        次の列に移動
        <input id="rdenterrow" style="position: static" type="radio" name="enter" onclick="setKeyMap(event);"/>
        次の行に移動
    </div>
    <farpoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark" />
        <Sheets>
            <farpoint:SheetView SheetName="Sheet1">
            </farpoint:SheetView>
        </Sheets>
    </farpoint:FpSpread>
</asp:Content>