Ignite UI™ API ヘルプ

ui.igGridSummaries

igGrid コントロールおよび igHierarchicalGrid コントロールはどちらも、グリッド内の列の集計機能を備えています。列の集計を使用すると、最小値、最大値、平均値、合計値などの多数の集計を公開できます。この API のクラス、オプション、イベント、メソッド、およびテーマに関するさらに詳しい情報は上の関連するタブの下で入手可能です。

次のコードスニペットは、igGrid コントロールを初期化する方法を示します。

この API を使用した作業方法の詳細についてはここをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コードサンプル

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
      <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var ds = [
                { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
                { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
                { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
                { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
                { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
                { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
                { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
                { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
                { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
            ];
 
            $("#gridSummaries").igGrid({
                autoGenerateColumns: false,
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number" },
                    { headerText: "Product Name", key: "Name", dataType: "string" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
                ],
                dataSource: ds,
                features: [
                {
                    name: "Summaries",
                    columnSettings: [
                        { columnKey: "ProductID", allowSummaries: true },
                        { columnKey: "Name", allowSummaries: true },
                        { columnKey: "ProductNumber", allowSummaries: false }
                    ]
                }
                ]
            });
        });
    </script>
</head>
<body>
    <table id="gridSummaries"></table>
</body>
</html>

calculateRenderMode

タイプ:: enumeration
デフォルト:: okcancelbuttons

計算が行われる時を指定します。

メンバー

onselect
タイプ:string
チェックボックスが選択または選択解除されると、集計は更新されます。
okcancelbuttons
タイプ:string
[OK] ボタンをクリックしたときのみ集計は更新されます。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            calculateRenderMode: "onselect"
        }
    ]
});
//Get
var calculateRenderMode = $(".selector").igGridSummaries("option", "calculateRenderMode");
//Set
$(".selector").igGridSummaries("option", "calculateRenderMode", "onselect");

callee

タイプ:

function

デフォルト:

null

機能の参照 - データがデータソースから検索されるときに呼び出されます。

コードサンプル

//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            callee: function() {...}
        }
    ]
});

columnSettings

タイプ:: array
デフォルト:: []
要素タイプ:: object

カスタム集計オプションを列ごとに指定する列設定のリスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnKey: "ProductID", allowSummaries: true  },
            ]
        }
    ]
});
 
//Get
var accessibility = $(".selector").igGridSummaries("option", "columnSettings");

allowSummaries

タイプ:: bool
デフォルト:: true

列の集計を有効または無効にします。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnIndex: 0, allowSummaries: false },
            ]
        }
    ]
});
 
//Get
var accessibility = $(".selector").igGridSummaries("option", "columnSettings");
var allowSummaries = accessibility[0].allowSummaries;
 
//Set
//get the array of column settings
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
//set new value to the column with index 0
arrayOfColumnSettings[0].allowSummaries = false;
$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);

columnIndex

タイプ:: number
デフォルト:: -1

列インデックス。列キーの代わりに使用できます。列設定の生成には列を常に識別子として使用することを推奨します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnIndex: 0, allowSummaries: false },
            ]
        }
    ]
});

columnKey

タイプ:: string
デフォルト:: null

列キー。これは、columnIndex が設定されていない場合に各列設定で必要なプロパティです。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnKey: "ProductID", allowSummaries: false },
            ]
        }
    ]
});

summaryOperands

タイプ:: array
デフォルト:: []
要素タイプ:: object

defaultSummaryOperands をチェックします。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnKey: "ProductID", allowSummaries: false, summaryOperands:
                    [{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0 }]
                    }
            ]
        }
    ]
});
 
//Get
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
var firstColumn = arrayOfColumnSettings[0].summaryOperands;
 
//Set
$(".selector").igGridSummaries("option", "columnSettings", [{ columnKey: "ReorderPoint", allowSummaries: true, summaryOperands:
[{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0 }]
}]);

active

タイプ:: bool
デフォルト:: true

false の場合、集計オペランドがドロップダウンに表示されますが計算は実行されません。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnKey: "ProductID", allowSummaries: false, summaryOperands:
                    [{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0 }]
                    }
            ]
        }
    ]
});
 
//Get
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
var firstColumn = arrayOfColumnSettings[0].summaryOperands;
var active = firstColumn[0].active;
//Set
 
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
//Set new value
arrayOfColumnSettings[0].summaryOperands[0].active = true;
$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);

format

タイプ:: string
デフォルト:: ""

