基本の JS グリッドを作成する

[アーティクル]
06/15/2015

最終更新日: 2011年6月21日

適用対象: SharePoint Foundation 2010

このトピックでは、JS グリッドコントロールと Microsoft Visual Studio 2010 を使用して、基本的なグリッドコントロールを作成する方法について説明します。

注意

ユーザーのコンピューターでは、以下の説明の中の Visual Studio ユーザーインターフェイス要素とは異なる名前あるいは場所が表示されていることがあります。ユーザーの Visual Studio エディションと、使用する設定によって、これらの要素が決定されます。

この例では、視覚的 Web パーツを使用します。視覚的 Web パーツは, .ascx コントロールのデザインビューを有効にし、またエディターパーツを作成せずに単純な Web パーツプロパティを作成できるようにします。

JS グリッドコントロールをレンダリングするには、サンプルデータがいくつか必要です。サンプルデータは GridData.cs ファイルにあります。データを解析するコードは GridUtilities.cs ファイルにあります。これのファイルは両方とも GridUtils フォルダーに保存されています。データファイルおよびユーティリティファイルには、基本グリッドの作成に必要な機能よりも多くの機能が含まれていますが、これらのファイルには以降のトピックで使用する機能が含まれます。

前提条件

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010 の SharePoint 開発者ツール

注意

Visual Studio を使用せずに、この手順を行うことはできますが、Visual Studio 2010 と Visual Studio 2010 の SharePoint 開発者ツールの両方を使用すると、より簡単に行えます。

空の SharePoint プロジェクトを作成するには

[管理者として実行] オプションを使用して、Visual Studio 2010 を開始します。
[ファイル] メニューで、[新規作成] をクリックし、[新しいプロジェクト] を選択します。
[新しいプロジェクト] ダイアログボックスで、[Visual C#] ノード、[SharePoint] ノード、[2010] ノードの順に選択します。
[テンプレート] ウィンドウで、[空の SharePoint プロジェクト] を選択し、ソリューションに JSGrid という名前を付けて、[OK] をクリックします。SharePoint カスタマイズウィザードが表示されます。このウィザードを使用すると、ソリューションの信頼レベルやプロジェクトのデバッグで使用するサイトを選択できます。
SharePoint カスタマイズウィザードで [ファームソリューションとして配置する] を選択し、[完了] をクリックして既定のローカル SharePoint サイトを使用します。

注意

すべての Web パーツがファームである (完全に信頼されている) 必要があります。

Web パーツをプロジェクトに追加するには

ソリューションエクスプローラーでソリューションを右クリックし、[追加] をポイントして、[新しいアイテム] を選択します。
[新しいアイテムの追加] ダイアログボックスで [SharePoint] ノードを展開し、[2010] を選択します。
[2010] ノードで [視覚的 Web パーツ] を選択し、アイテムに JSGridWebPart という名前を付けて、[追加] をクリックします。ソリューションエクスプローラーに Web パーツが表示されます。この操作によりライブラリ参照が生成され、この例では JSGridWebPart.cs が生成されます。

JSGrid コントロールを追加するには

コントロールを初期化するには、次のコードを JSGridWebPartUserControl.ascx 内に貼り付けます。

<SharePoint:JSGrid ID="_grid" runat="server" /> 
<script type="text/javascript">
    Type.registerNamespace("GridManager");
    GridManager = function () {
        this.Init = function (jsGridControl, initialData, props) {
            var dataSource = new SP.JsGrid.StaticDataSource(initialData);
            var jsGridParams = dataSource.InitJsGridParams();
            jsGridControl.Init(jsGridParams);
            jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign: 'right' }));
            jsGridControl.Init(jsGridParams);

        }
    };
</script>

最初の行では JS グリッドコントロールについて記述し、以降の行のスクリプトでは、グリッドマネージャーの登録、データソースの登録、適切な配置スタイルの登録、および初期化タスクを処理します。

注意

