SPREAD for ASP.NETデモアプリケーション

現在位置 : ホーム > 製品情報 > SPREAD for ASP.NET製品仕様 > デモアプリケーショントップ > グループ化 > グループ化

デモアプリケーショントップ

新機能

グループ化

Outlook スタイルで行をグループ化して表示することができます。データ量が多い場合は、行をグループ化して必要な順序でデータを表示すると便利です。

ソートの基準となる列をユーザーが選択すると、それに応じて行がまとめられ、データが階層的に表示されます。データをグループ化する基準となる列を選択するには、その列をクリックしてページの上部にあるグループバーにドラッグします。

グループ化を許可する場合はAllowGroup プロパティをtrueに設定します。上部のグループバーはGroupBarVisibleプロパティで表示・非表示を制御します。

このサンプルでは、クライアントスクリプトにより、１列目をグループ化できないように制御しています。

	ID	氏名	カナ	生年月日	性別	血液型	部署
1	1001	亀甲　滋万	ｷｺｳｼｹﾞﾏ	1950/02/04	男	A	人事部
2	1002	寒田　希世	ｶﾝﾀﾞｷﾖ	1959/06/28	女	B	人事部
3	1003	小和瀬　澄	ｵﾜｾｷﾖ	1969/03/06	男	A	人事部
4	1004	宇夫　早余子	ｳﾌﾞｻﾖｺ	1976/07/28	女	O	人事部
5	1005	宇田津　聖智	ｳﾀﾞﾂｷﾖﾄﾓ	1965/09/04	男	A	営業部
6	1006	茨城　昭児	ｲﾊﾞﾗｷｼｮｳｼﾞ	1963/04/28	男	O	営業部
7	1007	石ヶ休　椎茄	ｲｼｶﾞｷｭｳｼｲﾅ	1953/02/21	男	O	営業部
8	1008	赤司　恵治郎	ｱｶﾂｶｻｹｲｼﾞﾛｳ	1968/08/02	男	O	経理部
9	1009	小橋　仰一	ｵﾊｼｷﾞｮｳｲﾁ	1972/03/02	男	B	経理部
10	1010	一重　公大	ｲﾁｼﾞｭｳｺｳﾀﾞｲ	1964/04/19	男	B	経理部
11	1011	稲並　勝五郎	ｲﾅﾐｼｮｳｺﾞﾛｳ	1962/02/18	男	A	営業部
12	1012	穎原　紀代一	ｴｲﾊﾗｷﾖｶｽﾞ	1965/02/13	男	O	営業部

ソースコード

C#
VB
ASPX

別ウィンドウで表示

using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Configuration;