現在の集計オペランドに適用される書式設定を指定します。
このオプションが設定されていない場合、含まれている列の format が使用されます。
このオプションおよび列の format が設定されている場合、autoFormat オプションに基づいて領域設定が使用されます。
autoFormat オプションで列タイプを指定せず、列および集計オペランドで書式が設定されていない場合、書式設定は適用されません。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnKey: "ProductID", allowSummaries: false, summaryOperands:
                    [{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0, format: "number" }]
                    }
            ]
        }
    ]
});
 
//Get
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
var firstColumn = arrayOfColumnSettings[0].summaryOperands;
var format = firstColumn[0].format;
 
//Set
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
//Set new value
arrayOfColumnSettings[0].summaryOperands[0].format = "number";
$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);

order

タイプ:: number
デフォルト:: 5

ドロップダウン内の要素の順序を指定します。カスタムオペランドの順序を設定し、5 以上にすることを推奨します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnKey: "ProductID", allowSummaries: false, summaryOperands:
                    [{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0, order: 6 }]
                    }
            ]
        }
    ]
});
 
//Get
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
var firstColumn = arrayOfColumnSettings[0].summaryOperands;
var order = firstColumn[0].order;
 
//Set
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
//Set new value
arrayOfColumnSettings[0].summaryOperands[0].order = 6;
$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);

rowDisplayLabel

タイプ:: string
デフォルト:: ""

集計セルに表示される集計メソッドのテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            columnSettings: [
                { columnKey: "ProductID", allowSummaries: false, summaryOperands:
                    [{ "rowDisplayLabel": "Count", "type": "count", "active": count, "order": 0
                    }]
                    }
            ]
        }
    ]
});
 
//Get
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
var firstColumn = arrayOfColumnSettings[0].summaryOperands;
var rowDisplayLabel = firstColumn[0].rowDisplayLabel;
 
//Set
var arrayOfColumnSettings = $(".selector").igGridSummaries("option", "columnSettings");
//Set new value
arrayOfColumnSettings[0].summaryOperands[0].rowDisplayLabel = "New Label";
$(".selector").igGridSummaries("option", "columnSettings", arrayOfColumnSettings);

summaryCalculator

タイプ:: string
デフォルト:: null

タイプがカスタムのときに実行されるカスタム集計関数の名前。

コードサンプル

