Add select2-filter example

wenzhixin · wenzhixin · commit c09967a57621 · 2016-05-13T14:47:20.000+08:00
diff --git a/extensions/select2-filter.html b/extensions/select2-filter.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Select2 Filter</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
+    <link rel="stylesheet" href="../assets/examples.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
+
+    <script src="../assets/jquery.min.js"></script>
+    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
+    <script src="../assets/bootstrap-table/src/extensions/select2-filter/bootstrap-table-select2-filter.js"></script>
+    <script>
+        $(function() {
+            var options = {
+                filterValues: {
+                    price: "$2"
+                },
+                url: "../json/data1.json",
+                columns: [{
+                    field: "id",
+                    title: "ID",
+                    filter: {
+                        type: "input"
+                    }
+                }, {
+                    field: "name",
+                    title: "Item Name",
+                    filter: {
+                        type: "select",
+                        data: []
+                    }
+                }, {
+                    field: "price",
+                    title: "Item Price",
+                    filter: {
+                        type: "select",
+                        data: ["$1", "$2", "$3"]
+                    }
+                }],
+                filter: true
+            };
+
+            var $table = $("#table").bootstrapTable(options);
+            $table.bootstrapTable("setFilterData", "name", ["item 1", "item 2", "item 3"]);
+        });
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Select2 Filter</h1>
+        <table id="table"></table>
+    </div>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -106,6 +106,7 @@
                         <li><a href="extensions/reorder-rows.html">Reorder Rows</a></li>
                         <li><a href="extensions/multiple-sort.html">Multiple Sort</a></li>
                         <li><a href="extensions/fixed-columns.html">Fixed Columns</a></li>
+                        <li><a href="extensions/select2-filter.html">Select2 Filter</a></li>
                         <li><a href="extensions/i18n-enhance.html">i18n Enhance</a></li>
                     </ul>
                 </li>
diff --git a/index.html.conf b/index.html.conf
@@ -106,6 +106,7 @@
                         <li><a href="extensions/reorder-rows.html">Reorder Rows</a></li>
                         <li><a href="extensions/multiple-sort.html">Multiple Sort</a></li>
                         <li><a href="extensions/fixed-columns.html">Fixed Columns</a></li>
+                        <li><a href="extensions/select2-filter.html">Select2 Filter</a></li>
                         <li><a href="extensions/i18n-enhance.html">i18n Enhance</a></li>
                     </ul>
                 </li>
