antd table设置表格一个单元格的字体颜色_开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景
有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染。 截止到目前( 2019 年 1 月 17 日)为止,开源 UI 库中没有找到可以支持的组件,所以 rsuite 在最新的版本中支持这一特性。
接下来,我们看一下 rsuite 中是怎么支持这两个功能?
大表格虚拟化
首先,我们看一下支持大数据渲染,在页面中渲染过多的 DOM 元素会带来性能问题,必须得有一种解决方案去优化它,我们暂且叫做大表格虚拟化。
所谓的大表格虚拟化,其实就是为表格设置一个较大的数据(比如 10000 条数据),然后虚拟一个表格隐藏掉不需要显示的数据。
为了解决让浏览器渲染的大量 DOM 时候出现的性能问题,我们不能把 10000 条数据都渲染到页面,采用一种方式,只渲染可视范围内数据。 同时为表格设置一个滚动条,只有在滚动到需要显示的区域时候才渲染该区域的数据,减少的 DOM 数量。
预览地址
以上这是一个 10000 条数据的 Table,渲染后的 HTML 结构是:
我们可以看到在 Table 中只渲染了 14 个 rs-table-row
,其中第一个和最后一个是没有 children
, 只是一个拥有高度的占位符。 每一个 rs-table-row
都是绝对定位,所以即使 Table 中删除一个 Row, 或者新增一个 Row ,也不会改变其他 Row 的位置。 在这样的基础上,通过获取滚动条的滚动的位置,就很容易判断当前 Row 的 top 值是否在 Table 的可视范围内,同时更新所有的 Row。
很多优秀的库都实现了这样的功能,原理基本一致,比如 react-virtualized
就提供 Table 组件,但是他不支持 Tree。
树形表格
在表格中展示树形数据的需求,我们见得比较多就像甘特图表格展示那样。它有子父层级关系,可以展开子节点。
这样一个表格,很多 Table 组件都支持,但是如果同时需要支持虚拟化就相对比较麻烦,因为在展开关闭节点的时候需要重新计算显示的 DOM 以及设置滚动条的位置。
在 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 组件怎么能只有这点功能,所以它还支持:
- 自定义调整列宽
- 锁定列
- 自动换行
- 排序
- 分页
- 编辑
- 合并单元格
- 自定义单元格
- 自动列宽
- 可展开行
剩下唯一的问题,就是您是否在项目中尝试它。
antd table设置表格一个单元格的字体颜色_开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件相关推荐
- antd table设置表格一个单元格的字体颜色_微软Office三件套,各有一个效率神器,全都知道的人不超过1%...
我们都知道,微软Office三件套是指Word.Excel和Powerpoint,虽然微软Office套件还有诸如Outlook.Onenote等软件,但平时用得最多的,还是这三件套. 三件套其实构成 ...
- antd table设置表格一个单元格的字体颜色_alireacttable:高性能 React 表格组件
点击上方蓝字关注我们 简介 在前端开发中,表格一直都是最复杂的组件之一.表格不仅要支持丰富的操作(排序.过滤.搜索.分页.自定义列等),还要有非常好的性能以展示大量数据.很多组件库(例如 fusion ...
- 基于Hutool工具来设置Excel一个单元格自定义背景颜色
设置未生效 一开始,cell设置背景颜色不起作用,代码为: cellStyle.setFillBackgroundColor(IndexedColors.BRIGHT_GREEN1.getIndex( ...
- element-ui table 指定单元格动态字体颜色设置
element-ui table 指定单元格动态字体颜色设置 根据后端返回的值,动态的自动变更element-ui table 指定单元格的字体的颜色或者整行的颜色值 一.指定单元格突出显示颜色,如: ...
- java中sproingboot导出模板导出excel,以及设置每一个单元格的方式导出。导出工单,周日历。
springboot使用poi技术 导出工单和周日历的方式,本人也是查阅很多网址资料才实现成功,本文仅供参考,为自己做一个记录. 第一步引入依赖: <dependency><grou ...
- DataGridView中在新增行时怎样设置每个Cell单元格的字体样式
场景 DataGridView怎样实现添加.删除.上移.下移一行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10281414 ...
- Excel单元格部分字体颜色Python实现
文章目录 效果图 xlsxwriter 报错场景 xlsxwriter其它接口 效果图 xlsxwriter from xlsxwriter.workbook import Workbook impo ...
- layui表格一个单元格放多个数据
先上数据库表 销售订单表: 商品表: 销售订单明细表: 销售订单明细表中是1对多的关系 一个销售订单对多个商品 如果按常规的查询方法把数据返回到layui表格,会出现下面这种情况 而现在我需要把同一个 ...
- Java 导出exl表格 一个单元格内换行
String a = "换\n行" \n exl表格中会自动换行,和前端一样
最新文章
- linux复制压缩文件,Linux如何复制,打包,压缩文件
- aop的四种增强以及JDK动态代理、Cglib动态代理
- IIS7.5部署ASP.NET失败
- saltstack-gdlwolf自学总结第二篇:salt常用帮助查找命令
- zepto和jquery的区别,zepto的不同使用8条小结
- Ajax基于rest风格上传图片
- Angular ctorParameters,decorator等元数据,包含在ActivatedRouteSnapshot数据结构里
- Myeclipse项目加入maven支持
- 基于序贯重要性重采样的粒子滤波and(RBPF)
- 微信小程序制作模板套用时需要注意什么呢?
- RS232和RS485通讯接口的区别
- 80psi等于多少kpa_1kpa等于多少psi
- OpenCV-图片叠加
- html 导出 word 调整页边距
- 信息与计算科学跨考计算机,信息与计算科学考研的方向介绍
- css3 - 图标元素动画效果5 - 弹性动画效果
- 硬件-4-戴尔Inspiron 5577笔记本拆机
- 细数20世纪最伟大的10大算法
- Linux(CentOS7) NVIDIA GeForece GTX 745 显卡驱动
- JavaScript实现简易ATM
热门文章
- 图像处理中的傅里叶变换和频率域滤波概念
- MFC SetWindowPos
- win32汇编基础概念
- linux查找所有字文件,Linux查找含有某字符串的所有文件
- 百一测评java基础答案_百一测评——《Web应用开发》选择题(含参考答案)—JavaEE基础...
- django 怎么加权限 静态资源目录_Django1.7如何配置静态资源访问
- apache部署https
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
- opencv 阈值分割_CVPR2019实例分割Mask Scoring RCNN
- Android开发之部分字符串可实现超链接点击事件的方法