Tableheadercolumn phản ứng bootstrap table2

$ npm start # see all examples, go to localhost:3004 
 Nội dung chính Show
 
Cách sử dụng
a. Cài đặt
b. Mô-đun nhập khẩu
Tôi sẽ thể hiện điều gì?
Cái gì không?
Thử nghiệm
Dữ liệu giả
Các thành phần
 

0 phụ thuộc vào phản ứng. js và Bootstrap 3, cũng được viết bởi ES6 và sử dụng gulp và browserify để xây dựng và đóng gói

Bạn có thể sử dụng các lệnh sau để chuẩn bị phát triển

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

Xem các ví dụ cho

$ npm start # see all examples, go to localhost:3004 

0

$ npm start # see all examples, go to localhost:3004 

Cách sử dụng

a. Cài đặt

npm install react-bootstrap-table --save

b. Mô-đun nhập khẩu

Để sử dụng react-bootstrap-table trong ứng dụng phản ứng của bạn, trước tiên bạn nên nhập nó. Bạn có thể làm điều này theo hai cách

Với gói mô-đun

Với gói mô-đun như webpack hỗ trợ mô-đun CommonJS hoặc ES2015, hãy sử dụng như bất kỳ thứ gì khác.
Bạn có thể đưa bản đồ nguồn vào hệ thống bản dựng của mình để gỡ lỗi khi phát triển. Đừng quên Uglify khi sản xuất.

// in ECMAScript 6
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
// or in ECMAScript 5
var ReactBSTable = require('react-bootstrap-table');  
var BootstrapTable = ReactBSTable.BootstrapTable;



var TableHeaderColumn = ReactBSTable.TableHeaderColumn;

Trình duyệt toàn cầu (đối tượng cửa sổ)

Trong thư mục

npm install react-bootstrap-table --save

2, bạn có gói UMD với bản đồ nguồn (

npm install react-bootstrap-table --save

6) cũng như phiên bản rút gọn (

npm install react-bootstrap-table --save

7)

Thỉnh thoảng tôi bắt gặp một thư viện tên là React Bootstrap Table. Điều này giúp bạn tạo bảng với vô số tính năng như Phân trang, Lọc, Sắp xếp, Xuất sang CSV và nhiều tính năng khác. Và thậm chí nó cho phép bạn tùy chỉnh theo nhu cầu của bạn. Tôi đã khám phá nhiều thư viện thành phần lưới/bảng khác nhau để sử dụng, nhưng nhiều thư viện gặp khó khăn trong việc tìm hiểu hoặc triển khai hoặc thiếu tính năng mong đợi. Vì vậy, tôi đã ổn định với thư viện này và hơn nữa nó được duy trì tích cực

Tôi sẽ thể hiện điều gì?

• Bảng cơ bản lấy dữ liệu từ xa có phân trang - Phần 1
• Thêm một số bộ lọc - Phần 2
• Tùy chỉnh một số trường theo nhu cầu của chúng tôi - Phần 3

Cái gì không?

• Tôi sẽ không chỉ cho bạn cách viết ứng dụng phản ứng với redux. Tôi cho rằng bạn nên biết phản ứng và redux rồi. Nếu không, vui lòng xem hướng dẫn này được viết bởi Cory House. Bởi vì ứng dụng mẫu được tạo tuân theo chính xác cấu trúc mà anh ấy đã dạy trong hướng dẫn đó

Thử nghiệm

Bạn có thể tải xuống mẫu từ đây. Điều này có các hướng dẫn về cách thiết lập và chạy bản demo

Dữ liệu giả

Trước khi viết thành phần của chúng tôi, chúng tôi cần một số dữ liệu để điền vào bảng của chúng tôi. Tôi đã sử dụng Mockaroo để tạo dữ liệu giả. Dữ liệu mô phỏng chứa các phần tử id, productName, price, madeDate, ExpiitionDate với 100 hàng. Tôi muốn hiển thị 10 hàng trong bảng với 10 liên kết được phân trang. Bằng cách này, tại bất kỳ thời điểm nào, trình duyệt của người dùng sẽ chỉ có 10 hàng dữ liệu. Đối với mọi điều hướng phân trang, sẽ có một cuộc gọi tìm nạp được kích hoạt

Api giả

Để giảm bớt một số thứ, tôi sử dụng api giả thay vì api thực, sẽ trả về dữ liệu khi được truy vấn. Tạo một tệp có tên là mockApi. js trong src/api/mockApi. js

import _ from 'underscore'

// Mock data generated from https://www.mockaroo.com/
const mockData = [
  {
    id: 1,
    productName: 'pain reliever',
    price: 14,
    manufacturedDate: '2016-08-01',
    expiryDate: '2016-07-11'
  },
  {
    id: 2,
    productName: 'Dorzolamide Hydrochloride and Timolol Maleate',
    price: 100,
    manufacturedDate: '2015-12-30',
    expiryDate: '2016-05-29'
  }
]

