mobile.igListView

mobile.igListView_image

igListView は、モバイル環境でリスト機能を提供する jQuery コントロールです。このコントロールには、テンプレート化、フィルタリング、並べ替え、グループ化、ロード オン デマンド、および階層ナビゲーション機能があります。

igListView コントロールは igList コントロールを拡張し、階層機能を追加します。

igListView コントロールは、標準 jQuery 初期化とともにマークアップ ベース初期化と構成を使用する jQuery Mobile アプローチを順守します。igListView コントロールの HTML data-* 属性の詳細については、igListView データ属性リファレンスを参照してください。

以下のコードは、igListView コントロールの初期化方法を示します。

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

コード サンプル

 
        <!doctype html>
        <html>
        <head>
            <!-- jQuery Mobile Styles -->
            <link rel="stylesheet" href="../content/jqm/jquery.mobile.structure.min.css" />
            <!-- jQuery Core -->
            <script type="text/javascript" src="js/jquery.js"></script>
            <!-- jQuery Mobile Core -->
            <script type="text/javascript" src="js/jquery.mobile.js"><script>
            <!-- Infragistics mobile loader -->
            <script type="text/javascript" src="js/infragistics.mobile.loader.js"></script>
            <script type="text/javascript">
                var northwindEmployees = [
                    { "ID": 1, "Name": "Davolio, Nancy", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/1.png", "Phone": "(206) 555-9857", "PhoneUrl": "tel:(206) 555-9857" },
                    { "ID": 2, "Name": "Fuller, Andrew", "Title": "Vice President, Sales", "ImageUrl": "../content/images/nw/employees/2.png", "Phone": "(206) 555-9482", "PhoneUrl": "tel:(206) 555-9482" },
                    { "ID": 3, "Name": "Leverling, Janet", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/3.png", "Phone": "(206) 555-3412", "PhoneUrl": "tel:(206) 555-3412" },
                    { "ID": 4, "Name": "Peacock, Margaret", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/4.png", "Phone": "(206) 555-8122", "PhoneUrl": "tel:(206) 555-8122" },
                    { "ID": 5, "Name": "Buchanan, Steven", "Title": "Sales Manager", "ImageUrl": "../content/images/nw/employees/5.png", "Phone": "(71) 555-4848", "PhoneUrl": "tel:(71) 555-4848" },
                    { "ID": 6, "Name": "Suyama, Michael", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/6.png", "Phone": "(71) 555-7773", "PhoneUrl": "tel:(71) 555-7773" },
                    { "ID": 7, "Name": "King, Robert", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/7.png", "Phone": "(71) 555-5598", "PhoneUrl": "tel:(71) 555-5598" },
                    { "ID": 8, "Name": "Callahan, Laura", "Title": "Inside Sales Coordinator", "ImageUrl": "../content/images/nw/employees/8.png", "Phone": "(206) 555-1189", "PhoneUrl": "tel:(206) 555-1189" },
                    { "ID": 9, "Name": "Dodsworth, Anne", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/9.png", "Phone": "(71) 555-4444", "PhoneUrl": "tel:(71) 555-4444" }
                ];
            </script>
            <script type="text/javascript">
                $.ig.loader({
                    scriptPath: "js",
                    cssPath: "css",
                    resources: "igmList",
                    theme: "ios"
                });
            </script>
        </head>
        <body>
            <ul id="contactsListView"
                data-role="iglistview"
                data-icon-mode="thumbnail"
                data-data-source="northwindEmployees" 
                data-bindings-header-key="Name"
                data-bindings-primary-key="ID"
                data-bindings-text-key="Phone"
                data-bindings-image-url-key="ImageUrl">
            </ul>
        </body>
        </html>

関連サンプル

関連トピック

依存関係

jquery-1.7.2.js
jquery.mobile-1.2.0.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.util.js

  • autoGenerateLayouts

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

    true の場合、「key」のデフォルト値として見なされるすべてのレイアウトが自動生成されます。

    コード サンプル

     
        //Initialize
        $(".selector").igListView({
            autoGenerateLayouts: true
        });
        
        //Get
        var autoLayouts = $(".selector").igListView("option", "autoGenerateLayouts");

  • childLayout

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

    子リストのオプションを定義するオブジェクト。フラット リストに適用されるすべてのオプションが、ここでも適用されます。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                childLayout: {
                    key: "Products"
                }
            });
            
            //Get
            var autoLayouts = $(".selector").igListView("option", "childLayout");

    • key

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

      columnLayout キーを指定します。これは、子レイアウトのデータ レコードを保持するプロパティになります。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                childLayout: {
                    key: "Products"
                }
            });
            
            //Get
            var autoLayouts = $(".selector").igListView("option", "childLayout");

  • defaultChildrenDataProperty

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

    子供が位置する応答内にデフォルトのプロパティを指定します。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                defaultChildrenDataProperty : "Products"
            });
            
            //Get
            var childrenProperty = $(".selector").igListView("option", "defaultChildrenDataProperty");

  • initialDataBindDepth

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

    最初は先頭のレベルだけがデータ バウンドになります。また「描画」の深さとしての機能を果たします。つまり、このプロパティによって、リストは機能します。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                initialDataBindDepth : -1
            });
            
            //Get
            var bindDepth = $(".selector").igListView("option", "initialDataBindDepth");

  • initSelector

    タイプ:
    string
    デフォルト:
    ":jqmData(role=iglistview)"

    このウィジェットに変換される html 要素を見つけるためにデフォルトで使用されるセレクターです。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                initSelector: ":jqmdata(role=iglistview)"
            });
            
            //Get
            var initSelector = $(".selector").igListView("option", "initSelector");

  • odata

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

    true の場合、OData 変換と $expand 構文を使ってすべての要求をエンコードします。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                odata: "true"
            });
            
            //Get
            var odata = $(".selector").igListView("option", "odata");

  • pathSeparator

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

    データの階層型検索用の、パスを構成するための区切り文字を指定します。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                pathSeparator: "/"
            });
            
            //Get
            var pathSeparator = $(".selector").igListView("option", "pathSeparator");

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

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

