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

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