react-jsgantt 甘特图使用小结

最新推荐文章于 2024-07-24 10:36:08 发布
最新推荐文章于 2024-07-24 10:36:08 发布
阅读量5.5k 收藏 11
点赞数 2
分类专栏： 知识小结 文章标签： react-jsgantt react 甘特图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43858949/article/details/93853558
版权

react-jsgantt使用小结

资源git地址

https://github.com/jsGanttImproved/react-jsgantt

为什么记录?因为我在网上确实没有找到相应react-jsgantt的配置相关文件,所以就自己记录一下,以后备用吧!

效果展示

汉化是通过更改node_modules/_react-jsgantt@2.2.0@react-jsgantt/dist/index.es.js文件,具体修改往下看

汉化左边表格,自定义左表头

在这里插入图片描述
图了方便所以翻译的不对,但是我是在这里把右边图表汉化的
在这里插入图片描述
这是修改表头的部分,我将所有原来的表头全部关闭了,可以看到配置中有很多是0,这个插件对于开关来说很多都是由0,1来控制开关的.

onChange事件

在这里插入图片描述
因为项目中不需要表格中编辑,所以没有深入看,目前我只知道,这个事件是在编辑input失去焦点之后才会触发,有很多个参数,大家自己看吧.

onClick事件

在这里插入图片描述

注意事项

因为我从git地址上clone下来的demo无法cnpm i(网速太差)所以我不知道,具体demo是什么样子,上述基本就是昨天下午发现的一些用法,关于更改样式目前还在看源码,大部分的更改都在index.es.js文件中.

拓展:其他甘特图

https://dhtmlx.com/docs/products/dhtmlxGantt/
个人感觉相当好用,但是要收费,属于商业版
jqueryGannt属于jq的用法,我暂时还没解决在react中怎么使用(有解决的大佬能发一份参考一下吗?)
联系地址:739834932@qq.com,谢谢大佬们观看,欢迎指点江山~~溜了溜了

