KeyField của bảng Bootstrap
|
Gói npm Reac-bootstrap-table2-filter nhận được tổng cộng 23.695 lượt tải xuống mỗi tuần. Do đó, chúng tôi đã chấm điểm mức độ phổ biến của bộ lọc react-bootstrap-table2 để được Công nhận Show Dựa trên số liệu thống kê dự án từ kho lưu trữ GitHub cho gói npm react-bootstrap-table2-filter, chúng tôi thấy rằng nó đã được gắn dấu sao 1.226 lần và 63 dự án khác trong hệ sinh thái phụ thuộc vào nó Số lượt tải xuống được tính là trung bình động trong khoảng thời gian 12 tháng qua, không bao gồm các ngày cuối tuần và các điểm dữ liệu bị thiếu đã xác định Trong tương lai, bộ công cụ này sẽ hỗ trợ các tính năng khác như xóa hàng, chèn, v.v. Ngay bây giờ chúng tôi chỉ theo dõi các tính năng
Bản trình diễn trực tiếp cho bảng Tìm kiếm Bản trình diễn trực tiếp cho xuất CSV Bản trình diễn trực tiếp cho cột Chuyển đổi Định nghĩa đạo cụ API Cài đặt$ npm install react-bootstrap-table2-toolkit --save Thêm CSS// es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'; Tìm kiếm bảngimport ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>
Đạo cụ // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';6tên lớp - [chuỗi]Tùy chỉnh lớp trên phần tử đầu vào trình giữ chỗ - [chuỗi]Tùy chỉnh trình giữ chỗ trên phần tử đầu vào phong cách - [đối tượng]Tùy chỉnh kiểu trên phần tử đầu vào độ trễ = [số]milionsecond để gỡ lỗi đầu vào của người dùng srText = [chuỗi]Tùy chỉnh văn bản trình đọc màn hình cho đầu vào tìm kiếm. (Mặc định. "Tìm kiếm bảng này") Tùy chọn tìm kiếmtìm kiếm mặc định - [chuỗi]Chấp nhận một chuỗi sẽ được sử dụng để tìm kiếm mặc định khi hiển thị bảng lần đầu tiên // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';3 onColumnMatch - [chức năng]Acccpt một chức năng sẽ được gọi khi bảng cố gắng khớp với mọi ô khi tìm kiếm xảy ra. Chức năng này chấp nhận một đối tượng như ví dụ dưới đây // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';4
tìm kiếmĐịnh dạng - [bool]Nếu bạn muốn tìm kiếm trên dữ liệu đã định dạng, bạn phải bật công cụ này. // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';0 sẽ kiểm tra xem bạn có xác định import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>4 khi thực hiện tìm kiếm không // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';8 afterSearch - [Chức năng]Sau khi tìm kiếm xong, chức năng gọi lại này sẽ được gọi với kết quả mới nhất // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';9 Xóa nút tìm kiếmChúng tôi có chức năng tìm kiếm rõ ràng tích hợp cho phép người dùng xóa trạng thái tìm kiếm thông qua nút nhấp import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>0 Xuất CSVCó hai bước để kích hoạt chức năng xuất CSV
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>7 Xuất tùy chọn CSVtên tệp - [Chuỗi]Tùy chỉnh tên tệp csv dấu phân cách - [Chuỗi]Tùy chỉnh trình phân tách tệp csv bỏ quaHeader - [bool]Mặc định là // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31. Đặt true để tránh đính kèm tiêu đề csv bỏ quaFooter - [bool]Mặc định là import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>2. Cung cấp cho // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31 để đính kèm chân bảng nếu được bật noAutoBOM - [bool]Mặc định là import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>2 blobType - [chuỗi]Mặc định là // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';35. Thay đổi để cập nhật loại blob của tệp đã xuất exportAll - [bool]Mặc định là import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>2. // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31 sẽ chỉ xuất dữ liệu hiện tại hiển thị trên bảng chỉ xuất lựa chọn - [book]Mặc định là // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31. import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>2 sẽ chỉ xuất dữ liệu được chọn chỉ Xuất lọc - [máu]Mặc định là // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31. import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>2 sẽ chỉ xuất dữ liệu được lọc/tìm kiếm
Chuyển đổi cộtHãy xem cách hiển thị chuyển đổi cột trong thành phần phản ứng của bạn // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';0
Nếu bạn muốn hiển thị mặc định trên cột được chỉ định, bạn chỉ cần cung cấp cho import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; const { SearchBar } = Search; //... <ToolkitProvider keyField="id" data={ products } columns={ columns } search > { props => ( <div> <h3>Input something at below input field:</h3> <SearchBar { ...props.searchProps } /> <hr /> <BootstrapTable { ...props.baseProps } /> </div> ) } </ToolkitProvider>2 hoặc // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';31 trên // es5 require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'); // es6 import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';46 |