$("#grid1").igGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number", width: 230 },
        { headerText: "Product Name", key: "Name", dataType: "string", width: 120 },
        { headerText: "Reorder Point", key: "ReorderPoint", dataType: "number", width: 230 },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: 120 }
    ],
    dataSource: ds,
    responseDataKey: "responseKey",
    features: [
    {
        name: "Summaries",
        showHeaderButton: false,
        showDropDownButton: true,
        compactRenderingMode: false,
        columnSettings: [
            { columnKey: "ProductID", allowSummaries: true ,
                            summaryOperands:
                            [
                                { "rowDisplayLabel": "Avg", "type": "AVG", "active": true},
                                { "rowDisplayLabel": "Count", "type": "COUNT", "active": true},
                                { "rowDisplayLabel": "Min", "type": "MIN", "active": true},
                                { "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
                                { "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
                            ]
            },
            { columnKey: "ReorderPoint", allowSummaries: true ,
                            summaryOperands:
                            [
                                { "rowDisplayLabel": "Avg", "type": "AVG", "active": true },
                                { "rowDisplayLabel": "Count", "type": "COUNT", "active": true },
                                { "rowDisplayLabel": "Min", "type": "MIN", "active": true },
                                { "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
                                { "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
                            ]
                            },
            { columnKey: "ProductNumber", allowSummaries: true }
        ]
    }
    ]
});
 
function CalculateEvenSum (data) {
    var i, l = data.length, sum = 0;
 
    for (i = 0; i < l; i++) {
        elem = data[i];
        if (elem % 2 === 0) {
            sum += elem;
        }
    }
    return sum;
}
 
function CalculateOddSum (data) {
    var i, l = data.length, sum = 0;
 
    for (i = 0; i < l; i++) {
        elem = data[i];
        if (elem % 2 !== 0) {
            sum += elem;
        }
    }
    return sum;
}

type

タイプ:: enumeration
デフォルト:: custom

集計オペランドを設定します。

メンバー

count
タイプ:string
指定された列の結果行の数を計算します。
min
タイプ:string
指定された列の結果行の最小値を計算します。
max
タイプ:string
指定された列の結果行の最大値を計算します。
sum
タイプ:string
指定された列の結果行の合計値を計算します。
avg
タイプ:string
指定された列の結果行の平均値を計算します。
custom
タイプ:string
指定された列の結果行の (summaryCalculator プロパティで指定された) カスタム関数を計算します。

コードサンプル

$("#grid1").igGrid({
    autoGenerateColumns: false,
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number", width: 230 },
        { headerText: "Product Name", key: "Name", dataType: "string", width: 120 },
        { headerText: "Reorder Point", key: "ReorderPoint", dataType: "number", width: 230 },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: 120 }
    ],
    dataSource: ds,
    responseDataKey: "responseKey",
    features: [
    {
        name: "Summaries",
        showHeaderButton: false,
        showDropDownButton: true,
        compactRenderingMode: false,
        columnSettings: [
            { columnKey: "ProductID", allowSummaries: true ,
                            summaryOperands:
                            [
                                { "rowDisplayLabel": "Avg", "type": "AVG", "active": true},
                                { "rowDisplayLabel": "Count", "type": "COUNT", "active": true},
                                { "rowDisplayLabel": "Min", "type": "MIN", "active": true},
                                { "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
                                { "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
                            ]
            },
            { columnKey: "ReorderPoint", allowSummaries: true ,
                            summaryOperands:
                            [
                                { "rowDisplayLabel": "Avg", "type": "AVG", "active": true },
                                { "rowDisplayLabel": "Count", "type": "COUNT", "active": true },
                                { "rowDisplayLabel": "Min", "type": "MIN", "active": true },
                                { "rowDisplayLabel": "Sum of even numbers", "type": "custom1", "active": true, summaryCalculator: $.proxy(CalculateEvenSum, this), "order": 5},
                                { "rowDisplayLabel": "Sum of odd numbers", "type": "custom2", "active": true, summaryCalculator: $.proxy(CalculateOddSum, this), "order": 6}
                            ]
                            },
            { columnKey: "ProductNumber", allowSummaries: true }
        ]
    }
    ]
});
function CalculateEvenSum (data) {
    var i, l = data.length, sum = 0;
    for (i = 0; i < l; i++) {
        elem = data[i];
        if (elem % 2 === 0) {
            sum += elem;
        }
    }
    return sum;
}
function CalculateOddSum (data) {
    var i, l = data.length, sum = 0;
    for (i = 0; i < l; i++) {
        elem = data[i];
        if (elem % 2 !== 0) {
            sum += elem;
        }
    }
    return sum;
}

compactRenderingMode

タイプ:: enumeration
デフォルト:: true

集計を描画する際のサイズを指定します。true の場合、集計のコンパクトな表示が可能になり、異なる集計を同じ行に混在表示させることもできます。
false の場合、集計はタイプごとに行を変えて表示されます。
Auto に設定すると、表示可能な集計の最大数が 1 以下の場合 True を使用します。そうでない場合、False を使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            compactRenderingMode: false
        }
    ]
});
//Get
var compactRenderingMode = $(".selector").igGridSummaries("option", "compactRenderingMode");
//Set
$(".selector").igGridSummaries("option", "compactRenderingMode", "auto");

dialogButtonCancelText
削除

タイプ:: string
デフォルト:: null

このオプションは 2017.2 バージョン以降サポートされません。
集計ドロップダウンの [キャンセル] ボタンのテキスト。
locale.dialogButtonCancelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            dialogButtonCancelText: "New Value"
        }
    ]
});
//Get
var dialogButtonCancelText = $(".selector").igGridSummaries("option", "dialogButtonCancelText");
//Set
$(".selector").igGridSummaries("option", "dialogButtonCancelText", "New Value");

dialogButtonOKText
削除

タイプ:: string
デフォルト:: null

このオプションは 2017.2 バージョン以降サポートされません。
集計ドロップダウンの [OK] ボタンのテキスト。
locale.dialogButtonOKText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            dialogButtonOKText: "New Value"
        }
    ]
});
 
//Get
var dialogButtonOKText = $(".selector").igGridSummaries("option", "dialogButtonOKText");
 
//Set
$(".selector").igGridSummaries("option", "dialogButtonOKText", "New Value");

dropDownDialogAnimationDuration

タイプ:: number
デフォルト:: 400

ドロップダウンのアニメーションの時間。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            dropDownDialogAnimationDuration: 1000
        }
    ]
});
 
//Get
var dropDownDialogAnimationDuration = $(".selector").igGridSummaries("option", "dropDownDialogAnimationDuration");
 