陈小洋
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-jsgantt:React gantt组件包装器用于jsgantt改进
05-01
react-jsgantt React JS甘特 安装 npm install --save react-jsgantt 用法 import * as React from 'react' import JSGantt from 'react-jsgantt' class Example extends React . Component { constructor ( props...
react-native-image-resizer：with使用React Native调整本地图像的大小
01-31
react-native link react-native-image-resizer 安卓 注意：在最新版本的React Native上，您可能会在Android上的Gradle构建过程中出错（ ...
React实战--利用甘特图和看板，强化Paas平台应用
cybozu的博客
11-02 869
概述这是一篇 React 在 低代码平台应用上的实战，我们需要利用看板和甘特图来来强化项目管理 app。另外这次用到了 webpack，想了解基本配置思路的可以看项目地址效果图需求整理。
开源项目推荐：`react-gantt`
gitblog_00077的博客
06-12 367
开源项目推荐：react-gantt 项目地址:https://gitcode.com/clayrisser/react-gantt 项目介绍 react-gantt 是一款基于 React 的甘特图组件，专为展示项目时间线和任务进度而设计。通过清晰的可视化界面，你可以轻松地跟踪和管理复杂的项目计划。 项目技术分析 react-gantt 使用了强大的 JavaScript 库 React 和 R...
React - 甘特图时间轴
successLadder的博客
01-15 2069
// 组件调用 <TimeComponents // 维度数 ganttSliderValue={ganttSliderValue} // 维度length ganttAlgorithm={ganttAlgorithm} // 开始时间 startTime={ganttStartTime && ganttStartTime.format('YYYY-MM-DD HH:mm')} // 结束时间 endTime={ganttEndTime && gantt
react-router-dom v6 使用
weixin_44051815的博客
11-19 2万+
react-router-dom react-router-dom v6 整体体验相对于 v5 ，体验要好更多，最大的一个改变，就是曾经的 Route 不可嵌套，整个路由配置必须拆分成若干小块，除非通过 react-router-config 这种插件，才可以实现对整个路由的管理，然而现在，不需要任何插件就可实现对路由配置的管理。 官网地址: react-router 当前例子，根据分支对应例子：react-router-dom-v6-example v6 与 v5 的区别 当前环境 安装 npm
react-native 轮播图 ——react-native-swiper使用
热门推荐
卓原的进化之旅
05-23 3万+
今天学习了轮播图的使用，上网查阅了一下，发现有react-native-swiper和React-Native-Viewpager 两种封装的比较好的第三方组件，对比了下文档，觉得react-native-swiper功能更加完善，而且文档说明比较全面，所以只用了react-native-swiper，下面介绍下react-native-swiper的使用。该组件同时支持android和iOS。
React - Router的基本使用介绍
m0_71485750的博客
10-15 1万+
目前前端流行的三大框架, 都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-routerReact Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。目前React Router6.x已经非常稳定，我们可以放心的使用;
React - Redux Hooks的使用细节详解
m0_71485750的博客
10-31 1万+
在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux库中的connect:但是这种方式必须使用高阶函数结合返回的高阶组件;并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解;在Redux7.1开始，提供了Hook的方式，在函数组件中再也不需要编写connect以及对应的映射函数了的作用是将state映射到组件中:参数一: 要求传入一个回调函数, 会将state传递到该回调函数中;
React之react-hook-form使用
Welkin_qing的博客
08-06 6261
文章目录一、react-hook-form介绍（1）安装（2）使用 一、react-hook-form介绍 React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库，用于React Web＆Native的表单验证。 （1）安装 npm i react-hook-form or yarn add react-hook-form （2）使用 from标签使用 import React from 'react'; import { useForm } from 'react-hook-
【react-use】基本使用
qq_45677671的博客
08-03 8163
文章目录简介传感器用户界面动画效果副作用生命周期状态 简介 随着 React Hooks 的发展，各个团队都开始尝试使用 Hooks 代替 Class，Hooks 正逐渐成为 React 组件的主流写法。得益于 Hooks 的逻辑封装能力，我们可以将常见的逻辑封装起来，以减少代码复杂度。或者使用社区上别人封装的 Hooks，比如 react-use 等。react-use 是社区最流行的 Hooks 库 github地址：https://github.com/streamich/react-use
react-native中使用react-native-vector-icons图标库
一键写代码的博客
12-28 3166
react-native-vector-icons 内置了FontAwesome、 antDesign等常用图标库，还可以支持自定义。 RN0.6以上如何使用？ 1、安装： npm i react-native-vector-icons -D 安装命令。 2、安装完成后，还是需要执行 react-native link 虽然react-native 0.6版本以上有了autolink 。但是还是需要执行一下，否则图标不显示。 3、重新安装app后，引入使用。 import Icon from 'react-
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑，路况，室内地图 内置...
react-native-gl-image-filters:使用gl-react的React-Native图像滤镜
05-01
react-native-gl-image-filters 在描述性VDOM范例中，React Native的OpenGL绑定可在图像和组件上实现复杂的效果。 您可以使用预定义的过滤器： 模糊 对比 饱和 亮度 色调 消极的 棕褐色 锐化 温度 接触。 gl-...
react-image-file-resizer:使用React调整本地图像的大小
04-30
react-image-file-resizer是一个可以重新缩放本地图像的react模块。 您可以更改图像的宽度，高度，格式，旋转度和质量。 它返回调整大小后的图像的新base64 URI或Blob。 URI可用作组件的源。 设置 安装软件包： ...
vue使用mavonEditor(流程图、时序图、甘特图实现)
810cheng
07-24 612
mavonEditor实现流程图、时序图、甘特图
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
react-native-pdf使用
12-29
react-native-pdf是一个用于在React Native应用中显示PDF文件的库。你可以按照以下步骤来使用react-native-pdf： 1. 首先，使用npm或yarn安装react-native-pdf库： ```shell npm install react-native-pdf --save ``` 或者 ```shell yarn add react-native-pdf ``` 2. 然后，使用react-native link命令将库链接到你的项目中： ```shell react-native link react-native-pdf ``` 3. 在你的代码中导入react-native-pdf组件： ```javascript import Pdf from 'react-native-pdf'; ``` 4. 在你的组件中使用Pdf组件来显示PDF文件。你需要提供一个PDF文件的URI作为props传递给Pdf组件： ```javascript <Pdf source={{ uri: 'path/to/your/pdf/file.pdf' }} style={{ flex: 1 }} /> ``` 注意：你需要将'path/to/your/pdf/file.pdf'替换为你实际的PDF文件路径。 这样，当你的应用运行时，它将显示指定路径下的PDF文件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值