Ignite UI™ API ヘルプ

ui.igTreeGridPaging

igTreeGrid のページングを使用するとグリッドは、データの基本セットの制限された数の行を一度にユーザーに描画できます。グリッドの構成に基づいて、データのサブセットまたはすべてをクライアントに送信できます。ルートレベル行またはすべてのレコードをページングに含むことができます。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

この 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">
        var employees = [
            { "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
            { "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
            { "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
            { "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },
 
            // Andrew Fuller's direct reports
            { "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
            { "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
            { "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
            { "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },
 
            // Janet Leverling's direct reports
            { "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
            { "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
            { "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },
 
            // Nancy Davolio's direct reports
            { "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
            { "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
            { "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },
 
            // Steve Buchanan's direct reports
            { "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
            { "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },
 
            // Lacota Mufutau's direct reports
            { "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
            { "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
            { "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },
 
            // Dane Rodriquez's direct reports
            { "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
            { "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },
 
            // Bernard Jarvis' direct report
            { "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
        ];
 
       $(function () {
           $("#treegrid").igTreeGrid({
               dataSource: employees,
               primaryKey: "employeeId",
               foreignKey: "supervisorId",
               autoGenerateColumns: false,
               columns: [
                   { headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
                   { headerText: "First", key: "firstName", width: "150px", dataType: "string" },
                   { headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
               ],
               features: [
                   {
                       name: "Paging",
                       mode: "allLevels",
                       //mode: "rootLevelOnly",
                       pageSize: 10
                   }
               ]
           });
       });
    </script>
</head>
<body>
    <table id="treegrid"></table>
</body>
</html>

breadcrumbDelimiter

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

ブレッドクラムトレイルで先祖の間の区切り記号を取得または設定します。$.html() によって設定されます。contextRowMode が breadcrumb の場合のみに使用されます。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: "breadcrumb",
            breadcrumbDelimiter:">>"
        }
    ]
});
 
//Get
var delimiter = $(".selector").igTreeGridPaging("option", "breadcrumbDelimiter");
 
//Set
$(".selector").igTreeGridPaging("option", "breadcrumbDelimiter", ">>");

breadcrumbKey

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

ブレッドクラムトレイルに表示する先祖の列キーを取得または設定します。contextRowMode が breadcrumb の場合のみに使用されます。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: "breadcrumb",
            breadcrumbKey:"firstName"
        }
    ]
});
 
//Get
var breadcrumbKey = $(".selector").igTreeGridPaging("option", "breadcrumbKey");
 
//Set
$(".selector").igTreeGridPaging("option", "breadcrumbKey", "firstName");

contextRowLoadingText
削除

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

このオプションは 2017.2 ボリュームリリースより非推奨となります。
ブレッドクラム/親行の処理でコンテキスト行のコンテンツを読み込んでいるときに表示されるテキストメッセージを取得または設定します。$.html() によって設定されます。null に設定される場合、読み込みメッセージは表示されません。
locale.contextRowLoadingText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: "breadcrumb",
            contextRowLoadingText:"Loading context row"
        }
    ]
});
 
//Get
var loadingText = $(".selector").igTreeGridPaging("option", "contextRowLoadingText");
 
//Set
$(".selector").igTreeGridPaging("option", "contextRowLoadingText", "Loading context row");

contextRowMode

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

データが次のページにオーバーフローする場合、リーフレベル行のコンテキストを説明するモードが複数あります。mode オプションが rootLevelOnly の場合、コンテキスト行は常に contextRowRootText オプションの値を表示します。

メンバー

none
タイプ:string
コンテキスト行を描画しません。
parent
タイプ:string
直接の親行の読み取り専用表現を描画します。
breadcrumb
タイプ:string
すべての先祖のフルパスを表す読み取り専用ブレッドクラムトレイルを描画します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: 'breadcrumb'
        }
    ]
});
//Get
var mode = $(".selector").igTreeGridPaging("option", "contextRowMode");
//Set
$(".selector").igTreeGridPaging("option", "contextRowMode", "parent");

contextRowRootText
削除

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

このオプションは 2017.2 ボリュームリリースより非推奨となります。
ページの最初のレコードがルートレコード (先祖がない) の場合、コンテキスト行のコンテンツを取得または設定します。$.html() によって設定されます。
locale.contextRowRootText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: 'breadcrumb',
            contextRowRootText: "First page"
        }
    ]
});
 
//Get
var rootText = $(".selector").igTreeGridPaging("option", "contextRowRootText");
 
//Set
$(".selector").igTreeGridPaging("option", "contextRowRootText", "First page");

currentPageDropDownLeadingLabel
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
ページインデックスを切り替えることができる、ドロップダウンの先頭ラベル。locale.currentPageDropDownLeadingLabel オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            currentPageDropDownLeadingLabel : "Current Page"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "currentPageDropDownLeadingLabel");
 
//Set
$(".selector").igTreeGridPaging("option", "currentPageDropDownLeadingLabel", "Current Page");

currentPageDropDownTooltip
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
ページインデックスドロップダウン用のカスタムのローカライズ済みツールチップ。locale.currentPageDropDownTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            currentPageDropDownTooltip : "Choose Page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igTreeGridPaging("option", "currentPageDropDownTooltip");
 
//Set
$(".selector").igTreeGridPaging("option", "currentPageDropDownTooltip", "Choose Page");

currentPageDropDownTrailingLabel
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
ページインデックスを切り替えることができる、ドロップダウンのローカライズ済み後続ラベル。locale.currentPageDropDownTrailingLabel オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            currentPageDropDownTrailingLabel : "Pages"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "currentPageDropDownTrailingLabel");
 
//Set
$(".selector").igTreeGridPaging("option", "currentPageDropDownTrailingLabel", "Pages");

currentPageIndex
継承

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

バインドされ、UI に描画される現在のページインデックス。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            currentPageIndex: 5
        }
    ]
});
 