//Set
$(".selector").igGridSummaries("option", "dropDownDialogAnimationDuration", 1500);

dropDownHeight

タイプ:: number
デフォルト:: ""

ドロップダウンの高さ (ピクセル)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            dropDownHeight: 250
        }
    ]
});
 
//Get
var dropDownHeight = $(".selector").igGridSummaries("option", "dropDownHeight");
 
//Set
$(".selector").igGridSummaries("option", "dropDownHeight", 350);

dropDownWidth

タイプ:: number
デフォルト:: ""

ドロップダウンの幅 (ピクセル)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            dropDownWidth: 250
        }
    ]
});
 
//Get
var dropDownWidth = $(".selector").igGridSummaries("option", "dropDownWidth");
 
//Set
$(".selector").igGridSummaries("option", "dropDownWidth", 350);

emptyCellText
削除

タイプ:: string
デフォルト:: null

このオプションは 2017.2 バージョン以降サポートされません。
空のセルに表示される空のテキストテンプレート。
locale.emptyCellText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            emptyCellText: "empty cell"
        }
    ]
});
 
//Get
var emptyCellText = $(".selector").igGridSummaries("option", "emptyCellText");
 
//Set
$(".selector").igGridSummaries("option", "emptyCellText", "empty cell");

featureChooserText
削除

タイプ:: string
デフォルト:: null

このオプションは 2017.2 バージョン以降サポートされません。
集計が非表示される場合、機能セレクターのドロップダウンで表示されるテキストを取得または設定します。
locale.featureChooserText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            featureChooserText: "New Value"
        }
    ]
});
 
//Get
var featureChooserText = $(".selector").igGridSummaries("option", "featureChooserText");
 
//Set
$(".selector").igGridSummaries("option", "featureChooserText", "New Value");

featureChooserTextHide
削除

タイプ:: string
デフォルト:: null

このオプションは 2017.2 バージョン以降サポートされません。
集計が表示される場合、機能セレクターのドロップダウンで表示されるテキストを取得または設定します。
locale.featureChooserTextHide オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            featureChooserTextHide: "Summaries"
        }
    ]
});
//Get
var text = $(".selector").igGridSummaries("option", "featureChooserTextHide");
 
//Set
$(".selector").igGridSummaries("option", "featureChooserTextHide", "Summaries");

inherit

タイプ:

bool

デフォルト:

false

子レイアウトで機能継承を有効または無効にします。注: igHierarchicalGrid のみに適用します。

language
継承

タイプ:: string
デフォルト:: "en"

ウィジェットのロケール言語設定を取得または設定します。

コードサンプル

    //Initialize
$(".selector").igGridSummaries({
    language: "ja"
});
 
// Get
var language = $(".selector").igGridSummaries("option", "language");
 
// Set
$(".selector").igGridSummaries("option", "language", "ja");

locale

タイプ:: object
デフォルト:: {}

dialogButtonCancelText

タイプ:: string
デフォルト:: ""

集計ドロップダウンの [キャンセル] ボタンのテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            locale: {
                dialogButtonCancelText: "New Value"
            }
        }
    ]
});
//Get
var dialogButtonCancelText = $(".selector").igGridSummaries("option", "locale").dialogButtonCancelText;
//Set
$(".selector").igGridSummaries("option", "locale", { "dialogButtonCancelText": "New Value"});

dialogButtonOKText

タイプ:: string
デフォルト:: ""

集計ドロップダウンの [OK] ボタンのテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            locale: {
                dialogButtonOKText: "New Value"
            }
        }
    ]
});
 
//Get
var dialogButtonOKText = $(".selector").igGridSummaries("option", "locale").dialogButtonOKText;
 
//Set
$(".selector").igGridSummaries("option", "locale", { "dialogButtonOKText": "New Value" });

emptyCellText

タイプ:: string
デフォルト:: ""

空のセルに表示される空のテキストテンプレート。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            locale: {
                emptyCellText: "empty cell"
            }
        }
    ]
});
 
//Get
var emptyCellText = $(".selector").igGridSummaries("option", "locale").emptyCellText;
 
//Set
$(".selector").igGridSummaries("option", "locale", { "emptyCellText": "empty cell" });

featureChooserText

タイプ:: string
デフォルト:: ""

集計が非表示される場合、機能セレクターのドロップダウンで表示されるテキストを取得または設定します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            locale: {
                featureChooserText: "New Value"
            }
        }
    ]
});
 
