// 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 tách cơ sở mã lõi bộ lọc thành
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];0, vì vậy sẽ có một chút khác biệt khi bạn sử dụng bộ lọc cột so với
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];1. Trong phần sau đây, chúng tôi sẽ hướng dẫn bạn cách bật bộ lọc cột
Bả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
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ó
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ộ 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
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];1 cũ, nhưng theo cách khác để thực hiện
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 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ố 8_______
Sau đâ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 style: { .. }, // your custom styles on input withoutEmptyOption: true // hide the default select option 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 ý, selectOptions có thể là một mảng hoặc một hàm trả về một mảng
Mảng dưới dạng tùy chọn
const selectOptions = [ { value: 0, label: 'good' }, { value: 1, label: 'Bad' }, { value: 2, label: 'unknown' } ]; const columns = [ ..., { dataField: 'quality', text: 'Product Quailty', formatter: cell => selectOptions.find[opt => opt.value === cell].label, filter: selectFilter[{ options: selectOptions }] }];
Chức năng như tùy chọn
const selectOptions = [ { value: 0, label: 'good' }, { value: 1, label: 'Bad' }, { value: 2, label: 'unknown' } ]; const columns = [ ..., { dataField: 'quality', text: 'Product Quailty', formatter: cell => selectOptions.find[opt => opt.value === cell].label, filter: selectFilter[{ options: [] => selectOptions }] }];
Lợi ích 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';9 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
Một ví dụ nhanh
import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter'; // omit... const selectOptions = { 0: 'good', 1: 'Bad', 2: 'unknown' }; const columns = [ ..., { dataField: 'quality', text: 'Product Quailty', formatter: cell => selectOptions[cell], filter: multiSelectFilter[{ options: selectOptions }] }];
Sau đây là một ví dụ cho bộ lọc chọn tùy chỉnh
import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter'; // omit... const qualityFilter = multiSelectFilter[{ 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 style: { .. }, // your custom styles on input withoutEmptyOption: true // hide the default select option id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page }]; // omit...
Bộ 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';0
Bộ 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 nhà máy
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];4
// 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';1
Bộ 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';2
ghi 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
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];5 để biến nó thành kết quả chuỗi ưa thích của mình
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 nhà máy
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];6
// 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';3
Bộ 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';4
Trong 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
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
7 và chuyển choimport filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
8 - Cung cấp
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];
9 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ạn
cột. bộ lọcRenderer
Hàm này sẽ truyền hai đối số cho bạn
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 id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page }]; // omit...
0. gọi nó để kích hoạt bộ lọc khi bạn cầ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 id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page }]; // omit...
1. Chỉ đối tượng cột
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[] }];7 giống như chức năng của
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 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,
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 id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page }]; // omit...4, 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 đạo cụ là hợp lệ.
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 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
// 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';5
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 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 là một cách để yêu cầu
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; // omit... const columns = [ ..., { dataField: 'price', text: 'Product Price', filter: textFilter[] }];1 lọc dữ liệu của bạn dưới dạng số, chọn, ngày hoặc văn bản bình thường
FILTER_TYPES
Các thuộc tính sau có giá trị trong
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 id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page }]; // omit...8
- CHỮ
- LỰA CHỌN
- SỐ
- NGÀY
- ĐA CHỌN
Chức vụ
Bộ lọc mặc định được hiển thị bên trong tiêu đề cột của bảng, nhưng bạn có thể chọn hiển thị chúng dưới dạng một hàng trước
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 id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page }]; // omit...9
Kết xuất ở phần trên cùng của thân bả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';6
Kết xuất ở dưới cùng của thân bả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';7
Cấu hình
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter'; // omit... const selectOptions = { 0: 'good', 1: 'Bad', 2: 'unknown' }; const columns = [ ..., { dataField: 'quality', text: 'Product Quailty', formatter: cell => selectOptions[cell], filter: selectFilter[{ options: selectOptions }] }];0 là chức năng xuất xưởng để khởi tạo một số cấu hình nội bộ. Dưới đây là các tùy chọn có sẵn cho
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter'; // omit... const selectOptions = { 0: 'good', 1: 'Bad', 2: 'unknown' }; const columns = [ ..., { dataField: 'quality', text: 'Product Quailty', formatter: cell => selectOptions[cell], filter: selectFilter[{ options: selectOptions }] }];0
bộ lọc sau
Hàm hook này sẽ được gọi với hai đối số [kết quả bộ lọc mới và đối tượng bộ lọc] khi quá trình lọc hoàn tất