//Get
var page = $(".selector").igTreeGridPaging("option", "currentPageIndex");
 
//Set
$(".selector").igTreeGridPaging("option", "currentPageIndex", 5);

defaultDropDownWidth
継承

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

ページサイズおよびページインデックスドロップダウン用のドロップダウンの幅。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            defaultDropDownWidth : 100
        }
    ]
});
 
//Get
var width = $(".selector").igTreeGridPaging("option", "defaultDropDownWidth");
 
//Set
$(".selector").igTreeGridPaging("option", "defaultDropDownWidth", 100);

delayOnPageChanged
継承

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

ページを変更する前に、キー入力までのページドロップダウンの待機時間 (ミリ秒)。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            delayOnPageChanged : 500
        }
    ]
});
 
//Get
var delayOnPageChanged = $(".selector").igTreeGridPaging("option", "delayOnPageChanged");

firstPageLabelText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
最初のページラベルのローカライズ済みテキスト。locale.firstPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            firstPageLabelText : "First"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "firstPageLabelText");
 
//Set
$(".selector").igTreeGridPaging("option", "firstPageLabelText", "First");

firstPageTooltip
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
最初のページボタン用のカスタムのローカライズ済みツールチップ。locale.firstPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            firstPageTooltip : "Go to first page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igTreeGridPaging("option", "firstPageTooltip");
 
//Set
$(".selector").igTreeGridPaging("option", "firstPageTooltip", "Go to first page");

lastPageLabelText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
最後のページラベルのローカライズ済みテキスト。locale.lastPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            lastPageLabelText : "Last"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "lastPageLabelText");
 
//Set
$(".selector").igTreeGridPaging("option", "lastPageLabelText", "Last");

lastPageTooltip
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
最後のページボタン用のカスタムのローカライズ済みツールチップ。locale.lastPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            lastPageTooltip : "Go to last page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igTreeGridPaging("option", "lastPageTooltip");
 
//Set
$(".selector").igTreeGridPaging("option", "lastPageTooltip", "Go to last page");

locale

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

contextRowLoadingText

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

ブレッドクラム/親行の処理でコンテキスト行のコンテンツを読み込んでいるときに表示されるテキストメッセージを取得または設定します。$.html() によって設定されます。null に設定される場合、読み込みメッセージは表示されません。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: "breadcrumb",
            locale: {
                contextRowLoadingText:"Loading context row"
            }
        }
    ]
});
 
//Get
var loadingText = $(".selector").igTreeGridPaging("option", "locale").contextRowLoadingText;
 
//Set
$(".selector").igTreeGridPaging("option", "locale", { "contextRowLoadingText": "Loading context row"} );

contextRowRootText

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

ページの最初のレコードがルートレコード (先祖がない) の場合、コンテキスト行のコンテンツを取得または設定します。$.html() によって設定されます。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: 'breadcrumb',
            locale: {
                contextRowRootText: "First page"
            }
        }
    ]
});
 
//Get
var rootText = $(".selector").igTreeGridPaging("option", "locale").contextRowRootText;
 
//Set
$(".selector").igTreeGridPaging("option", "locale", { "contextRowRootText": "First page" });

currentPageDropDownLeadingLabel
継承

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