//Get
var featureChooserText = $(".selector").igGridSummaries("option", "locale").featureChooserText;
 
//Set
$(".selector").igGridSummaries("option", "locale", { "featureChooserText": "New Value" });

featureChooserTextHide

タイプ:: string
デフォルト:: ""

集計が表示される場合、機能セレクターのドロップダウンで表示されるテキストを取得または設定します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            locale: {
                featureChooserTextHide: "Summaries"
            }
        }
    ]
});
//Get
var text = $(".selector").igGridSummaries("option", "locale").featureChooserTextHide;
 
//Set
$(".selector").igGridSummaries("option", "locale", { "featureChooserTextHide": "Summaries" });

summariesHeaderButtonTooltip

タイプ:: string
デフォルト:: ""

ヘッダーセルボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            locale: {
                summariesHeaderButtonTooltip: "New ToolTip Text"
            }
        }
    ]
});
 
//Get
var summariesHeaderButtonTooltip = $(".selector").igGridSummaries("option", "locale").summariesHeaderButtonTooltip;
 
//Set
$(".selector").igGridSummaries("option", "locale", { "summariesHeaderButtonTooltip": "New ToolTip Text" });

regional
継承

タイプ:: enumeration
デフォルト:: defaults

ウィジェットの領域設定を取得または設定します。

コードサンプル

//Initialize
$(".selector").igGridSummaries({
    regional: "ja"
});
// Get
var regional = $(".selector").igGridSummaries("option", "regional");
// Set
$(".selector").igGridSummaries("option", "regional", "ja");

renderSummaryCellFunc

タイプ:: enumeration
デフォルト:: null

javascript 関数の参照または名前。集計セルをグリッドフッターに描画します。設定されない場合、デフォルトの描画関数を使用します。3 つのパラメーターを受信します - methodName(summary method)、columnKey、data(描画する集計データ)。

コードサンプル

<script type="text/javascript">
    function renderSummaryCell(methodName, columnKey, data) {
        var res = data.rowDisplayLabel + " - " + data.result,
            sContainerId = "#" + this.grid.element[0].id + "_summaries_footer_row_text_container_";
        this.grid.container()
            .find(sContainerId + methodName + "_" + columnKey)
            .html(res);
    }
</script>
//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            renderSummaryCellFunc: renderSummaryCell
            }
        }
    ]
});
//Get
var showDropDownButton = $(".selector").igGridSummaries("option", "renderSummaryCellFunc");
//Set
$(".selector").igGridSummaries("option", "renderSummaryCellFunc", renderSummaryCell);

resultTemplate

タイプ:: string
デフォルト:: "{0} = {1}"

集計結果の結果テンプレート (テーブルセル内に表示される)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            resultTemplate: "{0} is {1}"
        }
    ]
});
 
//Get
var resultTemplate = $(".selector").igGridSummaries("option", "resultTemplate");
 
//Set
$(".selector").igGridSummaries("option", "resultTemplate", "{0} is {1}");

showDropDownButton

タイプ:: bool
デフォルト:: true

フッターボタンの表示/非表示 (表示/非表示ドロップダウンのクリック時)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            showDropDownButton: false
        }
    ]
});
 
//Get
var showDropDownButton = $(".selector").igGridSummaries("option", "showDropDownButton");
 
//Set
$(".selector").igGridSummaries("option", "showDropDownButton", false);

showSummariesButton

タイプ:: bool
デフォルト:: true

ヘッダーのセルにヘッダーボタンアイコンを表示します。クリック時 - 集計を表示/非表示します。 false の場合、集計アイコンは機能セレクターに表示されません。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            showSummariesButton: false
        }
    ]
});
 
//Get
var showSummariesButton = $(".selector").igGridSummaries("option", "showSummariesButton");
 
//Set
$(".selector").igGridSummaries("option", "showSummariesButton", false);

summariesHeaderButtonTooltip
削除

タイプ:: string
デフォルト:: null

このオプションは 2017.2 バージョン以降サポートされません。
ヘッダーセルボタンのツールチップテキスト。
locale.summariesHeaderButtonTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            summariesHeaderButtonTooltip: "New ToolTip Text"
        }
    ]
});
 
//Get
var summariesHeaderButtonTooltip = $(".selector").igGridSummaries("option", "summariesHeaderButtonTooltip");
 
//Set
$(".selector").igGridSummaries("option", "summariesHeaderButtonTooltip", "New ToolTip Text");

summariesResponseKey

タイプ:: string
デフォルト:: "summaries"

