ui.igGridAppendRowsOnDemand

ui.igGridAppendRowsOnDemand_image

igGrid AppendRowsOnDemand 機能は、グリッドにデータを追加する機能を提供します。Automatic と Button の 2 つのモードがあります。

Automatic モードでは、ユーザーがグリッドの下へスクロールすると、データが追加されます。

Button モードでは、ユーザーがグリッドの下へスクロールし、「その他のデータを読み込む」ボタンを押すと、データが追加されます。

この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

以下のコード スニペットは、igGrid コントロールをロードオンデマンド機能と初期化する方法を示します。

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 infragisticsTweets = [
			{user: "infragistics", userName: "@infragistics", tweet: "Bitcoin Network Speed Breaks 1 Petahash per Second - The Genesis Block http://buff.ly/1f0nNHz", date: "8:35 AM - 23 Sep 13"},
			{user: "infragistics", userName: "@infragistics", tweet: "@BrentSchooley is visiting the Springfield MO .NET UG. Stop by on 9/24 to hear his Designing for Windows 8.1 talk! http://ow.ly/i/3bWHF", date: "7:15 AM - 23 Sep 13"},
			{user: "infragistics", userName: "@infragistics", tweet: "Doing Away With Bad Design Ideas http://buff.ly/1f0o910 ", date: "5:30 AM - 23 Sep 13"},
			{user: "infragistics", userName: "@infragistics", tweet: "Technical Evangelist Mihail Mateev will be at SQL Saturday. Will you? http://bit.ly/1dmvg1K  http://ow.ly/i/3b08W ", date: "3:10 AM - 23 Sep 13"},
			{user: "infragistics", userName: "@infragistics", tweet: "Indigo Studio v2.0 by @wireframesmag http://bit.ly/16IQVzv  http://ow.ly/i/3c8U7 ", date: "1:45 AM - 23 Sep 13"}
		];
		$(function () {
			$('#grid').igGrid({
			dataSource: infragisticsTweets,
			width: "400px",
			autoGenerateColumns: false,
			localSchemaTransform: false,
			columns: [{
				key: 'Tweets',
				dataType: 'string',
				headerText: 'Infragistics tweets',
				unbound: true,
				template: "<div style='float:left'><img src='infragistics.png' ></img></div><div class='tweet'><p style='height:20px'><span class='tweet-user'>${user}</span><span class='tweet-user-name'>${userName}</span><span class='tweet-date'>${date}</span></p><p class='tweet-text'>${tweet}</p></div>"
			}],
			features: [{
				name: 'AppendRowsOnDemand',
				chunkSize: 5,
				loadTrigger: "button"
			}]
			});
		});
	</script>
</head>
<body>
    <table id="grid"></table>
</body>
</html>

関連サンプル

依存関係

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

