开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件 原 荐

栏目: 服务器 · 发布时间: 5年前

内容简介:有这样一个需求,一位 React Suite(以下简称接下来,我们看一下首先,我们看一下支持大数据渲染,在页面中渲染过多的 DOM 元素会带来性能问题,必须得有一种解决方案去优化它,我们暂且叫做大表格虚拟化。

背景

有这样一个需求,一位 React Suite(以下简称 rsuite )的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染。 截止到目前(2019年1月18日)为止,开源 UI 库中没有找到可以支持的组件,所以 rsuite 在最新的版本中支持这一特性。

接下来,我们看一下 rsuite 中是怎么支持这两个功能?

大表格虚拟化

首先,我们看一下支持大数据渲染,在页面中渲染过多的 DOM 元素会带来性能问题,必须得有一种解决方案去优化它,我们暂且叫做大表格虚拟化。

所谓的大表格虚拟化,其实就是为表格设置一个较大的数据(比如 10000 条数据),然后虚拟一个表格隐藏掉不需要显示的数据。

为了解决让浏览器渲染的大量 DOM 时候出现的性能问题,我们不能把 10000 条数据都渲染到页面,采用一种方式,只渲染可视范围内数据。 同时为表格设置一个滚动条,只有在滚动到需要显示的区域时候才渲染该区域的数据,减少的 DOM 数量。

开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件 原 荐

预览地址

以上这是一个 10000 条数据的 Table,渲染后的 HTML 结构是:

开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件 原 荐

我们可以看到在 Table 中只渲染了 14 个 rs-table-row ,其中第一个和最后一个是没有 children , 只是一个拥有高度的占位符。 每一个 rs-table-row 都是绝对定位,所以即使 Table 中删除一个 Row, 或者新增一个 Row ,也不会改变其他 Row 的位置。 在这样的基础上,通过获取滚动条的滚动的位置,就很容易判断当前 Row 的 top 值是否在 Table 的可视范围内,同时更新所有的 Row。

很多优秀的库都实现了这样的功能,原理基本一致,比如 react-virtualized 就提供 Table 组件,但是他不支持 Tree。

树形表格

在表格中展示树形数据的需求,我们见得比较多就像甘特图表格展示那样。它有子父层级关系,可以展开子节点。

开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件 原 荐

这样一个表格,很多 Table 组件都支持,但是如果同时需要支持虚拟化就相对比较麻烦,因为在展开关闭节点的时候需要重新计算显示的 DOM 以及设置滚动条的位置。

开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件 原 荐

rsuite Table 组件之前的版本中,渲染的树形表格的 DOM 结构是一棵 Tree。 所以首先需要把 Tree 拍平,转换一个一维数组,为每一个节点设置父节点,通过父节点的深度渲染 Tree 节点的相对位置。 然后就比较好处理,只需要在点击展开关闭节点按钮的时候,处理好数据的过滤。

安装与使用

rsuite 的 Table 组件的设计,对开发还是非常方便,通过 <Table><Column><Cell><HeaderCell> 组件定义结构,通过赋值 data 属性渲染表格数据。

安装

npm install rsuite --save

如果你在项目只希望用到 Table, 不想安装整个 rsuite 库,你可以单独安装 rsuite-table

示例代码:

import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;
const data = [{ id: 1, name: 'foobar', email: 'foobar@xxx.com' }];

ReactDOM.render(
  <Table height={400} data={data}>
    <Column width={70} align="center" fixed>
      <HeaderCell>编号</HeaderCell>
      <Cell dataKey="id" />
    </Column>
    <Column width={200} fixed>
      <HeaderCell>姓名</HeaderCell>
      <Cell dataKey="name" />
    </Column>
    <Column width={200}>
      <HeaderCell>邮箱</HeaderCell>
      <Cell dataKey="email" />
    </Column>
  </Table>
);

最后

最后,对于一个成熟的 Table 组件怎么能只有这点功能,所以它还支持:

  • 自定义调整列宽
  • 锁定列
  • 自动换行
  • 排序
  • 分页
  • 编辑
  • 合并单元格
  • 自定义单元格
  • 自动列宽
  • 可展开行

剩下唯一的问题,就是您是否在项目中尝试它。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品经理全栈运营实战笔记

产品经理全栈运营实战笔记

林俊宇 / 化学工业出版社 / 49.8元

本书凝结作者多年的产品运营经验,读者会看到很多创业公司做运营的经验,书中列举了几十个互联网产品的运营案例去解析如何真正做好一个产品的冷启动到发展期再到平稳期。本书主要分为六篇:互联网运营的全面貌;我的运营生涯;后产品时代的运营之道;揭秘刷屏事件的背后运营;技能学习;深度思考。本书有很多关于产品运营的基础知识,会帮助你做好、做透。而且将理论和作者自己的案例以及其他人的运营案例结合起来,会让读者更容易......一起来看看 《产品经理全栈运营实战笔记》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具