リモートデータソースによって返された結果からデータを取得する結果キー。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            summariesResponseKey: "summaries"
        }
    ]
});
 
//Get
var summariesResponseKey = $(".selector").igGridSummaries("option", "summariesResponseKey");
 
//Set
$(".selector").igGridSummaries("option", "summariesResponseKey", "summaries");

summaryExecution

タイプ:: enumeration
デフォルト:: afterfilteringbeforepaging

タイプがローカルのとき集計値をいつ計算するかを決定します。

メンバー

priortofilteringandpaging
タイプ:string
集計は、フィルタリングとページングの前に計算されます。
afterfilteringbeforepaging
タイプ:string
集計は、フィルタリングの後、ページングの前に計算されます。
afterfilteringandpaging
タイプ:string
集計は、フィルタリングとページングの後に計算されます。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            summaryExecution: "priortofilteringandpaging"
        }
    ]
});
//Get
var summaryExecution = $(".selector").igGridSummaries("option", "summaryExecution");
//Set
$(".selector").igGridSummaries("option", "summaryExecution", "priortofilteringandpaging");

summaryExprUrlKey

タイプ:: string
デフォルト:: "summaries"

集計の GET 要求にキーを設定します (タイプがリモートの場合にのみ使用)。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            summaryExprUrlKey: "summaries"
        }
    ]
});
 
//Get
var summaryExprUrlKey = $(".selector").igGridSummaries("option", "summaryExprUrlKey");
 
//Set
$(".selector").igGridSummaries("option", "summaryExprUrlKey", "summaries");

type

タイプ:: enumeration
デフォルト:: null

集計計算のタイプ。

メンバー

remote
タイプ:string
リモートのときは、集計計算はサーバーで実行されます。
local
タイプ:string
ローカルのときは、計算はクライアントで実行されます。

コードサンプル

//Initialize
$(".selector").igGrid({
    features: [
        {
            name: "Summaries",
            type: "remote"
        }
    ]
});
//Get
var type = $(".selector").igGridSummaries("option", "type");
//Set
$(".selector").igGridSummaries("option", "type", "remote");

Ignite UI コントロールイベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

dropDownCancelClicked

キャンセル可能:: false

ドロップダウンで [キャンセル] ボタンがクリックされたときに発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariesdropdowncancelclicked", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get the column key, for which Cancel button is clicked
    ui.columnKey;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            dropDownCancelClicked: function(evt, ui){ ... }
        }
    ]
});

dropDownClosed

キャンセル可能:: false

集計列のドロップダウンを閉じた後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariesdropdownclosed", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get the column key, for which Cancel button is clicked
    ui.columnKey;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            dropDownClosed: function(evt, ui){ ... }
        }
    ]
});

dropDownClosing

キャンセル可能:: true

集計列のドロップダウンが閉じ始める前に発生するイベント。
ドロップダウンを閉じるのをキャンセルするには、false を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariesdropdownclosing", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get the column key, for which Cancel button is clicked
    ui.columnKey;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            dropDownClosing: function(evt, ui){ ... }
        }
    ]
});

dropDownOKClicked

キャンセル可能:: false

ドロップダウンで [OK] ボタンがクリックされたときに発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariesdropdownokclicked", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get the column key, for which Cancel button is clicked
    ui.columnKey;
 
    // get data about which summary methods are(not) selected. Format of event data is {type: "min", active: false};
    ui.eventData;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            dropDownOKClicked: function(evt, ui){ ... }
        }
    ]
});

dropDownOpened

キャンセル可能:: false

特定の列の集計ドロップダウンが開いた後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariesdropdownopened", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get the column key, for which Cancel button is clicked
    ui.columnKey;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            dropDownOpened: function(evt, ui){ ... }
        }
    ]
});

dropDownOpening

キャンセル可能:: true

特定の列の集計に対してドロップダウンが開く前に発生するイベント。
ドロップダウンを開くのをキャンセルするには、false を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariesdropdownopening", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get the column key, for which Cancel button is clicked
    ui.columnKey;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            dropDownOpening: function(evt, ui){ ... }
        }
    ]
});

summariesCalculated

キャンセル可能:: false

集計の計算が完了した後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariessummariescalculated", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get data for calculated summaries
    ui.data;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            summariesCalculated: function(evt, ui){ ... }
        }
    ]
});

summariesCalculating

キャンセル可能:: true