public partial class grouping : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // クライアントイベント設定
        string js = "var spid='" + FpSpread1.ClientID + "';";
        js += "var s=document.getElementById(spid);" + "\r\n";
        js += "if(s.addEventListener)" + "\r\n";
        js += "    s.addEventListener(\"CallBackStart\",cstart,false);" + "\r\n";
        js += "else" + "\r\n";
        js += "    s.onCallBackStart=cstart;" + "\r\n";

        ClientScript.RegisterStartupScript(this.GetType(), "onStartUpScript", js, true);

        if (IsPostBack) return;

        // SPREADの設定
        InitSpread(FpSpread1);

        // シートの設定
        InitSheet(FpSpread1.Sheets[0]);
    }

    private void InitSpread(FarPoint.Web.Spread.FpSpread spread)
    {
        // データ連結
        DataSet ds = new DataSet();
        ds.ReadXml(MapPath("../App_Data/data.xml"));
        spread.DataSource = ds;

        // SPREAD設定
        spread.CommandBar.Visible = false;
        spread.CssClass = "spreadStyle";
        spread.UseClipboard = false;
    }

    private void InitSheet(FarPoint.Web.Spread.SheetView sheet)
    {
        // フォントサイズの設定
        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 = 20;

        // 列幅の設定
        sheet.Columns[0].Width = 36;
        sheet.Columns[1].Width = 90;
        sheet.Columns[2].Width = 94;
        sheet.Columns[3].Width = 80;
        sheet.Columns[4].Width = 50;
        sheet.Columns[5].Width = 50;
        sheet.Columns[6].Width = 60;

        // 列幅変更の禁止
        sheet.Columns.Default.Resizable = false;

        // 行高の設定
        sheet.Rows.Default.Height = 26;

        // 列の非表示
        sheet.Columns[7].Visible = false;
        sheet.Columns[8].Visible = false;

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

        // グルーピング設定
        sheet.AllowGroup = true;
        sheet.GroupBarVisible = true;
    }

    private void ProcessGroup(FarPoint.Web.Spread.SheetView sheet, 
        FarPoint.Web.Spread.Model.GroupDataModel gm, FarPoint.Web.Spread.Model.Group g)
    {
        // 上位グループは展開する
        if (g.Parent != null)
            g.Parent.Expanded = true;
        g.Expanded = false;//グループを折りたたんで表示する
        FarPoint.Web.Spread.Model.Group g2 = g;
        while (!(g2.Rows[0] is int))
        {
            // 下位グループを取得する
            for (int i = 0; i <= g2.Rows.Count - 1; i++)
                ProcessGroup(sheet, gm, g2.Rows[i] as FarPoint.Web.Spread.Model.Group);
            g2 = g2.Rows[0] as FarPoint.Web.Spread.Model.Group;
        }
        // グループ情報に件数を表示する 
        g.Text = sheet.Columns[g.Column].Label + ": "
            + ((FarPoint.Web.Spread.Model.DefaultSheetDataModel)gm.TargetModel).GetValue((int)g2.Rows[0], g.Column);
        g.Text += " (" + g.Rows.Count + ")";
    }

    protected void FpSpread1_Grouped(object sender, EventArgs e)
    {        
        // グループを折りたたんで表示／見出しに件数を表示する
        FarPoint.Web.Spread.SheetView sheet = ((FarPoint.Web.Spread.FpSpread)sender).Sheets[0];
        FarPoint.Web.Spread.Model.GroupDataModel gm = sheet.DataModel as FarPoint.Web.Spread.Model.GroupDataModel;
        foreach (FarPoint.Web.Spread.Model.Group g in gm.Groups)
        {
            // 最上位グループを取得する 
            ProcessGroup(sheet, gm, g);
        }
    }

    protected void FpSpread1_SortColumnCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
    {
        // 列ヘッダのダブルクリックをキャンセル
        e.Handled = true;
    }
}


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

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' クライアントイベント設定
        Dim js As String = "var spid='" + FpSpread1.ClientID & "';"
        js += "var s=document.getElementById(spid);" & vbCr & vbLf
        js += "if(s.addEventListener)" & vbCr & vbLf
        js += "    s.addEventListener(""CallBackStart"",cstart,false);" & vbCr & vbLf
        js += "else" & vbCr & vbLf
        js += "    s.onCallBackStart=cstart;" & vbCr & vbLf

        ClientScript.RegisterStartupScript(Me.[GetType](), "onStartUpScript", js, True)

        If IsPostBack Then
            Return
        End If

        ' SPREADの設定
        InitSpread(FpSpread1)

        ' シートの設定
        InitSheet(FpSpread1.Sheets(0))
    End Sub

    Private Sub InitSpread(ByVal spread As FarPoint.Web.Spread.FpSpread)
        ' データ連結
        Dim ds As New System.Data.DataSet()
        ds.ReadXml(MapPath("../App_Data/data.xml"))
        spread.DataSource = ds

        ' SPREAD設定
        spread.CommandBar.Visible = False
        spread.CssClass = "spreadStyle"
        spread.UseClipboard = False
    End Sub

    Private Sub InitSheet(ByVal sheet As FarPoint.Web.Spread.SheetView)
        ' フォントサイズの設定
        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 = 20

        ' 列幅の設定
        sheet.Columns(0).Width = 36
        sheet.Columns(1).Width = 90
        sheet.Columns(2).Width = 94
        sheet.Columns(3).Width = 80
        sheet.Columns(4).Width = 50
        sheet.Columns(5).Width = 50
        sheet.Columns(6).Width = 60

        ' 列幅変更の禁止
        sheet.Columns.Default.Resizable = False

        ' 行高の設定
        sheet.Rows.Default.Height = 26

        ' 列の非表示
        sheet.Columns(7).Visible = False
        sheet.Columns(8).Visible = False

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

        ' グルーピング設定
        sheet.AllowGroup = True
        sheet.GroupBarVisible = True
    End Sub

    Private Sub ProcessGroup(ByVal sheet As FarPoint.Web.Spread.SheetView, ByVal gm As FarPoint.Web.Spread.Model.GroupDataModel, ByVal g As FarPoint.Web.Spread.Model.Group)
        ' 上位グループは展開する
        If g.Parent IsNot Nothing Then
            g.Parent.Expanded = True
        End If
        g.Expanded = False
        'グループを折りたたんで表示する
        Dim g2 As FarPoint.Web.Spread.Model.Group = g
        While Not (TypeOf g2.Rows(0) Is Integer)
            ' 下位グループを取得する
            For i As Integer = 0 To g2.Rows.Count - 1
                ProcessGroup(sheet, gm, TryCast(g2.Rows(i), FarPoint.Web.Spread.Model.Group))
            Next
            g2 = TryCast(g2.Rows(0), FarPoint.Web.Spread.Model.Group)
        End While
        ' グループ情報に件数を表示する 
        g.Text = sheet.Columns(g.Column).Label + ": " & DirectCast(gm.TargetModel, FarPoint.Web.Spread.Model.DefaultSheetDataModel).GetValue(CInt(g2.Rows(0)), g.Column)
        g.Text += " (" & Convert.ToString(g.Rows.Count) & ")"
    End Sub

    Protected Sub FpSpread1_Grouped(ByVal sender As Object, ByVal e As System.EventArgs) Handles FpSpread1.Grouped
        ' グループを折りたたんで表示／見出しに件数を表示する
        Dim sheet As FarPoint.Web.Spread.SheetView = DirectCast(sender, FarPoint.Web.Spread.FpSpread).Sheets(0)
        Dim gm As FarPoint.Web.Spread.Model.GroupDataModel = TryCast(sheet.DataModel, FarPoint.Web.Spread.Model.GroupDataModel)
        For Each g As FarPoint.Web.Spread.Model.Group In gm.Groups
            ' 最上位グループを取得する 
            ProcessGroup(sheet, gm, g)
        Next
    End Sub

    Protected Sub FpSpread1_SortColumnCommand(ByVal sender As Object, ByVal e As FarPoint.Web.Spread.SpreadCommandEventArgs) Handles FpSpread1.SortColumnCommand
        ' 列ヘッダのダブルクリックをキャンセル
        e.Handled = True
    End Sub
End Class

<%@ Page MasterPageFile="~/MasterPage.master" Language="c#" AutoEventWireup="true" 
         Inherits="grouping" CodeFile="grouping.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 cstart(event) {
            if (event == null)
                event = window.event;
            var comm = event.command.split(",");
            if (comm[0] == "Group" && comm[1] == "0")
                event.cancel = true; //1列目のグループ化は許可しない
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="#A0A0A0" BorderStyle="Solid"
        BorderWidth="1px" ongrouped="FpSpread1_Grouped" 
        onsortcolumncommand="FpSpread1_SortColumnCommand">
        <CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
            ButtonShadowColor="ControlDark">
        </CommandBar>
        <Sheets>
            <FarPoint:SheetView SheetName="Sheet1">
            </FarPoint:SheetView>
        </Sheets>
    </FarPoint:FpSpread>
</asp:Content>

このページの先頭へ戻る