継承

  • chunkIndexUrlKey

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

    現在要求されている部分的なインデックスが何であるかを示すエンコードされた URL パラメータの名前を示します。

    コード サンプル

     
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
							chunkIndexUrlKey: "chunk"
						}
					]
				});

				//Get
				var chunkIndexUrlKey = $(".selector").igGridAppendRowsOnDemand("option", "chunkIndexUrlKey");

  • chunkSize

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

    部分毎のレコードのデフォルト数。

    コード サンプル

     
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
							chunkSize: 25
						}
					]
				});

				//Get
				var chunkSize = $(".selector").igGridAppendRowsOnDemand("option", "chunkSize");

  • chunkSizeUrlKey

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

    現在要求されている部分サイズが何であるかを示すエンコードされた URL パラメータの名前を示します。

    コード サンプル

     
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
							chunkSizeUrlKey: "chunkSize"
						}
					]
				});

				//Get
				var chunkSizeUrlKey = $(".selector").igGridAppendRowsOnDemand("option", "chunkSizeUrlKey");

  • currentChunkIndex

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

    現在の部分インデックスの位置。

    コード サンプル

     
				//Get
				var currentChunkIndex = $(".selector").igGridAppendRowsOnDemand("option", "currentChunkIndex");

  • defaultChunkIndex

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

    最初の部分インデックスの位置。

    コード サンプル

     
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
							defaultChunkIndex: 2
						}
					]
				});

				//Get
				var defaultChunkIndex = $(".selector").igGridAppendRowsOnDemand("option", "defaultChunkIndex");

  • loadMoreDataButtonText
    削除

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

    このオプションは 2017.2 バージョン以降サポートされません。
    [その他のデータを読み込む] ボタンのキャプションのテキストを指定します。locale.loadMoreDataButtonText オプションを使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
							loadMoreDataButtonText: "Load next chunk"
						}
					]
				});

				//Get
				var loadMoreDataButtonText = $(".selector").igGridAppendRowsOnDemand("option", "loadMoreDataButtonText");

  • loadTrigger

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

    オン デマンドで行の追加の要求メソッドを示します。

    メンバー

    • auto
    • タイプ:string
    • ユーザーがスクロールバーを使用するときに新しいレコードをグリッドに追加します。
    • button
    • タイプ:string
    • ボタンはグリッドの下側に描画されます。その他の行を読み込むためにユーザーがボタンを押す必要があります。

    コード サンプル

     
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
							loadTrigger: "button"
						}
					]
				});
				//Get
				var loadTrigger = $(".selector").igGridAppendRowsOnDemand("option", "loadTrigger");

  • locale

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

    • loadMoreDataButtonText

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

      [その他のデータを読み込む] ボタンのキャプションのテキストを指定します。

      コード サンプル

       
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
                            locale: { loadMoreDataButtonText : "Load next chunk"}
						}
					]
				});

				//Get
				var loadMoreDataButtonText = $(".selector").igGridAppendRowsOnDemand("option", "locale").loadMoreDataButtonText;

                //Set
                $(".selector").igGridAppendRowsOnDemand("option", "locale", {loadMoreDataButtonText : "Load next chunk"});

  • recordCountKey

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

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

    コード サンプル

     
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "AppendRowsOnDemand",
							recordCountKey: "totalRecords"
						}
					]
				});

				//Get
				var recordCountKey = $(".selector").igGridAppendRowsOnDemand("option", "recordCountKey");

  • type

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

    igGrid でオンデマンドで行の追加のローカル タイプまたはリモート タイプを定義します。

    メンバー

    • remote
    • タイプ:string
    • リモート エンドポイントからデータを要求します。
    • local
    • タイプ:string
    • クライアント側でデータを読み込みます。

    コード サンプル

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

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

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

詳細の表示

  • rowsRequested

    キャンセル可能:
    false

    要求された行がリモート エンドポイントから返された後で、グリッドがデータ バインドする前に発生するイベント。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

    • ui
      タイプ: Object

        • owner
          タイプ: Object

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

        • owner.grid
          タイプ: Object

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

        • chunkIndex
          タイプ: Number

          次の部分のインデックスを取得します。

        • chunkSize
          タイプ: Number

          部分サイズを取得します。

        • rows
          タイプ: Array

          要求された行を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("iggridappendrowsondemandrowsrequested", ".selector", function (evt, ui) {
					//return browser event
					evt.originalEvent;

					//	Get a reference to the igGridAppendRowsOnDemand widget that fired the event
					ui.owner;

					//	Get a reference to the igGrid widget to which the idGridAppendRowsOnDemand is bound
					ui.owner.grid;

					//	Get the current chunk index
					ui.chunkIndex;

					//	Get the chunk size
					ui.chunkSize;

					//	Get the requested rows
					ui.rows;
				});

				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "AppendRowsOnDemand",
						rowsRequested: function (evt, ui) { ... }
					}]
				});

  • rowsRequesting

    キャンセル可能:
    true

    行がリモート エンドポイントから要求される前に発生するイベント。
    行の要求をキャンセルするには、false を返します。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

    • ui
      タイプ: Object

        • owner
          タイプ: Object

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

        • owner.grid
          タイプ: Object

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

        • chunkIndex
          タイプ: Number

          次の部分のインデックスを取得します。

        • chunkSize
          タイプ: Number

          部分サイズを取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on( "iggridappendrowsondemandrowsrequesting", ".selector", function (evt, ui) {
					//return browser event
					evt.originalEvent;

					//	Get a reference to the igGridAppendRowsOnDemand widget that fired the event
					ui.owner;

					//	Get a reference to the igGrid widget to which the idGridAppendRowsOnDemand is bound
					ui.owner.grid;

					//	Get the next chunk index
					ui.chunkIndex;

					//	Get the next chunk size
					ui.chunkSize;
				});

				//Initialize
				$(".selector").igGrid({
					features: [{
						name: "AppendRowsOnDemand",
						rowsRequesting: function (evt, ui) { ... }
					}]
				});

  • destroy

    .igGridAppendRowsOnDemand( "destroy" );

    オン デマンドで行の追加ウィジェットを破棄します。

    コード サンプル

     
				$(".selector").igGridAppendRowsOnDemand("destroy");

  • nextChunk

    .igGridAppendRowsOnDemand( "nextChunk" );

    データの次の部分を読み込みます。

    コード サンプル

     
				$(".selector").igGridAppendRowsOnDemand("nextChunk");
このコントロールに css クラスはありません。

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