ui.igTreeGridPaging

ui.igTreeGridPaging_image

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>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.ui.treegrid.js
infragistics.util.js
infragistics.ui.grid.framework.js
infragistics.ui.grid.paging.js

継承

  • breadcrumbDelimiter

    タイプ:
    string
    デフォルト:
    " &gt; "

    ブレッドクラム トレイルで先祖の間の区切り記号を取得または設定します。$.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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • dataRow
          タイプ: Object

          最初のデータ行への参照を取得します。レコードがない場合は null 値。

        • currentPageIndex
          タイプ: Number

          現在のページ インデックスを取得します。

        • parentRows
          タイプ: Array

          ui.dataRow の親行の配列を取得します。dataRow が null、またはインスタンス フィルターが適用し、表示されるレコードがない場合、空の配列です。それ以外の場合、レベルによって並べ替えた現在の dataRow を含むすべての先祖を含みます。最初の項目はルート レベルで、最後の配列項目は現在の ui.dataRow です。

        • contextRowMode
          タイプ: String

          現在のコンテキスト行モードを取得します。

    コード サンプル

     
				//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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • dataRow
          タイプ: Object

          最初のデータ行への参照を取得します。レコードがない場合は null 値。

        • currentPageIndex
          タイプ: Number

          現在のページ インデックスを取得します。

        • contextRowMode
          タイプ: String

          現在のコンテキスト行モードを取得します。

    コード サンプル

     
				//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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • owner.grid
          タイプ: Object

          グリッドへの参照を取得します。

        • pageIndex
          タイプ: Number

          現在のページ インデックスを取得します。

    コード サンプル

     
				//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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • owner.grid
          タイプ: Object

          グリッドへの参照を取得します。

        • currentPageIndex
          タイプ: Number

          現在のページ インデックスを取得します。

        • newPageIndex
          タイプ: Number

          新しいページ インデックスを取得します。

    コード サンプル

     
				//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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • owner.grid
          タイプ: Object

          グリッドへの参照を取得します。

        • dataSource
          タイプ: 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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • owner.grid
          タイプ: Object

          グリッドへの参照を取得します。

        • dataSource
          タイプ: 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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • owner.grid
          タイプ: Object

          グリッドへの参照を取得します。

        • pageSize
          タイプ: Number

          現在のページ サイズを取得します。

    コード サンプル

     
				//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

        • owner
          タイプ: Object

          igTreeGridPaging への参照を取得します。

        • owner.grid
          タイプ: Object

          グリッドへの参照を取得します。

        • currentPageSize
          タイプ: Number

          現在のページ サイズを取得します。

        • newPageSize
          タイプ: Number

          新しいページ サイズを取得します。

    コード サンプル

     
				//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

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

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.