ページインデックスを切り替えることができる、ドロップダウンの先頭ラベルテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            currentPageDropDownLeadingLabel: "Current Page"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").currentPageDropDownLeadingLabel;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { currentPageDropDownLeadingLabel: "Current Page" });

currentPageDropDownTooltip
継承

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

ページインデックスドロップダウンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            currentPageDropDownTooltip: "Choose Page"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").currentPageDropDownTooltip;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { currentPageDropDownTooltip: "Choose Page" });

currentPageDropDownTrailingLabel
継承

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

ページインデックスを切り替えることができる、ドロップダウンの後続ラベルテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            currentPageDropDownTrailingLabel: "Pages"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").currentPageDropDownTrailingLabel;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { currentPageDropDownTrailingLabel: "Pages" });

firstPageLabelText
継承

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

最初のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            firstPageLabelText: "First "
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").firstPageLabelText;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { firstPageLabelText: "First " });

firstPageTooltip
継承

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

最初のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            firstPageTooltip: "Go to first page"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").firstPageTooltip;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { firstPageTooltip: "Go to first page" });

lastPageLabelText
継承

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

最後のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            lastPageLabelText: "Last "
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").lastPageLabelText;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { lastPageLabelText: "Last " });

lastPageTooltip
継承

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

最後のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            lastPageTooltip: "Go to last page"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").lastPageTooltip;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { lastPageTooltip: "Go to last page" });

nextPageLabelText
継承

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

次のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            nextPageLabelText: "Next "
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").nextPageLabelText;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { nextPageLabelText: "Next " });

nextPageTooltip
継承

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

次のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            pageTooltipFormat: "Go to next page"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").pageTooltipFormat;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { pageTooltipFormat: "Go to next page" });

pagerRecordsLabelTemplate
継承

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

igTemplating のスタイルおよび構文でのカスタムページャーレコードラベルテンプレート。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            pagerRecordsLabelTemplate: "From ${startRecord} to ${endRecord} of ${recordCount}"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").pagerRecordsLabelTemplate;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { pagerRecordsLabelTemplate: "From ${startRecord} to ${endRecord} of ${recordCount}" });

pagerRecordsLabelTooltip
継承

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

ページャーレコードラベル用のツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            pagerRecordsLabelTooltip: "Current records"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").pagerRecordsLabelTooltip;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { pagerRecordsLabelTooltip: "Current records" });

pageSizeDropDownLabel
継承

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

showPageSizeDropDown が true に設定される場合、ページサイズドロップダウンの前に描画されるテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            pageSizeDropDownLabel: "Show "
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").pageSizeDropDownLabel;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { pageSizeDropDownLabel: "Show " });

pageSizeDropDownTooltip
継承

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

ページサイズドロップダウンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            pageSizeDropDownTooltip: "Choose page size"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").pageSizeDropDownTooltip;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { pageSizeDropDownTooltip: "Choose page size" });

pageSizeDropDownTrailingLabel
継承

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

showPageSizeDropDown が true に設定される場合、ページサイズドロップダウンの後に描画されるテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            pageSizeDropDownTrailingLabel: "Show "
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").pageSizeDropDownTrailingLabel;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { pageSizeDropDownTrailingLabel: "Show " });

pageTooltipFormat
継承

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

特定のページに移動するボタンのツールチップテキストのテンプレート。書式文字列は以下の igTemplating スタイルおよび構文が必要です。
pageCountLimit オプションも参照してください。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            pageTooltipFormat: "Page ${index}"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").pageTooltipFormat;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { pageTooltipFormat: "Page ${index}" });

prevPageLabelText
継承

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

前のページラベルのテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            prevPageLabelText: "Previous "
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").prevPageLabelText;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { prevPageLabelText: "Previous " });

prevPageTooltip
継承

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

前のページボタンのツールチップテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        locale: {
            prevPageTooltip: "Go to previous page"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridPaging("option", "locale").prevPageTooltip;
 
//  Set
$(".selector").igTreeGridPaging("option", "locale", { prevPageTooltip: "Go to previous page" });

mode

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

ページングモードを取得または設定します。

メンバー

rootLevelOnly
タイプ:string
ツリーグリッドのルートのレコードのみページで表示されます。
allLevels
タイプ:string
ページングですべての表示されているレコードを含みます。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            mode : "allLevels"
        }
    ]
});
//Get
var mode = $(".selector").igTreeGridPaging("option", "mode");

nextPageLabelText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
次のページラベルのローカライズ済みテキスト。locale.nextPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            nextPageLabelText : "Next"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "nextPageLabelText");
 
