Cột ẩn bảng phản ứng-bootstrap

// 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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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
  })
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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

1. Gọi

   import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
   
   // omit...
   const columns = [
     ..., {
     dataField: 'price',
     text: 'Product Price',
     filter: textFilter()
   }];
   
   <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

   7 và chuyển cho

   import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
   
   // omit...
   const columns = [
     ..., {
     dataField: 'price',
     text: 'Product Price',
     filter: textFilter()
   }];
   
   <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

   8
2. Cung cấp

   import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
   
   // omit...
   const columns = [
     ..., {
     dataField: 'price',
     text: 'Product Price',
     filter: textFilter()
   }];
   
   <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

   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

1. 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ần

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
     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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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()
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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
  })
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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
  })
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

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