// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
7 tách mã base lõi lọc thành // es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
8 nên khi bạn dùng lọc cột sẽ có chút khác biệt so với // es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
9. Trong phần sau đây, chúng tôi sẽ hướng dẫn bạn cách bật bộ lọc cộtBản demo trực tiếp cho bộ lọc cột
Định nghĩa đạo cụ & API
Cài đặt
$ npm install react-bootstrap-table2-filter --save
Thêm CSS
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
Bạn có thể nhận tất cả các loại bộ lọc thông qua nhập và các bộ lọc này là một chức năng xuất xưởng để tạo một phiên bản bộ lọc riêng lẻ. Hiện tại, chúng tôi hỗ trợ các bộ lọc sau
- Bộ lọc văn bản
- Chọn bộ lọc
- Bộ lọc đa lựa chọn
- SốBộ lọc
- Bộ lọc ngày
- Bộ lọc tùy chỉnh
- Sắp có
Bộ lọc văn bản
Sau đây là demo nhanh kích hoạt bộ lọc cột trên cột Giá sản phẩm
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
// omit...
const columns = [
..., {
dataField: 'price',
text: 'Product Price',
filter: textFilter[]
}];
Ngoài ra, chúng tôi giữ nguyên tất cả các tính năng và chức năng của bộ lọc trong
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
9 cũ, nhưng theo cách khác để thực hiệnimport filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
// omit...
const priceFilter = textFilter[{
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
className: 'my-custom-text-filter', // custom classname on input
defaultValue: 'test', // default filtering value
comparator: Comparator.EQ, // default is Comparator.LIKE
caseSensitive: true, // default is false, and true will only work when comparator is LIKE
style: { .. }, // your custom styles on input
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
getFilter: [f] => { .. }, // accept callback function and you can call it for filter programmtically
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
}];
// omit...
Chọn bộ lọc
Một ví dụ nhanh
________số 8Sau đây là một ví dụ cho bộ lọc chọn tùy chỉnh
import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
// omit...
const qualityFilter = selectFilter[{
options: selectOptions,
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
className: 'my-custom-text-filter', // custom classname on input
defaultValue: '2', // default filtering value
comparator: Comparator.LIKE, // default is Comparator.EQ
caseSensitive: false, // default is true
style: { .. }, // your custom styles on input
withoutEmptyOption: true, // hide the default select option
getFilter: [f] => { .. }, // accept callback function and you can call it for filter programmtically
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
}];
// omit...
Lưu ý,
1 cũng có thể là một mảng hoặc một hàmimport filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
Mảng dưới dạng tùy chọn
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
1Chức năng như tùy chọn
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
2Lợi ích là ________ 07 sẽ hiển thị các tùy chọn đã chọn theo thứ tự của mảng
Bộ lọc đa lựa chọn
Bộ lọc đa lựa chọn gần giống như bộ lọc chọn thông thường
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
4Sau đây là một ví dụ cho bộ lọc đa lựa chọn tùy chỉnh
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
5Bộ lọc số
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
0Bộ lọc số giống như các bộ lọc khác, bạn có thể tùy chỉnh bộ lọc số thông qua chức năng xuất xưởng ________ 53
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
1Bộ lọc ngày
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
2ghi chú. bộ lọc ngày chấp nhận đối tượng Ngày Javascript trong dữ liệu thô của bạn và bạn phải sử dụng
4 để đặt nó làm kết quả chuỗi ưa thích của mìnhimport filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
Bộ lọc ngày cũng giống như các bộ lọc khác, bạn có thể tùy chỉnh bộ lọc ngày thông qua chức năng xuất xưởng
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
// omit...
const columns = [
..., {
dataField: 'price',
text: 'Product Price',
filter: textFilter[]
}];
5// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
3Bộ lọc tùy chỉnh
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
4Trong trường hợp bộ lọc tùy chỉnh, bạn phải hoàn thành hai bước sau
- Gọi
6 và chuyển choimport filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
7import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
- Cung cấp
8 làm chức năng gọi lại và trả lại phần tử bộ lọc tùy chỉnh của bạnimport filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
cột. bộ lọcRenderer
Hàm này sẽ truyền hai đối số cho bạn
9. gọi nó để kích hoạt bộ lọc khi bạn cầnimport filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
0. Chỉ đối tượng cộtimport filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter'; // omit... const priceFilter = textFilter[{ placeholder: 'My Custom PlaceHolder', // custom the input placeholder className: 'my-custom-text-filter', // custom classname on input defaultValue: 'test', // default filtering value comparator: Comparator.EQ, // default is Comparator.LIKE caseSensitive: true, // default is false, and true will only work when comparator is LIKE style: { .. }, // your custom styles on input delay: 1000, // how long will trigger filtering after user typing, default is 500 ms getFilter: [f] => { .. }, // accept callback function and you can call it for filter programmtically id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page }]; // omit...
Cuối cùng, hãy nhớ trả lại thành phần bộ lọc tùy chỉnh của bạn
bộ lọc tùy chỉnh
Chức năng của
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
// omit...
const columns = [
..., {
dataField: 'price',
text: 'Product Price',
filter: textFilter[]
}];
6 giống như import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
// omit...
const priceFilter = textFilter[{
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
className: 'my-custom-text-filter', // custom classname on input
defaultValue: 'test', // default filtering value
comparator: Comparator.EQ, // default is Comparator.LIKE
caseSensitive: true, // default is false, and true will only work when comparator is LIKE
style: { .. }, // your custom styles on input
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
getFilter: [f] => { .. }, // accept callback function and you can call it for filter programmtically
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
}];
// omit...
2, import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
// omit...
const priceFilter = textFilter[{
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
className: 'my-custom-text-filter', // custom classname on input
defaultValue: 'test', // default filtering value
comparator: Comparator.EQ, // default is Comparator.LIKE
caseSensitive: true, // default is false, and true will only work when comparator is LIKE
style: { .. }, // your custom styles on input
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
getFilter: [f] => { .. }, // accept callback function and you can call it for filter programmtically
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
}];
// omit...
3, v.v., đó là vì lý do tùy chỉnh. Tuy nhiên, trong trường hợp bộ lọc tùy chỉnh, chỉ có một số đạo cụ là hợp lệ// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
5Lọc theo chương trình
// es5
require['react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'];
// es6
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
7 cho phép bạn kiểm soát bộ lọc bên ngoài, có nghĩa là người dùng không cần nhập nội dung nào đó vào bộ lọcLàm sao
Tất cả các bộ lọc đều có một giá trị
import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
// omit...
const priceFilter = textFilter[{
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
className: 'my-custom-text-filter', // custom classname on input
defaultValue: 'test', // default filtering value
comparator: Comparator.EQ, // default is Comparator.LIKE
caseSensitive: true, // default is false, and true will only work when comparator is LIKE
style: { .. }, // your custom styles on input
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
getFilter: [f] => { .. }, // accept callback function and you can call it for filter programmtically
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
}];
// omit...
5 chấp nhận chức năng gọi lại và chuyển một đối tượng bộ lọc cho bạn