//Set
$(".selector").igTreeGridPaging("option", "nextPageLabelText", "Next");

nextPageTooltip
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
次のページボタン用のカスタムのローカライズ済みツールチップ。locale.nextPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            nextPageTooltip : "Go to next page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igTreeGridPaging("option", "nextPageTooltip");
 
//Set
$(".selector").igTreeGridPaging("option", "nextPageTooltip", "Go to next page");

pageCountLimit
継承

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

ページインデックスのドロップダウンリストを表示するためのページの最小数を取得または設定します。このオプション以下の場合、ページの数はページボタンが表示されます。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            pageCountLimit : 5
        }
    ]
});
 
//Get
var count = $(".selector").igTreeGridPaging("option", "pageCountLimit");
 
//Set
$(".selector").igTreeGridPaging("option", "pageCountLimit", 5);

pageIndexUrlKey
継承

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

現在要求されているページインデックスを説明するエンコードされた URL パラメーターの名前を示します。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            pageIndexUrlKey: "page"
        }
    ]
});
 
//Get
var key = $(".selector").igTreeGridPaging("option", "pageIndexUrlKey");
 
//Set
$(".selector").igTreeGridPaging("option", "pageIndexUrlKey", "page");

pagerRecordsLabelTemplate
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
igTemplating のスタイルおよび構文でのカスタムページャーレコードラベルテンプレート。
locale.pagerRecordsLabelTemplate オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            pagerRecordsLabelTemplate : "From ${startRecord} to ${endRecord} of ${recordCount}"
        }
    ]
});
 
//Get
var labelTemplate = $(".selector").igTreeGridPaging("option", "pagerRecordsLabelTemplate");
 
//Set
$(".selector").igTreeGridPaging("option", "pagerRecordsLabelTemplate", "From ${startRecord} to ${endRecord} of ${recordCount}");

pagerRecordsLabelTooltip
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
ページャーレコードラベルのローカライズされたカスタムツールチップ。locale.pagerRecordsLabelTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            pagerRecordsLabelTooltip : "Current records"
        }
    ]
});
 
//Get
var labelTemplate = $(".selector").igTreeGridPaging("option", "pagerRecordsLabelTooltip");
 
//Set
$(".selector").igTreeGridPaging("option", "pagerRecordsLabelTooltip", "Current records");

pageSize
継承

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

1 ページあたりのデフォルトのレコード数。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            pageSize: 10
        }
    ]
});
 
//Get
var pageSize = $(".selector").igTreeGridPaging("option", "pageSize");
 
//Set
$(".selector").igTreeGridPaging("option", "pageSize", 10);

pageSizeDropDownLabel
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
showPageSizeDropDown が true に設定される場合、ページサイズドロップダウンの前に描画されるテキスト。
locale.pageSizeDropDownLabel オプションを使用します。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            pageSizeDropDownLabel: "Rows"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "pageSizeDropDownLabel");
 
//Set
$(".selector").igTreeGridPaging("option", "pageSizeDropDownLabel", "Rows");

pageSizeDropDownLocation
継承

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

showPageSizeDropDown が true の場合のページサイズドロップダウンの位置。グリッドヘッダー上、ページャー内、またはページリンクの隣に描画できます。

メンバー

above
タイプ:string
グリッドヘッダーの上に描画されます。
inpager
タイプ:string
ページリンクの隣に描画されます。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            pageSizeDropDownLocation: "inpager"
        }
    ]
});
//Get
var location = $(".selector").igTreeGridPaging("option", "pageSizeDropDownLocation");
//Set
$(".selector").igTreeGridPaging("option", "pageSizeDropDownLocation", "inpager");

pageSizeDropDownTooltip
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
ページサイズドロップダウン用のカスタムのローカライズ済みツールチップ。locale.pageSizeDropDownTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            pageSizeDropDownTooltip : "Choose page size"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igTreeGridPaging("option", "pageSizeDropDownTooltip");
 
//Set
$(".selector").igTreeGridPaging("option", "pageSizeDropDownTooltip", "Choose page size");

pageSizeDropDownTrailingLabel
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
showPageSizeDropDown が true に設定される場合、ページサイズドロップダウンの後に描画されるテキスト。
locale.pageSizeDropDownTrailingLabel オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            pageSizeDropDownTrailingLabel : "Rows"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "pageSizeDropDownTrailingLabel");
 
//Set
$(".selector").igTreeGridPaging("option", "pageSizeDropDownTrailingLabel", "Rows");

pageSizeList
継承

タイプ:: enumeration
デフォルト:: []

