|
|
@@ -1,119 +0,0 @@
|
|
|
-<!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 () {
|
|
|
- function getNumberFilterTemplate(fieldId) {
|
|
|
- var numberFilterClass = 'numberFilter-' + fieldId,
|
|
|
- template = function (bootstrapTable, col, isVisible) {
|
|
|
- var search = function (event, value) {
|
|
|
- bootstrapTable.searchText = undefined;
|
|
|
- clearTimeout(bootstrapTable.timeoutId);
|
|
|
- bootstrapTable.timeoutId = setTimeout(function () {
|
|
|
- bootstrapTable.onColumnSearch(event, fieldId, value);
|
|
|
- }, bootstrapTable.options.searchTimeOut);
|
|
|
- };
|
|
|
-
|
|
|
- var $el = $('<div class="input-group input-group-sm ' + numberFilterClass + '" style="width: 100%; visibility:' + isVisible + '">' +
|
|
|
- '<span class="input-group-addon">></span>' +
|
|
|
- '<input type="number" class="form-control">' +
|
|
|
- '</div>'),
|
|
|
- $input = $el.find('input');
|
|
|
-
|
|
|
- $input.off('keyup').on('keyup', function (event) {
|
|
|
- search(event, $(this).val());
|
|
|
- });
|
|
|
-
|
|
|
- $input.off('mouseup').on('mouseup', function (event) {
|
|
|
- var $input = $(this),
|
|
|
- oldValue = $input.val();
|
|
|
-
|
|
|
- if (oldValue === "") {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(function () {
|
|
|
- var newValue = $input.val();
|
|
|
- if (newValue === "") {
|
|
|
- search(event, newValue);
|
|
|
- }
|
|
|
- }, 1);
|
|
|
- });
|
|
|
-
|
|
|
- return $el;
|
|
|
- };
|
|
|
-
|
|
|
- return template;
|
|
|
- }
|
|
|
-
|
|
|
- var options = {
|
|
|
- filterValues: {price: "$2"},
|
|
|
- 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"]
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- field: "amount",
|
|
|
- title: "Amount",
|
|
|
- width: 200,
|
|
|
- filter: {
|
|
|
- template: getNumberFilterTemplate("amount"),
|
|
|
- setFilterValue: function ($filter, field, value) {
|
|
|
- if (value) {
|
|
|
- $filter.find('input').val(value.value);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- filter: true,
|
|
|
- filterTemplate: {
|
|
|
- input: function (bootstrapTable, column, isVisible) {
|
|
|
- return '<input type="text" class="form-control input-sm" data-filter-field="' + column.field + '" style="width: 100%; visibility:' + isVisible + '">';
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- var $table = $("#table").bootstrapTable(options);
|
|
|
- $table.bootstrapTable("setSelect2Data", "name", ["item 1", "item 2", "item 3"]);
|
|
|
- });
|
|
|
- </script>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<div class="container">
|
|
|
- <h1>Select2 Filter</h1>
|
|
|
- <table id="table"></table>
|
|
|
-</div>
|
|
|
-</body>
|
|
|
-</html>
|
zhixin