集計の計算が行われる前に発生するイベント。
集計の計算をキャンセルするには、false を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariessummariescalculating", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            summariesCalculating: function(evt, ui){ ... }
        }
    ]
});

summariesMethodSelectionChanged

キャンセル可能:: false

ユーザーがチェックボックスから集計メソッドを選択/選択解除するときに発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariessummariesmethodselectionchanged", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get the column key, for which Cancel button is clicked
    ui.columnKey;
 
    // get whether method is selected or not
    ui.isSelected;
 
    // get summary method name
    ui.methodName;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            summariesMethodSelectionChanged: function(evt, ui){ ... }
        }
    ]
});

summariesToggled

キャンセル可能:: false

集計行が切り替えられた後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariessummariestoggled", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get whether summaries are shown or not
    ui.isToShow;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            summariesToggled: function(evt, ui){ ... }
        }
    ]
});

summariesToggling

キャンセル可能:: true

集計行の切り替えが開始する前に発生するイベント。
集計の表示/非表示をキャンセルするには、false を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("iggridsummariessummariestoggling", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // get whether summaries are shown or not
    ui.isToShow;
 
    // access the igGridSummaries widget object
    ui.owner;
 
});
 
//Initialize
$(".selector").igGrid({
    features : [
        {
            name : "Summaries",
            summariesToggling: function(evt, ui){ ... }
        }
    ]
});

詳細の表示

calculateSummaries

.igGridSummaries( "calculateSummaries" );
集計を計算します。
コードサンプル

$("#grid1").igGridSummaries("calculateSummaries");
calculateSummaryColumn

.igGridSummaries( "calculateSummaryColumn", ck:string, columnMethods:array, data:object, dataType:object );
集計は、指定した列キー、columnMethods および dataType のデータ全体を計算します (データソースがリモートであり、dataType が日付または時間のときに使用される)。
- ck
- タイプ:string
- ColumnKey。
- columnMethods
- タイプ:array
- 列メソッドオブジェクトの配列。
- data
- タイプ:object
- 結果を表すオブジェクト。
  現在の列の dataType を表します。
- dataType
- タイプ:object
コードサンプル

$("#grid1").igGridSummaries("calculateSummaryColumn", "ProductID", [{type: "min", active: true, rowDisplayLabel: "Min", format: "number"}], [{"ProductID": 1}, {"ProductID": 2}], "number");
changeLocale

.igGridSummaries( "changeLocale" );
ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。
コードサンプル

$(".selector").igGridSummaries("changeLocale");
changeRegional

.igGridSummaries( "changeRegional" );
ウィジェット要素の地域設定を options.regional に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。regional オプションのセッターを使用してください。
コードサンプル

$(".selector").igGridSummaries("changeRegional");
clearAllFooterIcons

.igGridSummaries( "clearAllFooterIcons" );
すべての集計ドロップダウンボタンを削除します。
コードサンプル

$("#grid1").igGridSummaries("clearAllFooterIcons");
destroy

.igGridSummaries( "destroy" );
コードサンプル

$("#grid1").igGridSummaries("destroy");
isSummariesRowsHidden

.igGridSummaries( "isSummariesRowsHidden" );
集計行が非表示かどうかを返します。
コードサンプル

$("#grid1").igGridSummaries("isSummariesRowsHidden");
selectCheckBox

.igGridSummaries( "selectCheckBox", $checkbox:object, isToSelect:bool );
指定されたチェックボックスを選択/選択解除します。
- $checkbox
- タイプ:object
- チェックボックスの jQuery オブジェクトを指定します。
- isToSelect
- タイプ:bool
- チェックボックスを選択するかどうかを指定します。
コードサンプル

$("#grid1").igGridSummaries("selectCheckBox", $("#checkboxSelector"), true);
showHideDialog

.igGridSummaries( "showHideDialog", $dialog:object );
ダイアログを表示/非表示します。
- $dialog
- タイプ:object
- ドロップダウン DIV 要素の jQuery オブジェクト表現。
コードサンプル

$("#grid1").igGridSummaries("showHideDialog", $("#dialogSelector"));
summariesFor

.igGridSummaries( "summariesFor", columnKey:object );
指定された列キーを持つ列の全ての集計を保持する JQUERY オブジェクトを返します。
- columnKey
- タイプ:object
コードサンプル

var summariesResiltByKey = $("#grid1").igGridSummaries("summariesFor", "ProductID");
summaryCollection

.igGridSummaries( "summaryCollection" );
すべての列の全集計を保持する JQUERY オブジェクトを返します。
コードサンプル