グリッドヘッダーのドロップダウンに配置されるグリッドのページサイズに変更可能な定義済みのページサイズ。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            pageSizeList : [10, 20, 30]
        }
    ]
});
//Get
var pagesList = $(".selector").igTreeGridPaging("option", "pageSizeList");
//Set
$(".selector").igTreeGridPaging("option", "pageSizeList", "10,20,30,40");

pageSizeUrlKey
継承

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

現在要求されているページサイズを説明するエンコードされた URL パラメーターの名前を示します。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            pageSizeUrlKey: "psize"
        }
    ]
});
 
//Get
var key = $(".selector").igTreeGridPaging("option", "pageSizeUrlKey");
 
//Set
$(".selector").igTreeGridPaging("option", "pageSizeUrlKey", "psize");

pageTooltipFormat
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
特定のページに移動するボタンのツールチップのカスタムローカライズされた書式文字列。書式文字列は以下の igTemplating スタイルおよび構文が必要です。pageCountLimit オプションも参照してください。
locale.pageTooltipFormat オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            pageTooltipFormat : "Open page"
        }
    ]
});
 
//Get
var key = $(".selector").igTreeGridPaging("option", "pageTooltipFormat");
 
//Set
$(".selector").igTreeGridPaging("option", "pageTooltipFormat", "Open page");

persist
継承

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

状態間でページングの永続化を有効/無効にします。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
features : [
    {
        name : "Paging",
        persist : false
    }
]
});
 
//Get
var persist = $(".selector").igTreeGridPaging("option", "persist");
 
//Set
$(".selector").igTreeGridPaging("option", "persist", true);

prevPageLabelText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
前のページラベルのローカライズ済みテキスト。locale.prevPageLabelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            prevPageLabelText : "Previous"
        }
    ]
});
 
//Get
var label = $(".selector").igTreeGridPaging("option", "prevPageLabelText");
 
//Set
$(".selector").igTreeGridPaging("option", "prevPageLabelText", "Previous");

prevPageTooltip
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
前のページボタン用のカスタムのローカライズ済みツールチップ。locale.prevPageTooltip オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            prevPageTooltip : "Go to previous page"
        }
    ]
});
 
//Get
var tooltip = $(".selector").igTreeGridPaging("option", "prevPageTooltip");
 
//Set
$(".selector").igTreeGridPaging("option", "prevPageTooltip", "Go to previous page");

recordCountKey
継承

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

データソース内のレコードの総数を保持する応答内のプロパティ。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            recordCountKey: "totalCount"
        }
    ]
});
 
//Get
var totalCount = $(".selector").igTreeGridPaging("option", "recordCountKey");
 
//Set
$(".selector").igTreeGridPaging("option", "recordCountKey", "totalCount");

renderContextRowFunc

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

コンテキスト行のコンテンツ (読み込みメッセージ、ブレッドクラム、親行) を描画する前に呼び出された関数への参照 (または名前)。関数は 4 つの引数を取得します。dataRow、$textArea - コンテキスト行のテキスト領域の jQuery 表現 (モードが loading または breadcrumb の場合は <span />、それ以外の場合は <tr />)、親行の配置、およびコンテキストモード ("loading"|"breadcrumb"|"parent")。関数が文字列を返す場合、その文字列は $textArea に設定される HTML として使用されます。関数が結果を返さないか、false または空の文字列を返す場合、コンテキスト行のコンテンツの描画をキャンセルする場合のように、コンテキスト行のコンテンツの描画は開発者が処理する必要があります。

コードサンプル

var contextRowFunc = function(dataRow, $textArea, parents, mode) {
    var contextRowText = "<div>";
    $(parents).each(function(index) {
        contextRowText += "<div> Parent " + index + " :" + this.row["firstName"] + " " + this.row["lastName"] + "</div>";
    });
    contextRowText += "</div>";
    return contextRowText;
}
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            contextRowMode: 'breadcrumb',
            renderContextRowFunc: contextRowFunc
        }
    ]
});
//Get
var contextRowFunc = $(".selector").igTreeGridPaging("option", "renderContextRowFunc");
//Set
$(".selector").igTreeGridPaging("option", "renderContextRowFunc", contextRowFunc);

showFirstLastPages
継承

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

最初のページボタンと最後のページボタンを描画するかどうかを指定するオプション。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            showFirstLastPages : false
        }
    ]
});
 
//Get
var showFirstLast = $(".selector").igTreeGridPaging("option", "showFirstLastPages");
 
//Set
$(".selector").igTreeGridPaging("option", "showFirstLastPages", false);

showPagerRecordsLabel
継承

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

