mobile.igListViewFiltering

mobile.igListViewFiltering_image

igListView コントロールでフィルター機能を提供します。リストをフィルターするには、コントロールは検索ボックスおよびフィルター プリセットをサポートします。フィルタリングはリモートまたはローカルに構成できます。igListView コントロールは、標準 jQuery 初期化とともにマークアップ ベース初期化と構成を使用する jQuery Mobile アプローチを順守します。igListView コントロールの HTML data-* 属性の詳細については、igListView データ属性リファレンスを参照してください。

以下のコードは、フィルタリング機能が有効な igListView コントロールの初期化方法を示します。

この API を使用した作業方法の詳細についてはここをクリックしてください。igList コントロールに必要なスクリプトおよびテーマの参照方法については、 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.Filtering",
                    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"
                data-filtering="true"
                data-filtering-search-bar-place-holder="Filter Contacts...">
            </ul>
        </body>
        </html>

関連サンプル

関連トピック

依存関係

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

  • caseSensitive

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

    フィルタリングの大文字小文字の区別を有効化／無効化します。

    メンバー

    • true
    • タイプ:bool
    • フィルタリングの大文字と小文字の区別を有効にします。
    • false
    • タイプ:bool
    • フィルタリングの大文字と小文字の区別を無効にします。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                dataSource: northwindEmployees,
                features: [
                    {
                        name: "Filtering",
                        caseSensitive: true
                    }
                ]
            });
            
            //Get
            var caseSensitive = $(".selector").igListViewFiltering("option", "caseSensitive");

  • filteredFields

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    フィルター処理されたフィールドを表すキー/値のペアのリスト (fieldName、searchValue、condition、logic) です。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                dataSource: northwindEmployees,
                features: [
                    {
                        name: "Filtering",
                        filteredFields: [
                            {
                                fieldName: "Name",
                                searchValue: "Davolio",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var filteredFields = $(".selector").igListViewFiltering("option", "filteredFields");

    • condition

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

      指定したフィールドをフィルターするための条件。

      メンバー

      • empty
      • タイプ:string
      • notEmpty
      • タイプ:string
      • null
      • タイプ:string
      • notNull
      • タイプ:string
      • equals
      • タイプ:string
      • doesNotEqual
      • タイプ:string
      • startsWith
      • タイプ:string
      • contains
      • タイプ:string
      • doesNotContain
      • タイプ:string
      • endsWith
      • タイプ:string
      • greaterThan
      • タイプ:string
      • lessThan
      • タイプ:string
      • greaterThanOrEqualTo
      • タイプ:string
      • lessThanOrEqualTo
      • タイプ:string
      • true
      • タイプ:bool
      • false
      • タイプ:bool
      • on
      • タイプ:string
      • notOn
      • タイプ:string
      • before
      • タイプ:string
      • after
      • タイプ:string
      • today
      • タイプ:string
      • yesterday
      • タイプ:string
      • thisMonth
      • タイプ:string
      • lastMonth
      • タイプ:string
      • nextMonth
      • タイプ:string
      • thisYear
      • タイプ:string
      • nextYear
      • タイプ:string
      • lastYear
      • タイプ:string

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                dataSource: northwindEmployees,
                features: [
                    {
                        name: "Filtering",
                        filteredFields: [
                            {
                                fieldName: "Name",
                                searchValue: "Davolio",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var filteredFields = $(".selector").igListViewFiltering("option", "filteredFields");

    • fieldName

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

      フィルターするフィールドの名前。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                dataSource: northwindEmployees,
                features: [
                    {
                        name: "Filtering",
                        filteredFields: [
                            {
                                fieldName: "Name",
                                searchValue: "Davolio",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var filteredFields = $(".selector").igListViewFiltering("option", "filteredFields");

    • logic

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

      フィルターする複数のフィールドがある場合、ブール AND または OR を使用するかどうか。

      メンバー

      • AND
      • タイプ:string
      • すべての条件が true の場合、レコードが表示されます。
      • OR
      • タイプ:string
      • 1 つ以上の条件が true の場合、レコードが表示されます。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                dataSource: northwindEmployees,
                features: [
                    {
                        name: "Filtering",
                        filteredFields: [
                            {
                                fieldName: "Name",
                                searchValue: "Davolio",
                                condition: "contains"
                                logic: "AND"
                            },
                            {
                                fieldName: "Title",
                                searchValue: "Sales Representative",
                                condition: "equals"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var filteredFields = $(".selector").igListViewFiltering("option", "filteredFields");

    • searchValue

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

      このフィールドのフィルターに使用する値。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                dataSource: northwindEmployees,
                features: [
                    {
                        name: "Filtering",
                        filteredFields: [
                            {
                                fieldName: "Name",
                                searchValue: "Davolio",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var filteredFields = $(".selector").igListViewFiltering("option", "filteredFields");

  • filterExprUrlKey

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

    リモート要求に対してフィルタリングの式をエンコードする方法を指定する URL キー名。たとえば、&filter('col') = startsWith。デフォルトは OData です。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        filterExprUrlKey : "filter"
                    }
                ]
            });
            
            //Get
            var filterExpr = $(".selector").igListViewFiltering("option", "filterExprUrlKey");

  • filterPresetsLabel

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

    フィルター プリセットの上に表示されるテキストです。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        filterPresetsLabel : "Filter presets:"
                    }
                ]
            });
            
            //Get
            var presetsLabel = $(".selector").igListViewFiltering("option", "filterPresetsLabel");

  • filterState

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

    使用されるプリセットのインデックス。ない場合は 'default'。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        filterState : "default"
                    }
                ]
            });
            
            //Get
            var filterState = $(".selector").igListViewFiltering("option", "filterState");

  • presets

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    プリセット フィルタリング オプションのリストです。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        presets : [
                            {
                                text: "Sales",
                                filteredFields: [
                                    {
                                        fieldName: "Title",
                                        searchValue: "Sales Representative",
                                        condition: "equals"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewFiltering("option", "presets");

    • filteredFields

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      フィルター処理されたフィールドを表すキー/値のペアのリスト (fieldName、searchValue、condition、logic) です。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        presets : [
                            {
                                text: "Sales",
                                filteredFields: [
                                    {
                                        fieldName: "Title",
                                        searchValue: "Sales Representative",
                                        condition: "equals"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewFiltering("option", "presets");

      • condition

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

        このプリセットで指定したフィールドをフィルターするための条件。

        メンバー

        • empty
        • タイプ:string
        • notEmpty
        • タイプ:string
        • null
        • タイプ:string
        • notNull
        • タイプ:string
        • equals
        • タイプ:string
        • doesNotEqual
        • タイプ:string
        • startsWith
        • タイプ:string
        • contains
        • タイプ:string
        • doesNotContain
        • タイプ:string
        • endsWith
        • タイプ:string
        • greaterThan
        • タイプ:string
        • lessThan
        • タイプ:string
        • greaterThanOrEqualTo
        • タイプ:string
        • lessThanOrEqualTo
        • タイプ:string
        • true
        • タイプ:bool
        • false
        • タイプ:bool
        • on
        • タイプ:string
        • notOn
        • タイプ:string
        • before
        • タイプ:string
        • after
        • タイプ:string
        • today
        • タイプ:string
        • yesterday
        • タイプ:string
        • thisMonth
        • タイプ:string
        • lastMonth
        • タイプ:string
        • nextMonth
        • タイプ:string
        • thisYear
        • タイプ:string
        • nextYear
        • タイプ:string
        • lastYear
        • タイプ:string

      • fieldName

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

        フィルターするフィールドの名前。

      • logic

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

        フィルターする複数のフィールドがある場合、ブール AND または OR を使用するかどうか。

        メンバー

        • AND
        • タイプ:string
        • すべての条件が true の場合、レコードが表示されます。
        • OR
        • タイプ:string
        • 1 つ以上の条件が true の場合、レコードが表示されます。

      • searchValue

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

        このフィールドのフィルターに使用する値。

    • text

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

      フィルター プリセットに表示するテキスト。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        presets : [
                            {
                                text: "Sales",
                                filteredFields: [
                                    {
                                        fieldName: "Title",
                                        searchValue: "Sales Representative",
                                        condition: "equals"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var presets = $(".selector").igListViewFiltering("option", "presets");

  • searchBarAllFieldsCondition

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

    キーワード検索をすべてのフィールドに戻すときに使用する条件。文字列フィルターでなければなりません。

    メンバー

    • equals
    • タイプ:string
    • doesNotEqual
    • タイプ:string
    • startsWith
    • タイプ:string
    • contains
    • タイプ:string
    • doesNotContain
    • タイプ:string
    • endsWith
    • タイプ:string

  • searchBarCondition

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

    キーワード検索入力で実行されたフィルタリングのために使用する条件。

    メンバー

    • empty
    • タイプ:string
    • notEmpty
    • タイプ:string
    • null
    • タイプ:string
    • notNull
    • タイプ:string
    • equals
    • タイプ:string
    • doesNotEqual
    • タイプ:string
    • startsWith
    • タイプ:string
    • contains
    • タイプ:string
    • doesNotContain
    • タイプ:string
    • endsWith
    • タイプ:string
    • greaterThan
    • タイプ:string
    • lessThan
    • タイプ:string
    • greaterThanOrEqualTo
    • タイプ:string
    • lessThanOrEqualTo
    • タイプ:string
    • true
    • タイプ:bool
    • false
    • タイプ:bool
    • on
    • タイプ:string
    • notOn
    • タイプ:string
    • before
    • タイプ:string
    • after
    • タイプ:string
    • today
    • タイプ:string
    • yesterday
    • タイプ:string
    • thisMonth
    • タイプ:string
    • lastMonth
    • タイプ:string
    • nextMonth
    • タイプ:string
    • thisYear
    • タイプ:string
    • nextYear
    • タイプ:string
    • lastYear
    • タイプ:string

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarCondition: "contains"
                    }
                ]
            });
            
            //Get
            var searchBarCondition = $(".selector").igListViewFiltering("option", "searchBarCondition");

  • searchBarEnabled

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

    トレイで検索バーを有効にするかどうか。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarEnabled: true
                    }
                ]
            });
            
            //Get
            var searchBarEnabled = $(".selector").igListViewFiltering("option", "searchBarEnabled");

  • searchBarFieldName

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

    キーボード検索のために検索を実行するフィールド。何も入力されないと、すべてのフィールドを検索します。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarFieldName: "Name"
                    }
                ]
            });
            
            //Get
            var searchBarFieldName = $(".selector").igListViewFiltering("option", "searchBarFieldName");

  • searchBarFields

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    エンドユーザーのキーボード検索構成を可能にするソース内のフィールドのリスト。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarFields: [
                            {
                                text: "Name",
                                fieldName: "Name",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var searchBarFields = $(".selector").igListViewFiltering("option", "searchBarFields");

    • condition

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

      このフィールドによってキーワード検索をスコープする場合に使用するフィルター条件。

      メンバー

      • empty
      • タイプ:string
      • notEmpty
      • タイプ:string
      • null
      • タイプ:string
      • notNull
      • タイプ:string
      • equals
      • タイプ:string
      • doesNotEqual
      • タイプ:string
      • startsWith
      • タイプ:string
      • contains
      • タイプ:string
      • doesNotContain
      • タイプ:string
      • endsWith
      • タイプ:string
      • greaterThan
      • タイプ:string
      • lessThan
      • タイプ:string
      • greaterThanOrEqualTo
      • タイプ:string
      • lessThanOrEqualTo
      • タイプ:string
      • true
      • タイプ:bool
      • false
      • タイプ:bool
      • on
      • タイプ:string
      • notOn
      • タイプ:string
      • before
      • タイプ:string
      • after
      • タイプ:string
      • today
      • タイプ:string
      • yesterday
      • タイプ:string
      • thisMonth
      • タイプ:string
      • lastMonth
      • タイプ:string
      • nextMonth
      • タイプ:string
      • thisYear
      • タイプ:string
      • nextYear
      • タイプ:string
      • lastYear
      • タイプ:string

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarFields: [
                            {
                                text: "Name",
                                fieldName: "Name",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var searchBarFields = $(".selector").igListViewFiltering("option", "searchBarFields");

    • fieldName

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

      フィルターするフィールドの名前。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarFields: [
                            {
                                text: "Name",
                                fieldName: "Name",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var searchBarFields = $(".selector").igListViewFiltering("option", "searchBarFields");

    • text

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

      スコープ オプションに表示するテキスト。

      コード サンプル

       
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarFields: [
                            {
                                text: "Name",
                                fieldName: "Name",
                                condition: "contains"
                            }
                        ]
                    }
                ]
            });
            
            //Get
            var searchBarFields = $(".selector").igListViewFiltering("option", "searchBarFields");

  • searchBarPlaceHolder

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

    検索バーが空の場合、検索バーに表示するプレースホルダーです。

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        searchBarPlaceHolder: "Search contacts..."
                    }
                ]
            });
            
            //Get
            var searchBarPlaceHolder = $(".selector").igListViewFiltering("option", "searchBarPlaceHolder");

  • type

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

    フィルタリングのローカルとリモートのいずれかを決定します。

    メンバー

    • remote
    • タイプ:string
    • local
    • タイプ:string

    コード サンプル

     
            //Initialize
            $(".selector").igListView({
                features: [
                    {
                        name: "Filtering",
                        type: "local"
                    }
                ]
            });
            
            //Get
            var filterType = $(".selector").igListViewFiltering("option", "type");

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

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

詳細の表示

  • keywordChanged

    キャンセル可能:
    false

    イベントは、検索バーのキーワードが変更された後に発生します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igListViewFiltering への参照を取得します。
    ui.owner.list を使用して、igList への参照を取得します。
    ui.value を使用して、テキストボックスの新しい値を取得します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewfilteringkeywordchanged", function (evt, ui) {
            //return the new value of the search box
            ui.value;
            //return reference to igListViewFiltering
            ui.owner;
            //return reference to igList
            ui.owner.list;
        });
        
        //Initialize
        $(".selector").igListView({
            features: [
                {
                    name: "Filtering",
                    keywordChanged: function(evt, ui) {...}
                }
            ]
        });

  • keywordChanging

    キャンセル可能:
    true

    イベントは、検索バーのキーワードが変更される前に発生します。
    フィルター プリセットの変更をキャンセルするには、False を返します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igListViewFiltering への参照を取得します。
    ui.owner.list を使用して、igList への参照を取得します。
    ui.value を使用して、テキストボックスの新しい値を取得します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewfilteringkeywordchanging", function (evt, ui) {
            //return the new value of the search box
            ui.value;
            //return reference to igListViewFiltering
            ui.owner;
            //return reference to igList
            ui.owner.list;
        });
        
        //Initialize
        $(".selector").igListView({
            features: [
                {
                    name: "Filtering",
                    keywordChanging: function(evt, ui) {...}
                }
            ]
        });

  • presetChanged

    キャンセル可能:
    false

    イベントは、プリセットが変更され、データが再描画された後に発生します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igListViewFiltering への参照を取得します。
    ui.owner.list を使用して、igList への参照を取得します。
    ui.state を使用して、新しい filterState を取得します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewfilteringpresetchanged", function (evt, ui) {
            //return the new value of filterState option
            ui.state;
            //return reference to igListViewFiltering
            ui.owner;
            //return reference to igList
            ui.owner.list;
        });
        
        //Initialize
        $(".selector").igListView({
            features: [
                {
                    name: "Filtering",
                    presetChanged: function(evt, ui) {...}
                }
            ]
        });

  • presetChanging

    キャンセル可能:
    true

    イベントは、フィルターの並べ替えプリセットが変更される前に発生します。
    フィルター プリセットの変更をキャンセルするには、False を返します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igListViewFiltering への参照を取得します。
    ui.owner.list を使用して、igList への参照を取得します。
    ui.state を使用して、新しい filterState を取得します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewfilteringpresetchanging", function (evt, ui) {
            //return the new value of filterState option
            ui.state;
            //return reference to igListViewFiltering
            ui.owner;
            //return reference to igList
            ui.owner.list;
        });
        
        //Initialize
        $(".selector").igListView({
            features: [
                {
                    name: "Filtering",
                    presetChanging: function(evt, ui) {...}
                }
            ]
        });

  • scopeChanged

    キャンセル可能:
    false

    スコープ プリセットが変更され、データが再描画された後に発生するイベント。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igListViewFiltering への参照を取得します。
    ui.owner.list を使用して、igList への参照を取得します。
    ui.scopeField を使用して、キーワード検索がスコープする新しいフィールド名を取得します。
    ui.condition を使用して、キーワード検索がフィルターする新しい条件を取得します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewfilteringscopechanged", function (evt, ui) {
            //return the new field name that will scope keyword search
            ui.scopeField;
            //return the new condition that the keyword search will filter by
            ui.condition;
            //return reference to igListViewFiltering
            ui.owner;
            //return reference to igList
            ui.owner.list;
        });
        
        //Initialize
        $(".selector").igListView({
            features: [
                {
                    name: "Filtering",
                    scopeChanged: function(evt, ui) {...}
                }
            ]
        });

  • scopeChanging

    キャンセル可能:
    true

    フィルターのスコープ プリセットが変更される前に発生するイベント。
    フィルター プリセットの変更をキャンセルするには、False を返します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igListViewFiltering への参照を取得します。
    ui.owner.list を使用して、igList への参照を取得します。
    ui.scopeField を使用して、キーワード検索がスコープする新しいフィールド名を取得します。
    ui.condition を使用して、キーワード検索がフィルターする新しい条件を取得または設定します。

    コード サンプル

     
        //Delegate
        $(document).delegate(".selector", "iglistviewfilteringscopechanging", function (evt, ui) {
            //return the new field name that will scope keyword search
            ui.scopeField;
            //return the new condition that the keyword search will filter by
            ui.condition;
            //return reference to igListViewFiltering
            ui.owner;
            //return reference to igList
            ui.owner.list;
        });
        
        //Initialize
        $(".selector").igListView({
            features: [
                {
                    name: "Filtering",
                    scopeChanging: function(evt, ui) {...}
                }
            ]
        });

  • destroy

    .destroy( );

    トレーのすべての要素を削除することによって igListViewFiltering 機能を破棄します。

    コード サンプル

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

  • filter

    .filter( fieldExpressions:array, trayText:string );

    指定した式のカスタム リストを使用してリストをフィルターします。プリセットのフィルターされたフィールドで定義されるプロパティと同じです。

    • fieldExpressions
    • タイプ:array
    • フィールド式定義の配列。各オブジェクトはキー/値ペアで、キーは "fieldName"、"searchValue"、"condition"、および "logic" (オプション) です。
    • trayText
    • タイプ:string
    • 検索トレーのフッターに表示するテキスト。

    コード サンプル

     
        $(".selector").igListViewFiltering("filter", [{fieldName:"CategoryName", searchValue: "Seafood", condition: "equals"}], "Filtering for category 'Seafood'");

  • ui-igelastic-block ui-iglist-button-cancel-container

    キーワード検索のテキスト入力を含むコンテナーに適用されるクラス。

  • ui-iglist-filter-key-word-area

    キーワード検索の入力を含む要素に適用されるクラス。

  • ui-iglist-filter-presets

    すべての並べ替えのプリセット オプションを含む要素に適用されるクラス。

  • ui-iglist-keyword-scope-options

    キーワード検索をスコープするためのすべてのオプションを含む要素に適用されるクラス。

  • ui-iglist-tray-footer-item ig-tray-keyword

    検索トレーのフッターのキーワード検索入力にテキストを表示する要素に適用されるクラス。

  • ui-iglist-input-search-container

    キーワード検索のテキスト入力を含むコンテナーに適用されるクラス。

  • ui-igelastic-block

    [キャンセル] ボタンがある場合、キーワード検索のテキスト入力を含むコンテナーに適用されるクラス。

  • ui-iglist-search-scope-hidden

    水平方向に部分的に表示以外にスクロールされた場合、キーワード検索のスコープ要素に適用されるクラス。

  • ui-btn-inline ui-iglist-preset

    検索領域でプリセットを選択するための要素に適用されるクラス。

  • ui-iglist-tray-footer-item ig-tray-filter-preset

    検索トレーのフッターで選択されたプリセットのテキストを表示する要素に適用されるクラス。

  • ui-iglist-preset-hidden

    水平方向に部分的に表示以外にスクロールされた場合、プリセット要素に適用されるクラス。

  • ui-iglist-preset-selected

    選択し、適用される場合、プリセット要素に適用されるクラス。

  • ui-iglist-tray-footer-sep

    検索トレーのフッターで (項目の間の) ブレットおよび「フィルター:」ラベルを含む要素に適用されるクラス。

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