var collection = $("#grid1").igGridSummaries("summaryCollection");
toggleCheckstate

.igGridSummaries( "toggleCheckstate", $checkbox:object );
checkboxMode が off に設定されていない場合に、チェックボックスのチェック状態を切り替えます。それ以外の場合は何も行いません。
- $checkbox
- タイプ:object
- チェックボックスの jQuery オブジェクトを指定します。
コードサンプル

$("#grid1").igGridSummaries("toggleCheckstate", $("#checkboxSelector"));
toggleDropDown

.igGridSummaries( "toggleDropDown", columnKey:string, event:object );
ドロップダウンを切り替えます。
- columnKey
- タイプ:string
- 指定したキーのある列でドロップダウンを切り替えます。
- event
- タイプ:object
- イベントオブジェクト。そのデータは、現在の columnKey、isAnimating、および buttonId を含む必要があります。
コードサンプル

$("#grid1").igGridSummaries("toggleDropDown", null);
toggleSummariesRows

.igGridSummaries( "toggleSummariesRows", isToShow:bool, isInternalCall:bool );
集計行を切り替えます。
- isToShow
- タイプ:bool
- 集計を表示するかどうかを指定します。
- isInternalCall
- タイプ:bool
- オプションのパラメーター。この関数がウィジェットで内部に呼び出されるかどうかを指定します。
コードサンプル

$("#grid1").igGridSummaries("toggleSummariesRows", true, null);

ui-ie7

IE7 のクラス。
ui-state-default ui-corner-all ui-igcheckbox-normal

チェックボックスコンテナーに適用されるクラス。
ui-state-hover

チェックボックスのホバー状態のスタイルを定義するクラス。
ui-icon ui-icon-check ui-igcheckbox-normal-off

チェックボックスのチェックされていない状態を定義するクラス。
ui-icon ui-icon-check ui-igcheckbox-normal-on

チェックボックスのチェックされた状態を定義するクラス。
ui-iggrid-summaries-dialog

ドロップダウンに適用されるクラス。
ui-iggrid-summaries-dropdown-listcontainer ui-widget

ドロップダウンの全てのチェックボックスを保持するコンテナーに適用されるクラス。
ui-iggrid-summaries-dialog-listitem

ドロップダウンのリスト項目に適用されるクラス。
ui-icon ui-iggrid-icon-summaries

機能チューザーに表示されるアイコンのクラス。
ui-icon ui-icon-calculator ui-iggrid-icon-summaries

(ドロップダウンを表示/非表示にする) フッターボタンアイコンに適用されるクラス。
ui-iggrid-filterbuttonactive ui-state-active

選択された (ドロップダウンが開いた) ときにフッターボタンアイコンに適用されるクラス.。
ui-iggrid-filterbuttonhover ui-state-hover

(ボタンの表示/非表示ドロップダウンで) ホバーされたときにフッターボタンアイコンに適用されるクラス。
ui-iggrid-summaries-footer-dialog-buttons-container

ドロップダウンの [OK]/[キャンセル] ボタンのコンテナーに適用されるクラス。
ui-widget-footer ui-state-default

フッター行のセルに適用されるクラス。
ui-state-hover

ホバー状態のときに、フッター行のセルに適用されるクラス。
ui-corner-all ui-iggrid-summaries-footer-icon-container

集計セル内のアイコンのテキストを含む DOM 要素に適用されるクラス。
ui-iggrid-summaries-footer-icon-container-empty

showSummariesButton が false の場合に DOM 要素に適用されるクラス。
ui-iggrid-summaries-footer-text-container

集計結果のテキストを含む集計セル内の DOM 要素に適用されるクラス。
ui-iggrid-summaries-footer-text-container-empty

showSummariesButton が false の場合、集計結果のテキストを含む集計セル内の DOM 要素に適用されるクラス。
ui-iggrid-summaries-headerbuttoncontainer ui-corner-all

(集計を表示/非表示にする) ヘッダーボタンのコンテナー div に適用されるクラス。
ui-iggrid-summaries-header-icon ui-corner-all ui-icon ui-icon-calculator ui-icon-summaries

(集計を表示/非表示にする) ヘッダーボタンに適用されるクラス。
ui-iggrid-summaries-header-icon-hover ui-state-hover

ホバー状態のときに (集計を表示/非表示にする) ヘッダーボタンに適用されるクラス。

Ignite UI for jQuery | API リファレンス

ui.igGridSummaries

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル