Skip to content

Commit eed9bfd

Browse files
wenzhixinwenzhixin
committed
Update select2-filter example
1 parent 00de482 commit eed9bfd

File tree

2 files changed

+153
-71
lines changed

2 files changed

+153
-71
lines changed

‎extensions/select2-filter.html

Lines changed: 110 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,121 @@
22
<html>
33

44
<head>
5-
<title>Select2 Filter</title>
6-
<meta charset="utf-8">
7-
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
8-
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
9-
<link rel="stylesheet" href="../assets/examples.css">
10-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
11-
12-
<script src="../assets/jquery.min.js"></script>
13-
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
14-
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
15-
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
16-
<script src="../assets/bootstrap-table/src/extensions/select2-filter/bootstrap-table-select2-filter.js"></script>
17-
<script>
18-
$(function() {
19-
var options = {
20-
filterValues: {
21-
price: "$2"
22-
},
23-
url: "../json/data1.json",
24-
columns: [{
25-
field: "id",
26-
title: "ID",
27-
filter: {
28-
type: "input"
29-
}
30-
}, {
31-
field: "name",
32-
title: "Item Name",
33-
filter: {
34-
type: "select",
35-
data: []
36-
}
37-
}, {
38-
field: "price",
39-
title: "Item Price",
40-
filter: {
41-
type: "select",
42-
data: ["$1", "$2", "$3"]
43-
}
44-
}],
45-
filter: true
5+
<title>Select2 Filter</title>
6+
<meta charset="utf-8">
7+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
9+
<link rel="stylesheet" href="../assets/examples.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
11+
12+
<script src="../assets/jquery.min.js"></script>
13+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
14+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
16+
<script src="../assets/bootstrap-table/src/extensions/select2-filter/bootstrap-table-select2-filter.js"></script>
17+
<script>
18+
$(function() {
19+
function getNumberFilterTemplate(fieldId) {
20+
var numberFilterClass = 'numberFilter-' + fieldId,
21+
template = function(bootstrapTable, col, isVisible) {
22+
var search = function(event, value) {
23+
bootstrapTable.searchText = undefined;
24+
clearTimeout(bootstrapTable.timeoutId);
25+
bootstrapTable.timeoutId = setTimeout(function() {
26+
bootstrapTable.onColumnSearch(event, fieldId, value);
27+
}, bootstrapTable.options.searchTimeOut);
4628
};
4729

48-
var $table = $("#table").bootstrapTable(options);
49-
$table.bootstrapTable("setFilterData", "name", ["item 1", "item 2", "item 3"]);
50-
});
51-
</script>
30+
var $el = $('<div class="input-group input-group-sm ' + numberFilterClass + '" style="width: 100%; visibility:' + isVisible + '">' +
31+
'<span class="input-group-addon">&gt;</span>' +
32+
'<input type="number" class="form-control">' +
33+
'</div>'),
34+
$input = $el.find('input');
35+
36+
$input.off('keyup').on('keyup', function(event) {
37+
search(event, $(this).val());
38+
});
39+
40+
$input.off('mouseup').on('mouseup', function(event) {
41+
var $input = $(this),
42+
oldValue = $input.val();
43+
44+
if (oldValue === "") {
45+
return;
46+
}
47+
48+
setTimeout(function() {
49+
var newValue = $input.val();
50+
if (newValue === "") {
51+
search(event, newValue);
52+
}
53+
}, 1);
54+
});
55+
56+
return $el;
57+
};
58+
59+
return template;
60+
}
61+
62+
var options = {
63+
url: "../json/data1.json",
64+
columns: [{
65+
field: "id",
66+
title: "ID",
67+
filter: {
68+
type: "input"
69+
}
70+
},
71+
{
72+
field: "name",
73+
title: "Item Name",
74+
filter: {
75+
type: "select",
76+
data: []
77+
}
78+
},
79+
{
80+
field: "price",
81+
title: "Item Price",
82+
filter: {
83+
type: "select",
84+
data: ["", "$1", "$2", "$3"]
85+
}
86+
},
87+
{
88+
field: "amount",
89+
title: "Amount",
90+
width: 200,
91+
filter: {
92+
template: getNumberFilterTemplate("amount"),
93+
setFilterValue: function($filter, field, value) {
94+
if (value) {
95+
$filter.find('input').val(value.value);
96+
}
97+
}
98+
}
99+
}
100+
],
101+
filter: true,
102+
filterTemplate: {
103+
input: function(bootstrapTable, column, isVisible) {
104+
return '<input type="text" class="form-control input-sm" data-filter-field="' + column.field + '" style="width: 100%; visibility:' + isVisible + '">';
105+
}
106+
}
107+
};
108+
109+
var $table = $("#table").bootstrapTable(options);
110+
$table.bootstrapTable("setSelect2Data", "name", ["", "item 1", "item 2", "item 3"]);
111+
});
112+
</script>
52113
</head>
53114

54115
<body>
55-
<div class="container">
56-
<h1>Select2 Filter</h1>
57-
<table id="table"></table>
58-
</div>
116+
<div class="container">
117+
<h1>Select2 Filter</h1>
118+
<table id="table"></table>
119+
</div>
59120
</body>
60121

61122
</html>

‎json/data1.json

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,106 +2,127 @@
22
{
33
"id": 0,
44
"name": "Item 0",
5-
"price": "$0"
5+
"price": "$0",
6+
"amount": 3
67
},
78
{
89
"id": 1,
910
"name": "Item 1",
10-
"price": "$1"
11+
"price": "$1",
12+
"amount": 4
1113
},
1214
{
1315
"id": 2,
1416
"name": "Item 2",
15-
"price": "$2"
17+
"price": "$2",
18+
"amount": 8
1619
},
1720
{
1821
"id": 3,
1922
"name": "Item 3",
20-
"price": "$3"
23+
"price": "$3",
24+
"amount": 2
2125
},
2226
{
2327
"id": 4,
2428
"name": "Item 4",
25-
"price": "$4"
29+
"price": "$4",
30+
"amount": 90
2631
},
2732
{
2833
"id": 5,
2934
"name": "Item 5",
30-
"price": "$5"
35+
"price": "$5",
36+
"amount": 2
3137
},
3238
{
3339
"id": 6,
3440
"name": "Item 6",
35-
"price": "$6"
41+
"price": "$6",
42+
"amount": 3
3643
},
3744
{
3845
"id": 7,
3946
"name": "Item 7",
40-
"price": "$7"
47+
"price": "$7",
48+
"amount": 7
4149
},
4250
{
4351
"id": 8,
4452
"name": "Item 8",
45-
"price": "$8"
53+
"price": "$8",
54+
"amount": 39
4655
},
4756
{
4857
"id": 9,
4958
"name": "Item 9",
50-
"price": "$9"
59+
"price": "$9",
60+
"amount": 78
5161
},
5262
{
5363
"id": 10,
5464
"name": "Item 10",
55-
"price": "$10"
65+
"price": "$10",
66+
"amount": 30
5667
},
5768
{
5869
"id": 11,
5970
"name": "Item 11",
60-
"price": "$11"
71+
"price": "$11",
72+
"amount": 32
6173
},
6274
{
6375
"id": 12,
6476
"name": "Item 12",
65-
"price": "$12"
77+
"price": "$12",
78+
"amount": 12
6679
},
6780
{
6881
"id": 13,
6982
"name": "Item 13",
70-
"price": "$13"
83+
"price": "$13",
84+
"amount": 76
7185
},
7286
{
7387
"id": 14,
7488
"name": "Item 14",
75-
"price": "$14"
89+
"price": "$14",
90+
"amount": 10
7691
},
7792
{
7893
"id": 15,
7994
"name": "Item 15",
80-
"price": "$15"
95+
"price": "$15",
96+
"amount": 9
8197
},
8298
{
8399
"id": 16,
84100
"name": "Item 16",
85-
"price": "$16"
101+
"price": "$16",
102+
"amount": 8
86103
},
87104
{
88105
"id": 17,
89106
"name": "Item 17",
90-
"price": "$17"
107+
"price": "$17",
108+
"amount": 1
91109
},
92110
{
93111
"id": 18,
94112
"name": "Item 18",
95-
"price": "$18"
113+
"price": "$18",
114+
"amount": 99
96115
},
97116
{
98117
"id": 19,
99118
"name": "Item 19",
100-
"price": "$19"
119+
"price": "$19",
120+
"amount": 100
101121
},
102122
{
103123
"id": 20,
104124
"name": "Item 20",
105-
"price": "$20"
125+
"price": "$20",
126+
"amount": 109
106127
}
107-
]
128+
]

0 commit comments

Comments
 (0)