React+Typescript实现一个甘特图表格

好久没更新博客了，最近工作写了一个有趣的东西，想和大家分享一下

照例先放效果图

准备项目，直接放出依赖项目

{"name": "react-gantt-table","version": "0.1.0","private": true,"dependencies": {"@testing-library/jest-dom": "^5.14.1","@testing-library/react": "^12.0.0","@testing-library/user-event": "^13.2.1","@types/jest": "^27.0.1","@types/node": "^16.7.13","@types/react": "^17.0.20","@types/react-dom": "^17.0.9","axios": "^0.24.0","mockjs": "^1.1.0","react": "^17.0.2","react-dom": "^17.0.2","react-scripts": "5.0.0","react-tooltip": "^4.2.21","react-window": "^1.8.6","typescript": "^4.4.2","web-vitals": "^2.1.0"},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},"eslintConfig": {"extends": ["react-app","react-app/jest"],"rules": {"no-undef": "off","no-restricted-globals": "off","no-unused-vars": "off"}},"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies": {"@types/mockjs": "^1.0.5","@types/react-window": "^1.8.5"}
}

具体代码后面我会放出gitee地址，就直接说实现思路吧

为了实现首列固定和头部固定，我是才用三个部分渲染的思路，就是用一个大的盒子装起来全部、然后第一列绝对定位、头部绝对定位，中间的能滚动的再用一个盒子装起来实现横向滚动和竖向滚动
为了实现tooltips使用react-tooltips这个库（看上面的依赖项目），为了能让这个tooltips框框跟随鼠标，使用mouseMove事件记录坐标点，然后动态修改它的位置
为了让页面顺畅，使用react-window这个虚拟滚动库，然后通过这个库自带的滚动方法onScroll和scrollTo方法实现左侧第一列和中间的表关联滚动，然后使用ref实现表头和中间表横向关联滚动
这个树形结构是可以点击打开的，它们其实都是同一个行，或者说同一层级的，只是通过CSS让子节点缩紧了看起来像子节点，然后每次点击父节点的时候判断点的是哪个节点，然后动态从当前点击的节点动态追加条目到数组，反之截取。让react帮我处理视图，我们只关注数据
为了模拟大量数据，我使用mockjs这个库➕axios模拟了1000条数据，我感觉应该渲染十万条不是问题

项目地址gitee地址

不是很完善，而且写死了两级树节点，还有样式什么的我也没空封住起来，有用到的朋友们自己去修改源码吧，至于无限级的树或许可以用递归实现。有问题可以提issue，或许能帮到你吧。如果可以希望可以给我点个start哈哈

React+Typescript实现一个甘特图表格相关推荐

私域流量企业团队运营工作规划方案甘特图表格
私域流量企业团队运营工作规划方案甘特图表格网盘文档下载地址https://pan.baidu.com/s/1WJ5XnWCfarPYe8xagY88Cw?pwd=w56h 主要分享其中的三个思维模型 ...
可视化项目管理只需一个甘特图
什么是数据可视化?数据可视化是一个以图像或者图形来展示数据的方法,它有助于人们可视化处理那些困难的概念,以及确认那些仍未被发掘的模式. 可视化能将数据以更加直观的方式展现出来项目的情况,使数据更加客观 ...
一起来了解React的四种优秀甘特图方案（下篇）
接上篇!!! 3. DHTMLX Gantt(https://dhtmlx.com/docs/products/dhtmlxGantt/) 作为一款功能齐全的甘特图工具,DHTMLX Gantt能够实 ...
怎么画好一个项目甘特图（内附实用模板）
作者|鲁佳出品|阿里巴巴新零售淘系技术部导读:甘特图是一个非常实用的项目管理工具.在阿里的日常项目工作中,不管是 PD 还是开发同学,大家普遍都会遇到需要规划项目工作安排的情况,这个时候画一个甘特 ...
Excel学习笔记：P30-如何制作一个让老板眼睛为之一亮的甘特图
文章目录一.甘特图 1.1 设置表格格式 1.2 创建甘特图 1.3 添加任务进度 1.4 添加百分比标识一.甘特图 1.1 设置表格格式甘特图就是一个时程表,它的横轴代表了时间,纵轴则是我们手 ...
一个简单漂亮好用的甘特图软件
一个简单漂亮好用的甘特图软件知竹 - 一个甘特图项目计划管理协作平台项目demo 一.添加任务点击任务标题变成可编辑格式按回车键即在当前任务下添加一个任务二.设置为子任务选中一行任务 (按 ...
列的数目比列的名字要多_你们要的甘特图来啦！还有具体做法哦！
作为项目的负责人,"时间管理"也是极为重要的一环.甘特图作为常用的项目管理工具之一,有助于把一个大型项目划分为几个小部分,并有条理地展示.甘特图(Gantt chart)又称为横道 ...
html 甘特图_工具项目管理工具详解——甘特图
作为项目的负责人,"时间管理"也是极为重要的一环.甘特图作为常用的项目管理工具之一,有助于把一个大型项目划分为几个小部分,并有条理地展示. 甘特图(Gantt chart)又称为横 ...
项目管理excel_项目管理甘特图是什么？怎么做才能更高效？（EXCEL制作甘特图详细步骤）...
项目管理甘特图是什么?甘特图即Gantt chart,又被称之为横道图.条状图.其命名是由提出者亨利·L·甘特(Henrry L.Ganntt)先生的名字而来的.甘特图是以图示的方式,并通过活动列表和 ...

React+Typescript实现一个甘特图表格

React+Typescript实现一个甘特图表格

照例先放效果图

准备项目，直接放出依赖项目

具体代码后面我会放出gitee地址，就直接说实现思路吧

项目地址gitee地址

React+Typescript实现一个甘特图表格相关推荐

最新文章

热门文章