Web パーツを SharePoint 2010 ページに追加すると、Web パーツはグループ内に表示されます。Web パーツを表示するグループは、Elements.xml ファイルの Group Property 名によって制御されます。既定では、グループは "カスタム" に設定されます。カスタムグループを作成するには、Group Property を変更します。たとえば、Finance グループを作成する場合、値を "Finance" に設定します (<Property Name="Group" Value="Finance" />)。

グリッドユーティリティコードを追加するには

ソリューションエクスプローラーでソリューション名を右クリックし、[追加] をポイントし、[新しいフォルダー] をクリックします。フォルダーに「GridUtils」という名前を付けます。
ソリューションエクスプローラーで [GridUtils] フォルダーを右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。[Visual C#]、[コード]、[コードファイル] の順に選択し、ファイルに「GridUtilities.cs」という名前を付けます。
前の手順を繰り返して、GridData.cs ファイルを作成します。

以下の例に示すように、GridUtilities.cs および GridData.cs の内容を GridUtils フォルダーの各ファイルにコピーします。

GridUtilities.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using Microsoft.SharePoint.JSGrid;
using Microsoft.SharePoint;

namespace JSGridSample.GridUtilityLib
{
    public static class GridUtilities
    {
        public static IList<GridColumn> GetGridColumns(DataTable table)
        {
            List<GridColumn> r = new List<GridColumn>();
            foreach (DataColumn iterator in table.Columns)
            {
                /* Columns are visible in the grid; we don't want these
                   as grid columns. */
                // HierarchyParentKey is used in the how to: Create a Hierarchy Grid topic.

                if (iterator.ColumnName != "Key" 
                        && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                        //&& iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 

                        // uncomment for the Create a Gantt Chart Using JS Grid how-to.
                        && iterator.ColumnName != "HierarchyParentKey"

                        // The costq and Quart fields are used in the Create a Pivot Chart Using JS Grid how-to.
                        && iterator.ColumnName.Substring(0, 5) != "costq"
                        && iterator.ColumnName.Substring(0, 5) != "Quart")
                {
                    GridColumn col = new GridColumn();
                    // Point the column at a fieldKey name.
                    col.FieldKey = iterator.ColumnName;
                    // Give the column header a name.
                    col.Name = iterator.ColumnName;
                    // Define the column width.
                    col.Width = 210;

                    // Define column settings.
                    if (iterator.ColumnName == "Department")
                    {
                        col.IsHidable = false;
                    }
                    if (iterator.ColumnName == "Yearly Estimate")
                    {
                        col.IsSortable = true;
                    }

                    // Add the column.
                    r.Add(col);
                }
            }
            return r;
        }

        public static IList<GridField> GetGridFields(DataTable table)
        {
            List<GridField> r = new List<GridField>();

            foreach (DataColumn iterator in table.Columns)
            {
                GridField field = new GridField();
                field = formatGridField(field, iterator);

                r.Add(field);
            }
            return r;
        }

        /** This code matches the propType of the incoming column with the 
            outgoing grid field. HierarchyParentKey is used in the Hierarchy how to. **/
        public static GridField formatGridField(GridField gf, DataColumn dc)
        {
            // Set field key name.
            gf.FieldKey = dc.ColumnName;
            // When in doubt, serialize the data value.
            gf.SerializeDataValue = true;
            if (dc.ColumnName != "Key" 
               && dc.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
               // Uncomment for the Create a Gantt Chart Using JS Grid how-to.
               // && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName  
               && dc.ColumnName != "HierarchyParentKey")
            {
                // Determine whether the field is timephased.
                if (dc.ColumnName.Substring(0, 5) == "costq")
                {
                }
                if (dc.ColumnName.Substring(0, 5) == "Quarter")
                {
                    /* Ensure that the timephased column headers are
                       always read-only despite the grid settings. */
                    gf.EditMode = EditMode.ReadOnly;
                }

                // Add properties based on the type.
                if (dc.DataType == typeof(String))
                {
                    gf.PropertyTypeId = "String";
                    /* The Localizer determines how we render the 
                       underlying data on screen. */
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    /* The Serialization type is a required property. */
                    gf.SerializeLocalizedValue = true;
                    gf.SerializeDataValue = false;
                }
                else if (dc.DataType == typeof(Int16)
                    || dc.DataType == typeof(Int32) 
                    || dc.DataType == typeof(Int64)
                    || dc.DataType == typeof(Decimal)
                    || dc.DataType == typeof(Double))

                {
                    gf.PropertyTypeId = "JSNumber";
                    /* The Localizer determines how we render the 
                       underlying data on screen. */
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    // Right align numeric columns
                    gf.DefaultCellStyleId = "TextRightAlign";

                    /* The Serialization type is a required property. */
                    gf.SerializeLocalizedValue = true;
                    gf.SerializeDataValue = false;
                }
                else if (dc.DataType == typeof(Hyperlink))
                {
                    gf.PropertyTypeId = "Hyperlink";
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    gf.SerializeLocalizedValue = false;
                    gf.SerializeDataValue = true;
                }
                else if (dc.DataType == typeof(bool))
                {
                    gf.PropertyTypeId = "CheckBoxBoolean";
                    gf.SerializeDataValue = true;
                    gf.SerializeLocalizedValue = false;
                }
                else if (dc.DataType == typeof(DateTime))
                {
                    gf.PropertyTypeId = "JSDateTime";
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    gf.SerializeDataValue = true;
                    gf.SerializeLocalizedValue = true;
                }
                else
                    throw new Exception("No PropTypeId defined for this datatype" + dc.DataType);
            }
            return gf;
        }
    }
}

GridData.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.JSGrid;

namespace JSGridSample.GridUtilityLib
{
    public class GridData
    {
        /**
         * This method returns a Basic data table with a 'Key' column
         * and sample column of various types.
         * @param numRows is the number of rows of data to create.
         * */
        Random _rand = new Random();
        public virtual DataTable Data(int numRows)
        {
            // Create and initialize the data table.
            DataTable data = new DataTable();
            data = new DataTable();
            data.Locale = System.Globalization.CultureInfo.InvariantCulture;


            // Add the columns that we care about.
            data.Columns.Add(new DataColumn("Key", typeof(Guid)));
            data.Columns.Add(new DataColumn(GridSerializer.DefaultGridRowStyleIdColumnName, typeof(String)));
            data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid)));
            data.Columns.Add(new DataColumn("Title", typeof(string)));
            data.Columns.Add(new DataColumn("Department Manager", typeof(string)));
            data.Columns.Add(new DataColumn("Department", typeof(string)));
            data.Columns.Add(new DataColumn("Start Date", typeof(DateTime)));
            data.Columns.Add(new DataColumn("Finish Date", typeof(DateTime)));
            data.Columns.Add(new DataColumn("CompleteThrough", typeof(DateTime)));
            data.Columns.Add(new DataColumn("Yearly Estimate", typeof(int)));
            data.Columns.Add(new DataColumn("FY 2009 Estimate", typeof(int)));
            data.Columns.Add(new DataColumn("FY 2010 Estimate", typeof(int)));
            data.Columns.Add(new DataColumn("checkbox", typeof(Boolean)));
            data.Columns.Add(new DataColumn("Hyperlink", typeof(Hyperlink)));
            //data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid how-to.

            Guid? parent = null;
            // Create dummy data for the number of rows we have.
            DataRow dr;
            int j = 0;
            for (int i = 0; i < numRows; i++)
            {
                var curKey = Guid.NewGuid();

                dr = data.NewRow();
                dr["Key"] = curKey;

                // Used for the hierarchy grid How-to.
                if (i % 10 == 0)
                {
                    parent = curKey;
                    j++;
                }
                if (parent.HasValue)
                {
                    dr["HierarchyParentKey"] = parent.Value;
                }
                if (parent == null)
                {
                    parent = curKey;
                }
                dr["Title"] = "Task " + j + "." + i % 10;
                dr["Department Manager"] = "Manager";
                dr["Department"] = "Department- " + i.ToString();
                dr["FY 2009 Estimate"] = _rand.Next(1000000) + 30000;
                dr["FY 2010 Estimate"] = _rand.Next(1000000) + 30000;
                dr["Yearly Estimate"] = ((int)dr["FY 2009 Estimate"]
                    + (int)dr["FY 2010 Estimate"]) / 2;
                dr["Start Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["Finish Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["CompleteThrough"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["checkbox"] = i % 2 != 0;
                dr["Hyperlink"] = new Hyperlink() { Display = "Contoso", Address = "https://www.contoso.com" };

                data.Rows.Add(dr);
            }
            return data;
        }
    }
}

JSGridWebPartUserControl.ascx.cs を変更するには

JSGridWebPartUserControl.ascx.cs を開きます。

次の宣言を追加します。

using System.Data;
using Microsoft.SharePoint.JSGrid;
using JSGridSample.GridUtilityLib;

JSGridWebPartUserControl クラスの内容を次のコードに置き換えます。

public partial class JSGridWebPartUserControl : UserControl
    {
        protected global::Microsoft.SharePoint.WebControls.JSGrid _grid;
        protected void Page_Load(object sender, EventArgs e)
        {
            // Build some simple data for the grid to display.
            DataTable data = new GridData().Data(20);

            // Create a grid serializer to connect to data.
            GridSerializer gds = new GridSerializer(SerializeMode.Full,
                data, "Key", new FieldOrderCollection(new String[] { "Department" }),
                GridUtilities.GetGridFields(data), GridUtilities.GetGridColumns(data));

            // Point the grid serializer at the grid serializer data.
            _grid.GridDataSerializer = gds;

            // Tell the grid to listen to the GridManager controller.
            _grid.JSControllerClassName = "GridManager";
        }
    }

注意

また、JS グリッドコントロールは、On_Load イベントハンドラーの代わりに、OnPreRender イベントハンドラーで作成することができます。これは、たとえば、Web パーツにプロパティを追加する際に必要になります。