詳細の表示

  • childrenPopulated

    キャンセル可能:
    false

    子が生成されたときに発生するイベント (要求に応じて読み込み)。
    args.owner を使用して、階層型リスト オブジェクトにアクセスします。
    args.parentItem を使用して、生成された項目の li 要素にアクセスします。
    args.id を使用して、リスト項目のデータ ID を取得します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewchildrenpopulated", function (evt, ui) {
            //return data-id attribute of the list item
            ui.id;
            //return LI element for the item that was populated
            ui.parentitem;
            //return reference to igListView
            ui.owner;
        });
        
        //Initialize
        $(".selector").igListView({
            childrenPopulated: function(evt, ui) {...}
        });

  • childrenPopulating

    キャンセル可能:
    true

    子が生成されようとしているときに発生するイベント (要求に応じて読み込み)。
    args.owner を使用して、階層型リスト オブジェクトにアクセスします。
    args.parentitem を使用して、生成されようとしている項目の li 要素にアクセスします。
    args.id を使用して、リスト項目のデータ ID を取得します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewchildrenpopulating", function (evt, ui) {
            //return data-id attribute of the list item
            ui.id;
            //return LI element for the item that was populated
            ui.parentitem;
            //return reference to igListView
            ui.owner;
        });
        
        //Initialize
        $(".selector").igListView({
            childrenPopulating: function(evt, ui) {...}
        });

  • dataBind

    .dataBind( );

    階層型リストをデータ バインドします。initialExpandDepth >= 0 が設定されていない場合は、デフォルトでは子リストは作成または描画されません。

    コード サンプル

     
        $(".selector").igListView("dataBind");

  • destroy

    .destroy( );

    すべての子リストを再帰的に破棄して、階層型リストを破棄します。

    コード サンプル

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

  • root

    .root( );
    返却型:
    object
    返却型の説明:
    ルート リストの jQuery によってラップされた要素。

    ルート リスト (igList) の要素を返します。

    コード サンプル

     
        var root = $(".selector").igListView("root");

  • rootWidget

    .rootWidget( );
    返却型:
    object
    返却型の説明:
    ルート igList (igListView ではない) のウィジェット オブジェクト。

    ルート リスト (igList) のウィジェット オブジェクトを返します。

    コード サンプル

     
        var root = $(".selector").igListView("rootWidget");
このコントロールに css クラスはありません。

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