在React中使用表，第一部分

程序员文章站 2022-03-27 08:54:29

...

总览

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

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

在这个由两部分组成的系列文章中，您将了解使用React Bootstrap Table组件在React中使用表格数据的来龙去脉。默认情况下，您将能够毫不费力地创建复杂且专业的外观表，并且能够自定义所需的每个零件。

创建一个Vanilla React App

我假设您熟悉React本身，并将专注于使用React Bootstrap Table 。 Envato Tuts +上有很多关于React的系列文章，您可以阅读作为背景知识。

简而言之，我使用react-create-app创建了一个香草React应用，然后安装了react-bootstrap-table： npm install react-bootstrap-table --save 。

将引导CSS添加到public / index.html文件很重要。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                  initial-scale=1, 
                  shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
                /css/bootstrap.min.css">

    <!-- bootstrap theme (Optional) -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
               /css/bootstrap-theme.min.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

网络风暴

如果您使用JetBrains的WebStorm，并且要运行测试， --env=jsdom在运行配置中添加--env=jsdom 。

基本表

我们将从一个基本表开始。这是基本的表格组件。它从react-bootstrap-table导入BoostrapTable和TableHeaderColumn，还从dist目录导入CSS。

render（）方法呈现一个包含三列的表：“ ID”，“ Name”和“ Value”。表中的实际数据来自“ data”属性（this.props.data）。数据包含来自搞笑节目《逮捕的发展》中某些角色的名字。

import React, { Component } from 'react';
import {BootstrapTable, 
       TableHeaderColumn} from 'react-bootstrap-table';
import '../css/Table.css';
import '../../node_modules/react-bootstrap-table/css/
        react-bootstrap-table.css'


class Table1 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'>
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

我在标准App.js的render（）方法中实例化了BasicTable并传递了一些硬编码的数据：

import React, { Component } from 'react';
import './App.css';
import Table1 from './components/Table1'

var data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];


class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        <Table1 data={data}/>
      </div>
    );
  }
}

export default App;

要查看该表，请输入： npm start 。 create-react-app创建的配置监视您的代码，并且在您进行任何更改时都会重新编译，因此您只需运行一次，然后每次更改都会自动反映出来。

Compiled successfully!

You can now view react-table in the browser.

  Local:            https://localhost:3000/
  On Your Network:  http://192.168.1.136:3000/

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

结果如下：

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

使用列

您可以控制列的许多方面。特别是，列宽可以以绝对单位指定为百分比，也可以不指定。未指定列的列宽是其余部分均分。例如，对于100 px的表格宽度，一列指定为15 px，第二列指定为25％（25 px），第三列指定为30％（15 px）。

另外两列未指定宽度。第1列，第2列和第3列在一起使用的像素为70像素，第4列和第5列的像素为30像素，它们将平均分配。第4列和第5列的宽度均为15像素。请注意，如果调整表的大小，数字将更改。只有第1列的宽度始终为15像素。

其他列将基于表格宽度进行计算。您还可以管理文本和列的对齐方式以及标题和列的样式。这是有关如何指定不同的列宽，文本对齐方式和自定义样式的示例：

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} from 
       'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


class Table2 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey
                             dataField='id'
                             dataAlign='center'
                             headerAlign="left"
                             width="30"
                             tdStyle={
                                 {backgroundColor: 'green'}}>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
                             dataAlign='center'
                             headerAlign="center"
                             width="20%"
                             thStyle={
                                 {fontWeight: 'lighter', 
                                 color: 'red'}}>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
                             dataAlign='center'
                             headerAlign="right">
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table2

造型你的桌子

您已经了解了如何设置各个列和标题的样式，但是样式可以做得更远。 React-bootstrap-table提供了许多自定义选项。首先，您可以简单地将<BootstrapTable data={this.props.data} striped hover>属性添加到BootstrapTable组件中，以在每行上获得备用背景色： <BootstrapTable data={this.props.data} striped hover>

要设置所有行的样式，请使用trClassName ： <BootstrapTable data={data} trClassName='tr-style'>

如果您真的想花哨的话，trStyle可以起作用。查看下面的表格组件，这些组件对行名为“ George Michael”的行进行了不同的样式设置：

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function rowClassNameFormat(row, rowIdx) {
  // row is whole row object
  // rowIdx is index of row
  console.log(row)
  return row['name'] === 'George Michael' ? 
    'GeorgeMichael-Row' : 'Other-Row';
}


class Table3 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        trClassName={rowClassNameFormat}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table3

Table.css中定义了GeorgeMichael -Row和Other-Row CSS类：

.Table-header {
    background-color: #ccc;
    color: blue;
    padding: 10px;
    text-align: left;
}


.GeorgeMichael-Row {
    background-color: plum;
}

.Other-Row {
    background-color: greenyellow;
}

选择行

将数据存储在表中后，可能需要选择一些行以便对其执行一些操作。 React-bootstrap-table提供了多种选择选项。所有选项都组织在一个对象中，该对象作为selectRow属性传递给组件。以下是一些选择选项：

单选模式（单选按钮）
多选模式（复选框）
可配置的列选择宽度
按行选择：默认情况下，您必须单击选择器（单选按钮或复选框）
隐藏选择列（如果在行上单击选择为true，则很有用）
更改选择的背景色
最初选择的行
选择钩（在单行上或在选择所有行时）。

以下组件演示了许多这些选项：

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function onSelectRow(row, isSelected, e) {
  if (isSelected) {
    alert(`You just selected '${row['name']}'`)
  }
}

const selectRowProp = {
  mode: 'checkbox',
  clickToSelect: true,
  unselectable: [2],
  selected: [1],
  onSelect: onSelectRow,
  bgColor: 'gold'
};

class Table4 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        selectRow={selectRowProp}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table4

结论

在这一部分中，我们使用react-create-app创建了一个简单的React应用程序，添加了React-Bootstrap-Table，用数据填充了表，使用了列，设置了表的样式，并选择了行。

在下一部分中，我们将通过扩展行，添加行，删除行并涵盖分页，单元格编辑和高级自定义来继续这一过程。敬请关注。

翻译自: https://code.tutsplus.com/tutorials/working-with-tables-in-react-part-one--cms-29682

相关标签： vue java python js react

上一篇：世界上最快的兔子，欧洲野兔(72公里/小时)

下一篇： Lombok添加@AllArgsConstructor后报错“错误：找不到符号符号：类 ConstructorProperties ”

在React中使用表，第一部分

总览

创建一个Vanilla React App

网络风暴

基本表

使用列

造型你的桌子

选择行

结论

在C#中List集合使用First()方法获取第一个元素的操作

在react中，使用axios获取后台服务器数据的方法

dual表在oracle，mysql和hive中的使用实例

为什么在 React 16 版本中 render 阶段放弃了使用递归？

typescript在react组件中的使用

【JavaScript】Lodash在React Native中的使用

使用sql语句在emp员工表中实现各种操作

在AIX Version 5.3中使用Java和PHP技术进行开发，第1部分:设置Java环境_PHP教程

在thinkphp中如何使用.sql文件创建数据库和数据表

在thinkphp中如何使用.sql文件创建数据库和数据表