現在描画されているレコードのサマリーラベルを表示するかどうかを指定するオプション。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            showPagerRecordsLabel: false
        }
    ]
});
 
//Get
var showRecordsLabel = $(".selector").igTreeGridPaging("option", "showPagerRecordsLabel");
 
//Set
$(".selector").igTreeGridPaging("option", "showPagerRecordsLabel", false);

showPageSizeDropDown
継承

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

False の場合、ページサイズの変更を許すドロップダウンは UI に描画されません。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            showPageSizeDropDown: false
        }
    ]
});
 
//Get
var showDropDown = $(".selector").igTreeGridPaging("option", "showPageSizeDropDown");
 
//Set
$(".selector").igTreeGridPaging("option", "showPageSizeDropDown", false);

showPrevNextPages
継承

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

前のページボタンと次のページボタンを描画するかどうかを指定するオプション。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            showPrevNextPages : false
        }
    ]
});
 
//Get
var showPages = $(".selector").igTreeGridPaging("option", "showPrevNextPages");
 
//Set
$(".selector").igTreeGridPaging("option", "showPrevNextPages", false);

type
継承

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

ページングのタイプ。すべてのページング機能を $.ig.DataSource にデリゲートします。

メンバー

remote
タイプ:string
ページングがリモートエンドポイントにより実行されます。
local
タイプ:string
ページングは $.ig.DataSource によってローカルで実行されます。

コードサンプル

// Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Paging",
            type: "local"
        }
    ]
});
//Get
var type = $(".selector").igTreeGridPaging("option", "type");
//Set
$(".selector").igTreeGridPaging("option", "type", "local");

visiblePageCount
継承

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

アクティブページに隣接および含む、常に表示されているページボタン数。非表示のページの場合、前ボタンおよび次ボタンを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Paging",
            visiblePageCount : 10
        }
    ]
});
 
//Get
var visCount = $(".selector").igTreeGridPaging("option", "visiblePageCount");
 
//Set
$(".selector").igTreeGridPaging("option", "visiblePageCount", 10);

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

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

詳細の表示

contextRowRendered

キャンセル可能:: false

コンテキスト行のコンテンツが描画されるときに発生するイベント。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingcontextrowrendered", ".selector", function (evt, ui) {
//return the triggered event
    evt;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the first data row
    ui.dataRow;
 
    //  Get array of the parent rows(of the ui.dataRow)
    ui.parentRows;
 
 
    //  Get current page index
    ui.currentPageIndex;
 
    //  Get the current context row mode.
    ui.owner.contextRowMode;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        contextRowRendered: function (evt, ui) { ... }
    }]
});

contextRowRendering

キャンセル可能:: true

コンテキスト行のコンテンツを描画する前に発生するイベント。
このイベントをキャンセルするには、false を返します。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingcontextrowrendering", ".selector", function (evt, ui) {
//return the triggered event
    evt;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the first data row
    ui.dataRow;
 
    //  Get current page index
    ui.currentPageIndex;
 
    //  Get the current context row mode.
    ui.contextRowMode;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        contextRowRendering: function (evt, ui) { ... }
    }]
});

pageIndexChanged
継承

キャンセル可能:: false

ページインデックスが変更された後、ただしグリッドデータの再バインドの前に発生するイベント。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingpageindexchanged", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igTreeGrid widget to which the igTreeGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page index
    ui.pageIndex;
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        pageIndexChanged: function (evt, ui) { ... }
    }]
});

pageIndexChanging
継承

キャンセル可能:: true

ページインデックスが変更される前に発生するイベント。
ページインデックスの変更をキャンセルするには、false を返します。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingpageindexchanging", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igTreeGrid widget to which the igTreeGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page index
    ui.currentPageIndex;
 
    //  Get the index of the page that is about to be opened
    ui.newPageIndex;
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        pageIndexChanging: function (evt, ui) { ... }
    }]
});

pagerRendered
継承

キャンセル可能:: false

ページャーのフッターが描画された後に発生するイベント。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingpagerrendered", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igTreeGrid widget to which the igTreeGridPaging is bound
    ui.owner.grid;
 
    //  Get the data source of the grid
    ui.dataSource;
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        pagerRendered: function (evt, ui) { ... }
    }]
});

pagerRendering
継承

キャンセル可能:: true

ページャーフッター (グリッドレコードの下の領域全体) が描画される前に発生するイベント。
ページャーのフッターの描画をキャンセルするには、false を返します。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingpagerrendering", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igTreeGrid widget to which the igTreeGridPaging is bound
    ui.owner.grid;
 
    //  Get the data source of the grid
    ui.dataSource;
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        pagerRendering: function (evt, ui) { ... }
    }]
});