JS グリッドコントロールシリアライザーは、JavaScript Object Notation (JSON) 文字列に JS グリッドコントロール設定とデータをシリアル化します。グリッドコントロールは JSON を生成して、ページにそれを配置します。

注意

グリッドフィールドについては、SerializeDataValue または SerializeLocalizedValue を true に設定する必要があります。両方を true に設定できますが、少なくともどちらか一方を設定する必要があります。

Web パーツをテストするには

Visual Studio で、F5 キーを押してプロジェクトを実行します。
展開が行われ、SharePoint サイトが開きます。Web パーツは、SharePoint 2010 Web パーツギャラリーに自動的に追加されます。
任意の Web パーツページを開いて編集します。Web パーツは、任意の Web パーツページに追加できます。
[挿入]、[Web パーツ] の順にクリックします。カスタムカテゴリから JSWebPart を選択します。Web パーツがページ上に表示されます。

注意

Windows Internet Explorer を閉じるか、Visual Studio で Shift + F5 キーを押すと、Visual Studio が Web パーツを取り消し、インターネットインフォメーションサービス (IIS) がリセットされます (ListProjects プロパティページの [SharePoint] タブで [デバッグ後に自動取り消し] チェックボックスがオンの場合)。[ビルド] メニューで [ソリューションの展開] をクリックすると、Visual Studio がソリューションを開発用コンピューターに展開し、Visual Studio から独立して Web パーツを使用できるようになります。

Web パーツの操作の詳細については、「[方法] ページ上の Web パーツを操作する」を参照してください。

次の手順

[方法] JS グリッドを使用してピボットグラフを作成する。

次の方法で共有

基本の JS グリッドを作成する

前提条件

空の SharePoint プロジェクトを作成するには

Web パーツをプロジェクトに追加するには

JSGrid コントロールを追加するには

グリッドユーティリティコードを追加するには

JSGridWebPartUserControl.ascx.cs を変更するには

Web パーツをテストするには

次の手順

関連項目

参照

概念

その他のリソース

次の方法で共有

基本の JS グリッドを作成する

前提条件

空の SharePoint プロジェクトを作成するには

Web パーツをプロジェクトに追加するには

JSGrid コントロールを追加するには

グリッド ユーティリティ コードを追加するには

JSGridWebPartUserControl.ascx.cs を変更するには

Web パーツをテストするには

次の手順

関連項目

参照

概念

その他のリソース

グリッドユーティリティコードを追加するには