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

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地址，就直接说实现思路吧

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

项目地址gitee地址

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