次の方法で共有

編集可能なグリッドを作成する

  • [アーティクル]

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

適用対象: SharePoint Foundation 2010

この説明手順では、基本的な JS グリッド コントロールの編集を有効にする方法について説明します。これは、「[方法] 基本の JS グリッドを作成する」および「[方法] JS グリッドを使用してピボットグラフを作成する」に続くトピックです。

注意

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

前提条件

注意

このチュートリアルは、Visual Studio 2010 を使用せずに行うことができますが、Visual Studio 2010 と Microsoft Visual Studio 2010 の SharePoint 開発者ツールを使用するほうが簡単です。

編集可能なグリッドを作成する

編集可能なグリッドを作成するには、次の手順を実行します。

  • ECMAScript (JavaScript、JScript) で読み取り/書き込み操作を切り替えます

  • 行、フィールド、またはセルの読み取り/書き込み操作を有効にします

  • クライアント エラー チェックを追加します

  • コールバックを作成してユーザーの変更を処理します

この説明手順では、編集可能なグリッドを作成する方法と、JS グリッド コントロールに用意されているクライアント エラー チェックについて説明します。ユーザー変更の書き込みについては、ここでは説明しません。

bEditingEnabled で編集を有効にするには

  1. 前述の説明手順で作成した JSGrid ソリューションを開きます。

  2. JSGridWebPartUserControl.ascx を開きます。

  3. JavaScript コード内で、jsGridControl が初期化される直前に、jsGridParams.tableViewParams.bEditingEnabled = true; を追加します。

    コードは以下のようになります。

    <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();

            jsGridParams.tableViewParams.bEditingEnabled = true;

            jsGridControl.Init(jsGridParams);
        }
    };
</script>

    bEditingEnabled を使用すると、クライアント側のコードで編集のオンとオフを切り替えることができることに注意してください。既定では、bEditingEnabled は false に設定されています。

行、フィールド、またはセルの読み取り/書き込み操作を有効にする

JS グリッド コントロールEditMode 列挙では、レコードまたはファイルのセルで編集を許可するかどうかを指定します。選択肢は次のとおりです。

  • Defer    読み取り/書き込み状態を常に延期します。コントロールは自身の状態を制御できません。

  • ReadOnly   レコードまたはフィールドに適用されている場合、そのレコードまたはフィールドのセルは編集できません。行に適用されている場合は、各セルの編集モードを確認してください。

  • ReadOnlyDefer   行、列、またはグリッド コントロールで編集可能と設定されてない限り、セルは読み取り専用です。行に適用されている場合は、各セルの編集モードを確認してください。

  • ReadWrite   行、列、またはグリッド コントロールで編集不可と設定されてない限り、セルは編集することができます。

  • ReadWriteDefer   行、列、またはグリッド コントロールで編集不可と設定されてない限り、セルは編集することができます。

特定のフィールドを編集できるようにするには

  1. JSGrid ソリューションで、GridUtilities.cs を開きます。

  2. FormatGridField クラスを見つけます。

  3. formatGridField クラスで、すべてのフィールドの EditMode プロパティを ReadOnlyDefer に設定します。これにより、読み取り専用の既定値が設定されます。特定のフィールド、行、またはセルについては、この値をオーバーライドできます。

    // When in doubt, set the edit mode to read-only and defer to others.
gf.EditMode = EditMode.ReadOnlyDefer;

  4. FormatGridField クラスで下に移動し、Int32 型のすべてのフィールドの編集モードを ReadWrite に設定します。

    else if (dc.DataType == typeof(Int32))
    {
        gf.EditMode = EditMode.ReadWrite;

  5. プロジェクトを実行し、数値フィールドの 1 つを編集します。

    数値セルに数値以外を入力すると、そのセルの枠が赤になり、赤のアイコンが行ヘッダーに表示されます。セルをクリックすると、エラーに関する説明が示されたアイコンが表示されます。これは、JS グリッド コントロールによって提供される動作です。

関連項目

概念

JS グリッド コントロールの機能