class ProductApi {
  // Get the products by page number
  static getProducts(page) {
    return new Promise((resolve, reject) => {
      // Just to simulate a delay
      setTimeout(() => {
        let products = {}
        products.pageCount = 10
        products.resultsCount = 100
        products.productList = _.first(_.rest(mockData, page * 10 - 10), 10) // Divides the 100 data by chunks of 10
        resolve(Object.assign({}, products))
      }, 100)
    })
  }
}

export default ProductApi

Phương thức

$ npm start # see all examples, go to localhost:3004 

0 sẽ được kích hoạt bởi hành động chuyển hướng để tìm nạp dữ liệu. Tham khảo src/actions/productActions. js về cách kích hoạt từ hành động. Chúng tôi cũng cần dữ liệu được điền trên bảng sau khi trang được hạ cánh. Tham khảo src/chỉ mục. js về cách chúng tôi gửi một hành động. Sử dụng bộ giảm tốc redux, chúng tôi đã lưu trữ dữ liệu vào trạng thái được gọi là sản phẩm. Hãy tạo thành phần của chúng tôi

Các thành phần

Đối với hướng dẫn này, tôi sẽ tạo 2 thành phần

1. Trang chủ - Một thành phần chứa
2. ProductList - Một thành phần trình bày

Trước tiên hãy xây dựng thành phần trình bày của chúng tôi

danh sách sản phẩm

Tạo danh sách sản phẩm. js trong src/components/home/ProductList. js và dán đoạn mã sau

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

0

Chúng tôi bắt đầu với việc nhập

$ npm start # see all examples, go to localhost:3004 

1 và

$ npm start # see all examples, go to localhost:3004 

2 từ thư viện

$ npm start # see all examples, go to localhost:3004 

3. Sau đó, chúng tôi khởi tạo thành phần trình bày

$ npm start # see all examples, go to localhost:3004 

4 của mình với ba thuộc tính

1. `products` - một đối tượng mà chúng tôi nhận được từ api giả của chúng tôi
2. `activePage` - số trang hiện tại
3. `onNavigatePage` - một hàm sẽ gọi hành động của chúng ta (hãy nhớ rằng hành động gọi mockApi) để cập nhật dữ liệu và cập nhật trang đang hoạt động

Đổi lại, chúng tôi khởi tạo thành phần

$ npm start # see all examples, go to localhost:3004 

1 với các tham số bắt buộc sẽ được chuyển đến thành phần vùng chứa của chúng tôi để hiển thị. Vài điều cần lưu ý ở đây

1. `data` - lấy danh sách các mục để hiển thị trong bảng. Trong trường hợp của chúng tôi, chúng tôi đang chuyển 10 mục trong danh sách sản phẩm
2. `fetchInfo` - trong đó chúng tôi chỉ định lượng dữ liệu chúng tôi có, dựa vào đó số lượng trang sẽ được tính toán. Trong trường hợp của chúng tôi, chúng tôi đang nói 100 hàng, vì vậy thư viện sẽ chia 100 cho 10 theo mặc định và hiển thị 10 trang trong liên kết phân trang
3. `tùy chọn` - đây là nơi chúng tôi nói trang hiện tại của chúng tôi là gì, điều gì sẽ xảy ra nếu chúng tôi điều hướng đến một trang khác, v.v.
4. `remote` - khi nó đúng, thư viện đảm bảo dữ liệu đến từ nguồn bên ngoài. Trong trường hợp của chúng tôi, nó đến từ `mockApi`

Điều tiếp theo, đối với mỗi trường, chúng tôi tạo một

$ npm start # see all examples, go to localhost:3004 

2 bằng cách nói rằng cột

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

00 của tôi là duy nhất bằng cách sử dụng thuộc tính

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

01

Hãy tạo thành phần vùng chứa của chúng tôi

Trang chủ

Tạo

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

02 trong src/components/home/HomePage. js và dán đoạn sau vào đó

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table



$ npm install

4

Nhảy trực tiếp đến phương pháp

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

03. Phương thức

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

03 chỉ đơn giản khởi tạo một thành phần

$ npm start # see all examples, go to localhost:3004 

4 với các thuộc tính bắt buộc mà chúng tôi đã giải thích trước đó

Phương thức

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

06 được triển khai ở đây, đảm nhiệm việc gọi hành động cho trang được yêu cầu và cập nhật trạng thái

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

07 để điều khiển phân trang đặt trang hiện tại là hoạt động. Đó là nó

Bây giờ nếu bạn chạy

$ git clone https://github.com/AllenFang/react-bootstrap-table.git
$ cd react-bootstrap-table
$ npm install

08 và đi tới trình duyệt nơi nó mở http. //máy chủ cục bộ. 3005, bạn có thể thấy bảng có phân trang như thế này