React中使用表格：第一部分-js教程-PHP中文网

React中使用表格：第一部分

WBOY

发布： 2023-09-04 19:21:06

原创

1483人浏览过

用于呈现数据的最常见的用户界面元素之一是表格。事实证明，使用表格时需要控制很多方面，例如：

定义列和标题
各种单元格格式（文本、数字、复选框）
调整大小
过滤
动态成长
样式

在这个由两部分组成的系列中，您将了解使用 React Bootstrap Table 组件在 React 中处理表格数据的细节。您将能够轻松创建复杂且具有专业外观的表格，并且能够自定义各个方面。

开始使用

首先，您应该熟悉 React 本身。如果您需要 React 入门知识，Envato Tuts+ 有一个很棒的系列可以帮助您开始使用 React。在本教程中，我们将重点关注 React Bootstrap Table2 的使用。

首先，使用 create-react-app 命令创建一个 React 应用。您可以在 React 初学者速成课程中了解如何设置 create-react-app。

create-react-app react-table-app

登录后复制

现在导航到项目文件夹并安装 React Bootstrap Table 2 和 Bootstrap。

cd react-table-app
npm install react-bootstrap-table-next --save
npm install --save bootstrap@4.0.0

登录后复制

创建基本表

我们将从一个基本表格开始。我们首先导入 BootstrapTable 组件和 CSS，如下所示。

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';

登录后复制

首先，我们初始化数据和列变量，然后将数据赋值给BootstrapTable组件。该数据包含搞笑节目《发展受阻》中一些角色的名字。

const data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];
const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'value',
  text: 'Product value'
}];

登录后复制

Bootstrap 组件采用以下属性。

keyField
data
列

render() 方法呈现一个包含三列的表：“ID”、“名称”和“值”。

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable keyField='id' data={ person } columns={ columns } />
      </div>
    );
  }
}

登录后复制

要查看该表，请发出命令 npm start--reload。由 create-react-app 创建的配置会监视您的代码，并在您更改任何内容时重新编译，因此您只需运行它一次。然后，每个更改都会自动反映出来。

Compiled successfully!

You can now view my-table-app in the browser.

  Local:            https://localhost:3002
  On Your Network:  http://192.168.43.206:3002

Note that the development build is not optimized.
To create a production build, use npm run build.

登录后复制

结果如下：

React中使用表格：第一部分

请注意，每列的宽度相同。

使用列

您可以控制列的许多方面。特别是，列宽可以用绝对单位、百分比来指定，也可以不指定。未指定列的列宽为均分后的余数。例如，对于我们的基本表，我们指定列如下：

第一列：20%
第二列：60%
第三列：20%

您还可以管理文本和列的对齐方式以及标题和列的样式。以下是如何指定不同列宽、文本对齐方式和自定义样式的示例：

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true,
  headerStyle: (colum, colIndex) => {
          return { width: '60%', textAlign: 'center' };
        }
}, {
  dataField: 'value',
  text: 'Product value',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
  
}];

登录后复制

表格现在看起来像这样：

React中使用表格：第一部分

设计您的表格

您已经了解了如何设置各个列和标题的样式，但样式设置可以走得更远。 React Bootstrap 表 2 提供了很多定制选项。首先，您只需将 striped 和 hover 属性添加到 BootstrapTable 组件即可获取每行的备用背景颜色。

极品模板微商城订单系统

微商城订单管理系统是一款基于php+mysql开发的php订单管理系统，她的特点如下：产品特色：支持商品规格、订单短信提醒，订单提交限制，站外调用，批量发货/导出，数据报表，物流轨迹、免签支付等。 1、高度开源：除核心授权文件外全部开源，二开方便。 2、分布式部署：支持分布式部署、支持数据库读写分离。 3、第三方存储：支持附件腾讯云、阿里云、七牛云存储

查看详情

让我们将 striped 和 hover 属性应用到我们的表中。

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        keyField='id'
        data={ person }
        columns={ columns } 
        />
      </div>
    );
  }
}

登录后复制

React中使用表格：第一部分

查看如何使用不同颜色设置不同列的样式。

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc }
}, {
  dataField: 'value',
  text: 'Product value',
  style: { backgroundColor: #fed9b7 }
}];

登录后复制

React中使用表格：第一部分

表格排序

React Bootstrap Table 2 允许对列进行排序。这是通过在 columns 定义中提供 sort: true 属性来完成的。

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc },
  sort: true
}, {
  dataField: 'value',
  text: 'Product value',
      style: { backgroundColor: #fed9b7 }
}];

登录后复制