首页 体育 教育 财经 社会 娱乐 军事 国内 科技 互联网 房产 国际 女人 汽车 游戏

使用 Carbon 分页组件实现数据分页

2020-05-21

Web 组件化和复用是现在一切前端开发人员寻求的东西。Carbon 是 IBM 开源的 Web 组件库。将简直一切常用 Web 功用封装成组件,能够重用和扩展。组件遵从了 IBM 共同的设计规范和风格,供给了一致的界面风格款式,并在此基础上支撑了当时盛行结构的不同完成, 比方 React、Angular、Vanilla 和 Vue,只需开发者所运用的是这三种结构之一,就能够运用相应的组件。 除此之外, 它还介绍了页面设计思维和设计东西。您还能够在现有的组件上进行扩展来添加额定的功用。

Carbon 供给的 Web 组件,包含下拉列表框、可折叠阶段、表格、对话框等等,现在广泛运用于IBM Cloud和 IBM 云上各种服务的前端窗口。

本文将经过示例展现怎么运用 Carbon React 组件库中的分页组件来开发一个简略的分页功用,抛砖引玉,从而带您步入 Carbon 的大门。因为分页展现常常伴跟着表格的生成, 所以一起也展现了表格相关的组件的运用。

假如您想了解更多其他组件的运用办法,能够 在 GitHub 上检查更多 Carbon 文档 。

信任许多前端开发人员运用过 Bootstrap 的分页组件。相对于 Bootstap,Carbon 的分页组件需求更少的代码,更简略简略上手。比照一下,例如:

 nav aria-label= Page navigation 
 ul > 
 Carbon 分页 
 
 pagination totalItems=100 … /pagination 

咱们能够看到,Bootsrap 供给的分页组件封装比较简略、粒度不大, 需求更多的 HTML 代码去完成。而 Carbon 分页组件封装粒度大、运用简略。比照下来,Carbon 的组件运用更简练,也更易用而不必忧虑代码抵触。

示例分页界面

咱们先来看看示例分页界面,如图 1 所示:

图 1. 数据分页的作用图

上图是对 100 条数据进行分页,每页显现 5 条数据,一共有 20 页。您也能够调整每页显现的条目数,或跳到指定的页数,页面将会主动改写。

下面咱们来运转示例并看看怎么运用 Carbon 分页组件以及怎么调用表格组成来完成这个作用。

运转示例 下载 源代码压缩文件 , 并解压到本地目录. 例如: /Download/app 。 装置程序所需求的依靠的包,进入解压后的目录 /Download/app

,并运转:

Npm install

或许假如您现已装置 yarn 管理器,也能够运转:

Yarn

运转下面指令发动运用:

npm start

或许运转:

yarn start

React 将主动创立一个本地 HTTP 服务器。发动后的输出成果相似如下:

Compiled successfully!
You can now view carbon-react-sample in the browser.
 http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.

然后依照提示在浏览器中翻开给出的链接 http://localhost:3000/ 。

React 运用的目录结构如下所示:

图 2. 目录结构

下面是目录中相关内容的解说:

Public/index.html : 运用的根节点。整个运用的 HTML 结构体将会挂载到根节点下。 src/index.js :运用发动文件。首要将运用生成的 HTM 元素挂载到根节点。 src/data.js : 生成运用示例数据。 src/App.js : 包含怎么运用组件 Pagination 代码。 index.js 文件会将 App.js 生成的 HTM 元素挂载到根元素下。 src/App.css 和 index.css : 假如想取得对界面更多的操控,能够在此寄存自界说 CSS 款式。 src/components :包含了表格组件的运用示例。在这儿咱们新创立了一个 React 组件,对 Carbon 表格组件进行了调用。

接下来咱们首要重视 App.js 和 src/components/ItemsTable.js 两个文件。首要, App.js 界说了名为 App 的新 React 组件, 而且将分页需求的参数放到了 state 目标中,以此盯梢变量的改动。假如 state 中相关的变量改动了,React 将主动改写页面,显现数据更新后的视图。关于 state 目标和视图之间的联系, 请检查 React 网站。

运用分页组件

为了运用 Carbon 的分页组件,咱们需求导入它和示例数据以及表格组件,如清单 1 所示:

清单 1. 导入分页组件和示例数据以及表格组件
import React, { Component } from react 
import datasource from './data';
import ItemTable from './components/ItemsTable';
import {Pagination} from 'carbon-components-react';
import 'carbon-components/css/carbon-components.css'
import './App.css';
class App extends Component {
 constructor {
 super;
 this.state = {
 items: datasource,
 // totalItems: 0,
 currentPageSize: 10,
 firstRowIndex: 0,
 }

在 App 组件中界说一个 state 目标来寄存参数的初始值。其间:

Items :数组,包含了悉数示例数据。 currentPageSize :界说了当时每页显现几条数据。 firstRowIndex :界说了翻页时获取数据方位。 totalItems :示例数据的数量,界说在烘托办法 中。

接下来在 render 办法中界说运用视图,并将烘托成果显现在页面上,如清单 2 所示:

清单 2. 界说运用视图
render {
 var rows = this.state.items;
 var totalItems = rows.length;
 return } 
 /ItemTable 
 /div 
 /div 
 div className={'bx--row'} 
 div className={'bx--col-lg-12'} 
 Pagination
 totalItems={totalItems}
 backwardText= Previous page 
 forwardText= Next page 
 pageSize={this.state.currentPageSize}
 pageSizes={[5, 10, 25, 100]}
 itemsPerPageText= Items per page 
 onChange={ = {
 if  {
 this.setState;
 this.setState });
 this.forceUpdate;
 /div 
 /div 
}

能够看到在 render 办法中选用了分页组件 Pagination … /Pagination 并传入了相关的动态参数 firstRowIndex,currentPageSize,totalItems 。当其间任何一个值发生了改动时,表格视图也将相应的发生改动。

这儿阐明一下事情响应函数 onChange 办法。当点击翻页按钮,或许挑选跳入的页面,或许改动每页显现记载数的时分, onChange 办法将被触发,从头核算读取数据的开始方位,读取的数量,而且从头烘托页面。

这样一个数据分页就完成了。真实完成分页功用只需求一个 pagination

签就能够到达意图。

调用表格组件

咱们还看到,因为分页常常伴跟着表格的运用。因此在烘托办法中运用了表格组件。为了使代码更明晰,咱们来创立一个新的 React 组件 ItemTable 来调用表格组件。

清单 3. 创立 ItemsTable.js
import React from 'react'
import {TableContainer, Table, TableHead, TableRow, TableBody, TableCell} from carbon-components-react 
const ItemsTable =  = {
 const cells =  = {
 return rows.map = {
 return }
 /TableBody 
 /Table 
 /TableContainer 
export default ItemsTable;

代码阐明:

界说新的组件 ItemsTable,参数是数据数组。 在组件的烘托办法 render 中,运用了 Carbon 的表格组件。它包含:
TableContainer
Table
TableHead
TableBody
TableRow
界说内部办法 Cells。针对每条数据,将会创立一个表行目标。

检查 Carbon 组件文档,能够对表格进行更多定制和操控。

您或许注意到,在一切上面的代码示例中,render 回来的结构体都像这样:

return 

这种语法称之为 JSX,一种 JavaScript 的语法糖。JSX 详细信息, 能够检查 JSX 语法阐明。

下载示例代码

下载本文完好的示例代码:

取得代码

结束语

在整个 IBM Cloud 的外观上,您能够处处看到 Carbon 组件运用的影子。在 IBM 内部,新的 Cloud 项目也都选用 Carbon 组件作为 UI 的规范。跟着时刻的推移,信任有越来越多的开发者参加 Carbon 组件推行的阵营,能更深入了解和运用 Carbon 组件。一起也给 Carbon 的持续前行的方向供给名贵的定见,无论怎么,开发者的需求才是 Carbon 仅有关怀的中心、行进的动力。事实上,Carbon Github 代码库房十分十分活泼,有超越 200 多位的贡献者。

期望 Carbon 将来在功用上越来越丰厚,运用上越来越简略,使前端开发不再是开发者的绊脚石,而是享用容易完成美丽的页面所带来的高兴。

参阅资源 Carbon GitHub 代码库房,检查开源项目最新更新和相关设计阐明。 IBM 开源项目:Carbon Design System 检查 React 网站,获取结构文档,了解 state 目标和 render 办法的生命周期。 参阅 Bootstrap 分页组件 关于 JSX 语法阐明
 pagination totalItems=100 … /pagination 

咱们能够看到,Bootsrap 供给的分页组件封装比较简略、粒度不大, 需求更多的 HTML 代码去完成。而 Carbon 分页组件封装粒度大、运用简略。比照下来,Carbon 的组件运用更简练,也更易用而不必忧虑代码抵触。

咱们先来看看示例分页界面,如图 1 所示:

上图是对 100 条数据进行分页,每页显现 5 条数据,一共有 20 页。您也能够调整每页显现的条目数,或跳到指定的页数,页面将会主动改写。

下面咱们来运转示例并看看怎么运用 Carbon 分页组件以及怎么调用表格组成来完成这个作用。

,并运转:

Npm install

或许假如您现已装置 yarn 管理器,也能够运转:

Yarn

运转下面指令发动运用:

npm start

或许运转:

yarn start

React 将主动创立一个本地 HTTP 服务器。发动后的输出成果相似如下:

Compiled successfully!
You can now view carbon-react-sample in the browser.
 http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.

然后依照提示在浏览器中翻开给出的链接 http://localhost:3000/ 。

React 运用的目录结构如下所示:

下面是目录中相关内容的解说:

接下来咱们首要重视 App.js 和 src/components/ItemsTable.js 两个文件。首要, App.js 界说了名为 App 的新 React 组件, 而且将分页需求的参数放到了 state 目标中,以此盯梢变量的改动。假如 state 中相关的变量改动了,React 将主动改写页面,显现数据更新后的视图。关于 state 目标和视图之间的联系, 请检查 React 网站。

为了运用 Carbon 的分页组件,咱们需求导入它和示例数据以及表格组件,如清单 1 所示:

import React, { Component } from react 
import datasource from './data';
import ItemTable from './components/ItemsTable';
import {Pagination} from 'carbon-components-react';
import 'carbon-components/css/carbon-components.css'
import './App.css';
class App extends Component {
 constructor {
 super;
 this.state = {
 items: datasource,
 // totalItems: 0,
 currentPageSize: 10,
 firstRowIndex: 0,
 }

在 App 组件中界说一个 state 目标来寄存参数的初始值。其间:

接下来在 render 办法中界说运用视图,并将烘托成果显现在页面上,如清单 2 所示:

render {
 var rows = this.state.items;
 var totalItems = rows.length;
 return } 
 /ItemTable 
 /div 
 /div 
 div className={'bx--row'} 
 div className={'bx--col-lg-12'} 
 Pagination
 totalItems={totalItems}
 backwardText= Previous page 
 forwardText= Next page 
 pageSize={this.state.currentPageSize}
 pageSizes={[5, 10, 25, 100]}
 itemsPerPageText= Items per page 
 onChange={ = {
 if  {
 this.setState;
 this.setState });
 this.forceUpdate;
 /div 
 /div 
}

能够看到在 render 办法中选用了分页组件 Pagination … /Pagination 并传入了相关的动态参数 firstRowIndex,currentPageSize,totalItems 。当其间任何一个值发生了改动时,表格视图也将相应的发生改动。

这儿阐明一下事情响应函数 onChange 办法。当点击翻页按钮,或许挑选跳入的页面,或许改动每页显现记载数的时分, onChange 办法将被触发,从头核算读取数据的开始方位,读取的数量,而且从头烘托页面。

这样一个数据分页就完成了。真实完成分页功用只需求一个 pagination

签就能够到达意图。

咱们还看到,因为分页常常伴跟着表格的运用。因此在烘托办法中运用了表格组件。为了使代码更明晰,咱们来创立一个新的 React 组件 ItemTable 来调用表格组件。

import React from 'react'
import {TableContainer, Table, TableHead, TableRow, TableBody, TableCell} from carbon-components-react 
const ItemsTable =  = {
 const cells =  = {
 return rows.map = {
 return }
 /TableBody 
 /Table 
 /TableContainer 
export default ItemsTable;

代码阐明:

TableContainer
Table
TableHead
TableBody
TableRow

检查 Carbon 组件文档,能够对表格进行更多定制和操控。

您或许注意到,在一切上面的代码示例中,render 回来的结构体都像这样:

return 

这种语法称之为 JSX,一种 JavaScript 的语法糖。JSX 详细信息, 能够检查 JSX 语法阐明。

下载本文完好的示例代码:

取得代码

在整个 IBM Cloud 的外观上,您能够处处看到 Carbon 组件运用的影子。在 IBM 内部,新的 Cloud 项目也都选用 Carbon 组件作为 UI 的规范。跟着时刻的推移,信任有越来越多的开发者参加 Carbon 组件推行的阵营,能更深入了解和运用 Carbon 组件。一起也给 Carbon 的持续前行的方向供给名贵的定见,无论怎么,开发者的需求才是 Carbon 仅有关怀的中心、行进的动力。事实上,Carbon Github 代码库房十分十分活泼,有超越 200 多位的贡献者。

期望 Carbon 将来在功用上越来越丰厚,运用上越来越简略,使前端开发不再是开发者的绊脚石,而是享用容易完成美丽的页面所带来的高兴。

热门文章

随机推荐

推荐文章