pageSizeChanged
継承

キャンセル可能:: false

ページサイズドロップダウンからページサイズが変更された後に発生するイベント。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingpagesizechanged", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igTreeGrid widget to which the igTreeGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page size in the grid
    ui.pageSize;
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        pageSizeChanged: function (evt, ui) { ... }
    }]
});

pageSizeChanging
継承

キャンセル可能:: true

ページサイズドロップダウンからページサイズが変更されようとしているときに発生するイベント。
ページサイズの変更をキャンセルするには、false を返します。

evt
タイプ: Event

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

コードサンプル

//Bind after initialization
$(document).on("igtreegridpagingpagesizechanging", ".selector", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //  Get a reference to the igTreeGridPaging widget that fired the event
    ui.owner;
 
    //  Get a reference to the igTreeGrid widget to which the igTreeGridPaging is bound
    ui.owner.grid;
 
    //  Get the current page size in the grid
    ui.currentPageSize;
 
    //  Get the new page size in the grid that is about to be set
    ui.newPageSize;
});
 
//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Paging",
        pageSizeChanging: function (evt, ui) { ... }
    }]
});

詳細の表示

changeLocale

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

$(".selector").igTreeGridPaging("changeLocale");
destroy

.igTreeGridPaging( "destroy" );
ページャー領域のすべての要素を削除、イベントのバインドを解除、およびページングのデータフィルタリングを破棄してデータをリセットして igTreeGridPaging 機能を破棄します。
コードサンプル

$(".selector").igTreeGridPaging("destroy");
getContextRow

.igTreeGridPaging( "getContextRow" );

返却型:

object

返却型の説明:

コンテキスト行の jQuery 表現。
コンテキスト行の jQuery 表現を取得します。ヘッダーで描画されます。その要素がない場合、作成されます。
コードサンプル

$(".selector").igTreeGridPaging("getContextRow");
getContextRowTextArea

.igTreeGridPaging( "getContextRowTextArea" );

返却型:

object

返却型の説明:

コンテキスト行のテキスト領域の jQuery 表現。
コンテキスト行のテキスト領域を持つ要素の jQuery 表現を取得します。その要素がない場合、作成されます。
コードサンプル

$(".selector").igTreeGridPaging("getContextRowTextArea");
pageIndex
継承

.igTreeGridPaging( "pageIndex", [index:number] );

返却型:

number

返却型の説明:

パラメーターが指定していない場合、現在のページインデックスを返します。
現在のページインデックスを取得または設定し、データバインドとページングを $.ig.DataSource にデリゲートします。
- index
- タイプ:number
- オプション
- 移動先のページインデックス。
コードサンプル

//Get
var index = $(".selector").igTreeGridPaging("pageIndex");

//Set
$(".selector").igTreeGridPaging("pageIndex", 4);
pageSize
継承

.igTreeGridPaging( "pageSize", [size:number] );

返却型:

number

返却型の説明:

パラメーターが指定していない場合、現在のページサイズを返します。
ページサイズを取得または設定します。パラメーターを指定しない場合、単に現在のページサイズを返します。
- size
- タイプ:number
- オプション
- ページサイズ。
コードサンプル

//Get
var size = $(".selector").igTreeGridPaging("pageSize");

//Set
$(".selector").igTreeGridPaging("pageSize", 16);

ui-igtreegrid-contextrow

ページングコンテキスト行 (<TR>) に適用されるクラス。
ui-igtreegrid-contextrow-content

コンテキスト行のコンテンツを表示する要素に適用されるクラス。
ui-igtreegrid-contextrow-icon ui-icon ui-icon-bookmark

コンテキスト行のアイコンを表示する要素に適用されるクラス。
ui-igtreegrid-contextrow-container

コンテキスト行の SPAN およびコンテキスト行アイコンの SPAN を含むコンテキスト行コンテナーを持つ要素に適用されるクラス。
ui-iggrid-firstpage ui-iggrid-paging-item ui-state-default ui-corner-left

最初のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-firstpageimg ui-icon ui-icon-arrowstop-1-w

アイコンのスパンを保持する最初のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-firstpageimgdisabled ui-icon ui-state-disabled ui-icon-arrowstop-1-w

アイコンが無効のときにそのスパンを保持する最初のページ領域に適用されるクラス。
ui-iggrid-firstpagelabel

最初のページのラベル (スパン) に適用されるクラス。
ui-iggrid-firstpagelabeldisabled ui-state-disabled

最初のページが無効のときにそのラベル (スパン) に適用されるクラス。
ui-iggrid-lastpage ui-iggrid-paging-item ui-state-default ui-corner-right

