Ignite UI™ API ヘルプ

ui.igGridAppendRowsOnDemand

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>

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

コードサンプル

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

コードサンプル

//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");

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

ui.igGridAppendRowsOnDemand

コードサンプル

関連サンプル

依存関係

継承

chunkIndexUrlKey

コードサンプル

chunkSize

コードサンプル

chunkSizeUrlKey

コードサンプル

currentChunkIndex

コードサンプル

defaultChunkIndex

コードサンプル

loadMoreDataButtonText
削除

コードサンプル

loadTrigger

メンバー

コードサンプル

locale

loadMoreDataButtonText

コードサンプル

recordCountKey

コードサンプル

type

メンバー

コードサンプル

rowsRequested

コードサンプル

rowsRequesting

コードサンプル

destroy

コードサンプル

nextChunk

コードサンプル

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

ui.igGridAppendRowsOnDemand

コード サンプル

関連サンプル

依存関係

継承

コードサンプル