Home Explore Help
Sign In
githab
/
bootstrap-table
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add select2-filter extension example.

jewway 9 years ago
parent
30c9fee890
commit
dacf6c21c6
2 changed files with 164 additions and 0 deletions
Split View Show Diff Stats
  1. 107 0
      src/extensions/select2-filter/data.json
  2. 57 0
      src/extensions/select2-filter/select2-filter.html

+ 107 - 0
src/extensions/select2-filter/data.json
View File 

@@ -0,0 +1,107 @@
 
+[
 
+  {
 
+    "id": 0,
 
+    "name": "Item 0",
 
+    "price": "$0"
 
+  },
 
+  {
 
+    "id": 1,
 
+    "name": "Item 1",
 
+    "price": "$1"
 
+  },
 
+  {
 
+    "id": 2,
 
+    "name": "Item 2",
 
+    "price": "$2"
 
+  },
 
+  {
 
+    "id": 3,
 
+    "name": "Item 3",
 
+    "price": "$3"
 
+  },
 
+  {
 
+    "id": 4,
 
+    "name": "Item 4",
 
+    "price": "$4"
 
+  },
 
+  {
 
+    "id": 5,
 
+    "name": "Item 5",
 
+    "price": "$5"
 
+  },
 
+  {
 
+    "id": 6,
 
+    "name": "Item 6",
 
+    "price": "$6"
 
+  },
 
+  {
 
+    "id": 7,
 
+    "name": "Item 7",
 
+    "price": "$7"
 
+  },
 
+  {
 
+    "id": 8,
 
+    "name": "Item 8",
 
+    "price": "$8"
 
+  },
 
+  {
 
+    "id": 9,
 
+    "name": "Item 9",
 
+    "price": "$9"
 
+  },
 
+  {
 
+    "id": 10,
 
+    "name": "Item 10",
 
+    "price": "$10"
 
+  },
 
+  {
 
+    "id": 11,
 
+    "name": "Item 11",
 
+    "price": "$11"
 
+  },
 
+  {
 
+    "id": 12,
 
+    "name": "Item 12",
 
+    "price": "$12"
 
+  },
 
+  {
 
+    "id": 13,
 
+    "name": "Item 13",
 
+    "price": "$13"
 
+  },
 
+  {
 
+    "id": 14,
 
+    "name": "Item 14",
 
+    "price": "$14"
 
+  },
 
+  {
 
+    "id": 15,
 
+    "name": "Item 15",
 
+    "price": "$15"
 
+  },
 
+  {
 
+    "id": 16,
 
+    "name": "Item 16",
 
+    "price": "$16"
 
+  },
 
+  {
 
+    "id": 17,
 
+    "name": "Item 17",
 
+    "price": "$17"
 
+  },
 
+  {
 
+    "id": 18,
 
+    "name": "Item 18",
 
+    "price": "$18"
 
+  },
 
+  {
 
+    "id": 19,
 
+    "name": "Item 19",
 
+    "price": "$19"
 
+  },
 
+  {
 
+    "id": 20,
 
+    "name": "Item 20",
 
+    "price": "$20"
 
+  }
 
+]

+ 57 - 0
src/extensions/select2-filter/select2-filter.html
View File 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <title>Select2 Filter</title>
 
+  <meta charset="utf-8">
 
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css"/>
 
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css"/>
 
+
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
 
+  <script src="bootstrap-table-select2-filter.js"></script>
 
+  <script>
 
+    $(function () {
 
+      var options = {
 
+        url: "data.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>