最後のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-lastpageimg ui-icon ui-icon-arrowstop-1-e

アイコンのスパンを保持する最後のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-lastpageimgdisabled ui-icon ui-state-disabled ui-icon-arrowstop-1-e

アイコンが無効のときにそのスパンを保持する最後のページ領域に適用されるクラス。
ui-iggrid-lastpagelabel

最後のページのラベル (span) に適用されるクラス。
ui-iggrid-lastpagelabeldisabled ui-state-disabled

最後のページが無効のときにそのラベル (スパン) に適用されるクラス。
ui-iggrid-nextpage ui-iggrid-paging-item ui-state-default

次のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-nextpageimg ui-icon ui-icon-triangle-1-e

アイコンのスパンを保持する次のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-nextpageimgdisabled ui-icon ui-state-disabled ui-icon-triangle-1-e

アイコンが無効のときにそのスパンを保持する次のページ領域に適用されるクラス。
ui-iggrid-nextpagelabel

次のページのラベル (span) に適用されるクラス。
ui-iggrid-nextpagelabeldisabled ui-state-disabled

次のページが無効のときにそのラベル (スパン) に適用されるクラス。
ui-iggrid-page ui-state-default ui-corner-all

ページコンテナー要素 (リスト項目) に適用されるクラス。
ui-iggrid-pagecurrent ui-state-active ui-corner-all

現在のページ (現在のページインデックスに対応する) に適用されるクラス。
ui-iggrid-pagedropdown

そこからページインデックスを変更できるエディタードロップダウンに適用されるクラス。
ui-iggrid-pagedropdowncontainer

そこからページインデックスを変更できるエディタードロップダウンを保持する要素に適用されるクラス。
ui-iggrid-pagedropdownlabels

そこからページインデックスを変更できるエディタードロップダウンの前後のスパンに適用されるクラス。
ui-iggrid-pagefocused ui-state-focus

(キーボードでのナビゲーションを使用するときに) フォーカスのある現在のページに適用されるクラス。
ui-iggrid-page-hover ui-state-hover

ページリスト項目がホバー状態のときに、その項目に適用されるクラス。
ui-iggrid-pagelink ui-helper-reset

マウスでクリックできるページリンクに適用されるクラス。
ui-iggrid-pagelinkcurrent

現在のページ項目のアンカーに適用されるクラス。
ui-helper-reset ui-iggrid-pagelist ui-iggrid-paging-item

すべてのページを保持する UL リストに適用されるクラス。
ui-widget ui-iggrid-pager ui-helper-clearfix ui-corner-bottom ui-widget-header ui-iggrid-footer

ページャー領域に適用されるクラス。
ui-iggrid-pagerrecordslabel ui-iggrid-results

あるレコード総数のうち描画されるレコード数を表示するラベルに適用されるクラス。
ui-iggrid-paging

最初、最後、前、次の各ボタン、ページリンク、およびページインデックスドロップダウンが描画されるフッターの右側の領域に適用されるクラス。
ui-iggrid-pagesizedropdown

そこからページサイズを変更できるエディタードロップダウンに適用されるクラス。
ui-helper-clearfix ui-iggrid-pagesizedropdowncontainer

ページサイズドロップダウンを保持する要素に適用されるクラス。
ui-widget ui-helper-clearfix ui-iggrid-pagesizedropdowncontainerabove ui-iggrid-toolbar ui-widget-header and ui-corner-top

ページサイズドロップダウンエディターのコンテナーがヘッダーの上に描画されるときに、そのコンテナーに適用されるクラス。
ui-iggrid-pagesizelabel

そこからページサイズを変更できるエディタードロップダウンラベルに適用されるクラス。
ui-iggrid-results

ある合計値から現在描画されるレコードインデックスを表示するラベルに適用されるクラス。
ui-iggrid-prevpage ui-iggrid-paging-item ui-state-default

前のページボタンおよびラベルが描画される領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-prevpageimg ui-icon ui-icon-triangle-1-w

アイコンのスパンを保持する前のページ領域に適用されるクラス。
ui-iggrid-pageimg ui-iggrid-prevpageimgdisabled ui-icon ui-state-disabled ui-icon-triangle-1-w

アイコンが無効のときにそのスパンを保持する前のページ領域に適用されるクラス。
ui-iggrid-prevpagelabel

前のページのラベル (span) に適用されるクラス。
ui-iggrid-prevpagelabeldisabled ui-state-disabled

前のページが無効のときにそのラベル (スパン) に適用されるクラス。

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

ui.igTreeGridPaging

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル